aria-disabled

Quand l’utiliser

Lorsqu’un bouton, un lien, un champ ou un widget composite est temporairement inopérable mais doit rester dans l’ordre de tabulation pour que les utilisateurs puissent le découvrir et comprendre pourquoi il est désactivé. Définissez aria-disabled="true" et appliquez un style visuel rendant l’état désactivé sans ambiguïté.

Comparaison avec les attributs connexes :

• HTML disabled (sur <button>, <input>, <select>, <textarea>, <fieldset>) — retire le contrôle de l’ordre de tabulation, ignore les clics et empêche la soumission de la valeur. À utiliser quand l’utilisateur n’a rien à faire avec le contrôle.
• aria-disabled="true" — le lecteur d’écran annonce « estompé » / « indisponible », mais l’élément reste focusable. Vous devez également empêcher le gestionnaire de clic de s’exécuter. À utiliser sur des widgets personnalisés, sur des balises <a> (qui n’acceptent pas disabled), ou quand l’état désactivé nécessite une info-bulle expliquant pourquoi.
• aria-readonly — la valeur ne peut pas être modifiée mais le contrôle reste opérable et focusable. L’utilisateur peut la copier et le formulaire la soumettra quand même.
• aria-hidden — retire l’élément de l’arbre d’accessibilité entièrement. Objectif différent : masqué, pas désactivé.

Maintenir la synchronisation

Les valeurs valides sont "true" et "false". Par défaut, omettez l’attribut ou définissez "false" quand le contrôle est actif — il n’est pas nécessaire de rendre aria-disabled="false" sur chaque contrôle actif.

Quand aria-disabled="true" :

• Bloquez l’exécution du gestionnaire de clic. L’attribut ne bloque pas les événements de lui-même.
• Empêchez l’activation clavier par défaut (Entrée, Espace).
• Assurez-vous que le style visuel rend l’état désactivé évident ; vérifiez qu’il satisfait toujours le contraste non-textuel WCAG 1.4.11 (l’apparence désactivée est explicitement exempte, mais un indice visuel clair reste une bonne pratique).

Erreurs courantes

• Utiliser aria-disabled="true" sans bloquer le gestionnaire de clic — l’élément paraît estompé mais déclenche toujours son action.
• Utiliser à la fois disabled et aria-disabled sur le même élément. L’attribut natif expose déjà l’état ; le doublon est redondant.
• Utiliser aria-disabled sur <a> sans supprimer href ni empêcher le comportement par défaut — le lien navigue quand même.
• Désactiver des contrôles sans expliquer pourquoi. WCAG 3.3.1 attend une erreur ou une instruction.
• Confondre aria-disabled et aria-hidden. Les éléments désactivés restent dans l’arbre d’accessibilité ; les éléments masqués en disparaissent.

Exemple

<button type="submit" aria-disabled="true" aria-describedby="submit-help">
  Passer la commande
</button>
<p id="submit-help">Ajoutez au moins un article à votre panier pour activer l'envoi.</p>