ARIA : attribut aria-disabled
L'état aria-disabled indique que l'élément est perceptible mais désactivé, donc non modifiable ni opérable.
Description
L'attribut aria-disabled, lorsqu'il est défini à true, indique que l'élément sur lequel il est appliqué, ainsi que tous ses descendants focalisables, doivent être considérés comme désactivés. Cette déclaration informe les utilisateur·ice·s de technologies d'assistance, comme les lecteurs d'écran, que ces éléments ne sont pas censés être modifiables ou opérables.
Contrairement à l'attribut booléen HTML disabled, qui communique qu'un contrôle de formulaire est désactivé, modifie son apparence et supprime toute fonctionnalité (y compris la participation à la soumission du formulaire), aria-disabled="true" expose uniquement ces éléments comme désactivés sur le plan sémantique. Les développeur·euse·s doivent s'assurer manuellement que la fonctionnalité de ces éléments est effectivement désactivée.
Pour désactiver des contrôles de formulaire HTML natifs, il faut utiliser l'attribut disabled, qui fournit toutes les fonctionnalités attendues par défaut. Cependant, il existe des cas où des éléments doivent être exposés comme désactivés tout en restant accessibles à la navigation au clavier (Tab). Cela améliore leur découvrabilité, car ils ne sont pas retirés de l'ordre de tabulation, et aria-disabled ne modifie pas la focalisation ni l'apparence par défaut. Quelques exemples d'usage pertinent :
- Le bouton d'en-tête d'un panneau d'accordéon non repliable,
- Un bouton qui doit rester dans l'ordre de tabulation mais dont l'action est momentanément indisponible (ex. : soumission d'un formulaire),
- Des éléments temporairement inactifs dans un menu qui seraient sinon ignorés par la navigation clavier standard.
Dans ces cas, on souhaite que les utilisateur·ice·s trouvent ces éléments via la navigation clavier, même si leur fonctionnalité est désactivée. Il faut alors utiliser JavaScript pour désactiver la fonctionnalité et modifier l'apparence de l'élément afin que les utilisateur·ice·s voyant·e·s sachent qu'il est désactivé.
Note :
L'état désactivé s'applique à l'élément avec aria-disabled="true" et à tous ses descendants focalisables. Soyez vigilant·e lors de l'utilisation sur des conteneurs, notamment s'ils contiennent à la fois des contrôles de formulaire et des liens : l'intention peut être de désactiver les contrôles sans désactiver les liens.
Un autre cas d'usage de aria-disabled plutôt que l'attribut HTML disabled concerne les contrôles personnalisés qui doivent être marqués comme désactivés, mais qui ne supportent pas l'attribut disabled. Par exemple, dans l'extrait suivant, un <div> est utilisé pour créer un bouton personnalisé devant être désactivé. Or, <div> n'accepte pas l'attribut disabled, même avec role="button". Il faut donc utiliser aria-disabled.
<div role="button" aria-disabled="true" tabindex="-1">Modifier</div>
Comme pour la désactivation fonctionnelle, il faut aussi adapter le style. Contrairement à l'attribut HTML disabled, qui applique les styles :disabled du navigateur, aria-disabled="true" n'applique aucun style par défaut. On peut styliser l'élément avec le sélecteur d'attribut [aria-disabled="true"].
[aria-disabled="true"] {
opacity: 0.5;
}
Si vous souhaitez que le contrôle reste dans l'ordre de tabulation, notamment si l'élément représente un contenu important, il faudra veiller à ce que le style conserve un contraste suffisant. Par exemple, un bouton désactivé qui introduit un panneau d'accordéon non repliable doit rester lisible.
@media (forced-colors: active) {
[aria-disabled="true"] {
border-color: GrayText;
color: GrayText;
}
}
La requête média forced-colors détecte si l'agent utilisateur a activé un mode couleurs forcées : dans ce cas, la couleur du texte et des bordures est définie sur la couleur système GrayText.
À noter : avec aria-disabled, il faut toujours prévoir le style visuel pour signaler l'état désactivé, notamment en mode contraste élevé sous Windows.
Note :
Si vous utilisez pointer-events: none; pour rendre un élément non cliquable, pensez à désactiver aussi l'interactivité côté JavaScript. pointer-events: none; bloque les clics souris, mais n'empêche pas l'activation clavier.
function onClick(event) {
event.preventDefault();
}
function toggleDisabled(element, status, update) {
if (status) {
// element.input.disabled = false;
element.setAttribute("aria-disabled", "false");
update.textContent = "L'élément est maintenant activé.";
element.addEventListener("click", onClick);
} else {
// element.input.disabled = true;
element.setAttribute("aria-disabled", "true");
update.textContent = "L'élément est maintenant désactivé.";
element.removeEventListener("click", onClick);
}
}
Quand vous basculez de aria-disabled="true" à "false", utilisez JavaScript pour :
- Passer la valeur à
false(ou retirer l'attribut), - Activer l'élément,
- Informer l'utilisateur·ice que le contrôle est activé.
Si vous n'utilisez que le CSS pour styliser l'état désactivé via un sélecteur d'attribut, ce style ne s'appliquera plus dès que l'attribut sera retiré ou modifié.
Valeurs
Interfaces associées
Element.ariaDisabled-
La propriété
ariaDisabled, qui fait partie de l'interfaceElement, reflète la valeur de l'attributaria-disabled, qui indique que l'élément est perceptible mais désactivé, donc non modifiable ni opérable. ElementInternals.ariaDisabled-
La propriété
ariaDisabledde l'interfaceElementInternalsreflète la valeur de l'attributaria-disabled.
Rôles associés
Utilisé dans les rôles :
Hérité par les rôles :
Spécifications
| Specification |
|---|
| Accessible Rich Internet Applications (WAI-ARIA) # aria-disabled |