enum Valeurs : true,false

aria-disabled

Indique qu'un élément est perçu comme désactivé, sans le retirer de l'arbre d'accessibilité ni de l'ordre de tabulation.

Description

aria-disabled="true" annonce l’élément comme désactivé aux technologies d’assistance, mais contrairement à l’attribut HTML disabled, il ne supprime pas l’élément de l’ordre de focus. L’élément reste atteignable au clavier, ce qui permet d’afficher une info-bulle explicative ou de fournir du contexte à l’utilisateur.

Syntaxe

<button aria-disabled="true">Envoyer (formulaire incomplet)</button>

Exemples

Bouton désactivé avec explication disponible au focus :

<button aria-disabled="true" aria-describedby="btn-info">
  Passer la commande
</button>
<span id="btn-info" class="sr-only">
  Remplissez tous les champs obligatoires pour activer ce bouton.
</span>

Élément de menu désactivé :

<ul role="menu">
  <li role="menuitem">Modifier</li>
  <li role="menuitem" aria-disabled="true">Supprimer (lecture seule)</li>
</ul>

Notes

Différence avec disabled HTML : disabled empêche le focus et exclut le champ des données du formulaire. aria-disabled conserve le focus et n’empêche pas la soumission — il faut bloquer les interactions manuellement en JavaScript.

Bloquer les interactions : avec aria-disabled="true", il faut intercepter les clics et les événements clavier pour empêcher l’action, car l’élément reste fonctionnel dans le DOM.

Visuel : accompagner toujours aria-disabled d’un style visuel (opacité, couleur atténuée) pour que les utilisateurs voyants perçoivent aussi l’état désactivé.

Support navigateurs