Dernière mise à jour : 31 mars 2026
Règles pour baliser et rendre accessible les différents états des composants.
Les différents états et leur application
Pour être accessibles, les composants doivent permettre aux technologies d’assistance de comprendre et d’annoncer leur état. Cette information doit être annoncée dès l’arrivée du focus sur un élément, ou dès que son statut change après avoir été utilisé.
Seuls les états qui donnent une indication visuelle de l’utilisation d’un élément doivent être annoncées. Les états de transition n’ont pas besoin d’être communiqués. Par exemple, on doit rendre accessible l’état ouvert ou fermé d’un tiroir et non l’effet de changement de couleur du même élément au survol.
Cette page présente les règles générales d'accessibilité liées aux états. Pour des instructions détaillées sur un élément particulier, veuillez consulter la page dédiée à chaque composant de notre système de design.
États « ouvert » et « fermé »
Pour les composants dont le contenu s'affiche ou se masque, comme les accordéons, les menus ou les tiroirs par exemple, l’état doit être explicitement annoncé par les lecteurs d’écran. Cela permet aux gens qui ont une limitation visuelle de savoir si un contenu est disponible. Il faut créer des balises spécifiques, selon le type de composant.
- Composants natifs : L’état est annoncé automatiquement, par exemple via le <summary>.
- Composants sur mesure : Il faut ajouter l'attribut aria-expanded, qui a une valeur dynamique, sur l'élément qui contrôle le bouton.
Comment l'implémenter ?
- Pour l’état « ouvert », il faut ajouter l’attribut aria-expanded="true" pour que le lecteur d’écran annonce que le contenu est déployé.
- Pour l’état « fermé », il faut ajouter l’attribut aria-expanded="false" pour que le lecteur d’écran annonce que le contenu est réduit.
Exemple
Sur le bouton affichant un menu burger fermé, on va appliquer un attribut aria-expanded=”false”. À l’activation de ce bouton, le menu s’affiche et la valeur de l’attribut passe dynamiquement à “true”.
États « coché » et « non coché »
Les lecteurs d’écran doivent annoncer explicitement l'état des cases à cocher et des boutons radio, afin que tout le monde puisse savoir si une option est sélectionnée ou non. Pour y arriver, il faut créer des balises spécifiques, selon le type de composant.
- Composants natifs : L’état est géré automatiquement par le navigateur, par exemple avec <input type="checkbox"> ou <input type="radio">.
- Composants sur mesure : Il est recommandé d’utiliser l'attribut aria-checked pour communiquer l'état au lecteur d'écran.
Comment l'implémenter ?
- Pour l’état « coché », il faut ajouter l’attribut aria-checked="true".
- Pour l’état « non coché », il faut ajouter l’attribut aria-checked="false".
- Pour les composants non natifs comme <div role="button"> ou <span role="link">, l’attribut tabindex="0" est obligatoire pour permettre l’accès au focus du clavier.
À savoir qu’en javascript, l’attribut aria-checked est mis à jour dynamiquement.
Exemple
<span role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="label1"></span>
États « sélectionné » et « non sélectionné »
L'état sélectionné indique qu'un élément a été choisi parmi un ensemble de choix possibles, dans un onglet, une liste ou dans un menu par exemple. Cet état n'est pas toujours annoncé automatiquement par les lecteurs d'écran, surtout pour les composants complexes. Pour y arriver, il faut créer des balises spécifiques, selon le type de composant :
- Composants natifs : Bien que certains éléments comme les <option> soient natifs, leur état de sélection doit être renforcé par des attributs ARIA. Cela garantit que les lecteurs d’écran vont annoncer l’état de manière constante.
- Composants sur mesure : Il est recommandé d’utiliser l’attribut aria-selected ou aria-pressed selon la nature de l'interaction, qu’il s’agisse d’un choix dans une liste ou d’un interrupteur. Il est important d’utiliser ces attributs sur des balises ayant un rôle adapté et compatible.
Comment l'implémenter ?
Voici la marche à suivre pour les éléments d'une liste, comme des onglets ou des options :
- Appliquer aria-selected="true" sur l'élément choisi.
- Appliquer aria-selected="false" sur les autres éléments.
- S’il est possible de sélectionner plusieurs éléments à la fois, il est recommandé d’ajouter l'attribut aria-multiselectable="true" sur l'élément parent, comme la liste d'onglets ou la liste déroulante.
Il est important de noter que l’attribut aria-selected peut être appliqué aux liens <a href>, aux options d’un menu déroulant <option>, et aux onglets “tabs”, entre autres.
Il existe une autre manière d'assigner l'état activé ou désactivé, qui est idéale pour les boutons de type « interrupteur », les boutons qui activent et désactivent le son d'un média ou les boutons d’ajout dans une liste de favoris, entre autres :
- Utiliser l'attribut aria-pressed="true" pour l'état activé/enfoncé.
- Utiliser l'attribut aria-pressed="false" pour l'état désactivé/levé.
Note pour les libellés des boutons
Le libellé d'un bouton ne doit pas être modifié dynamiquement si le bouton porte un attribut aria-pressed.
Par exemple, un bouton « mettre en sourdine » doit conserver cet intitulé visible, qu'il soit activé ou non. Si le texte est modifié pour « réactiver le son », deux signaux différents seront envoyés en même temps au lecteur d’écran. Cela créera de la confusion puisque les lecteurs d’écran ne pourront pas annoncer clairement l’état du bouton aux gens qui naviguent sur le site.
État « désactivé »
L'état désactivé indique qu’un élément interactif existe, mais que sa fonctionnalité n’est pas disponible pour le moment. Lorsqu'un élément est désactivé, les lecteurs d’écran l'annoncent généralement comme étant « non disponible ».
Des exemples de cas d’usage de l’état « désactivé »
- Dans une pagination, lorsque la page 1 est affichée, le bouton « Page précédente » peut être masqué ou avoir un état désactivé.
- Dans une galerie d’images ou un carrousel, lorsque la dernière diapositive est affichée, le bouton « Suivant » peut être masqué ou avoir un état désactivé.
- Un bouton « Valider » ou « Étape suivante » peut être désactivé tant que les conditions obligatoires qui le précèdent ne sont pas remplies. Par exemple, dans le cas d’un formulaire avec des champs obligatoires ou dans une page de conditions générales d’utilisation.
Comment l'implémenter ?
Il existe deux façons de coder cet état selon s’il faut bloquer complètement l'élément ou simplement signaler qu'il est inactif en le laissant accessible au clavier. Le choix de l'attribut dépend de l'élément utilisé et du comportement souhaité :
1. L'attribut HTML disabled, qui permet de bloquer complètement l’élément
Cet attribut est le plus robuste, mais il ne fonctionne que sur les éléments suivants : <button>, <fieldset>, <optgroup>, <option>, <select>, <textarea> et <input>.
- Comportement : Il rend l'élément non modifiable. Il est invisible pour la navigation au clavier et ses données sont exclues au clic, par exemple lors de l'envoi d’un formulaire.
- Bon à savoir : Lorsqu’il est appliqué à un <fieldset>, cet attribut désactive automatiquement tous les champs qu'il contient.
2. L'attribut aria-disabled="true", qui permet d’envoyer un signal d’élément bloqué
Cet attribut peut être appliqué à n'importe quel élément qu’il s’agisse d’une <div>, d’un <a> ou d’un composant sur mesure.
- Comportement : Il sert exclusivement à indiquer aux technologies d’assistance que l’élément est désactivé. Contrairement à l'attribut HTML natif, il ne modifie pas le comportement de l'élément pour le navigateur, celui-ci reste cliquable et accessible au clavier.
- Responsabilité technique : Comme cet attribut ne crée aucun blocage automatique, il est indispensable de compléter son implémentation manuellement. Le but est de ne plus pouvoir interagir avec l’élément, de le retirer de la navigation au clavier (via tabindex="-1") et de définir son apparence visuelle en CSS.
Quelques précisions sur le style CSS
- Pour l’attribut disabled, il faut utiliser le pseudo-sélecteur :disabled.
- Pour l'attribut ARIA, il faut utiliser le sélecteur [aria-disabled="true"].
État « courant »
L’état « courant » sert de repère, comme un « Vous êtes ici » sur une carte. Il désigne l’élément actif au sein d’un ensemble, comme une page dans un menu ou une étape dans un formulaire.
Puisqu’il n’existe aucun équivalent natif en HTML pour signaler cette position, il faut ajouter cette fonctionnalité à l’aide d’un attribut ARIA, afin de garantir que l’information soit correctement transmise aux technologies d’assistance.
Comment l'implémenter ?
L'attribut aria-current accepte plusieurs valeurs selon le contexte :
- Pour la navigation, utiliser aria-current="page" sur le lien correspondant à la page affichée, par exemple un fil d'Ariane ou un menu principal.
- Pour un processus, utiliser aria-current="step" sur l'étape en cours, par exemple l’étape 2 d'un parcours d'achat.
- Pour les dates et les heures, utiliser aria-current="date" pour la date du jour dans un calendrier ou aria-current="time" pour l'heure actuelle dans un emploi du temps.
- Pour un emplacement contextuel, utiliser aria-current="location" pour indiquer un point précis dans un graphique ou un plan.
- Pour les autres cas, utiliser aria-current="true" lorsqu’aucune des valeurs spécifiques ci-dessus ne correspond.
Bon à savoir
Il ne faut pas confondre aria-current avec aria-selected. L’attribut aria-current doit être appliqué pour désigner un élément courant qui est affiché, alors que aria-selected indique l'état de sélection d’un élément.
Comment appliquer un état courant à un menu à plusieurs niveaux
Dans un menu complexe, il est possible d'utiliser deux valeurs différentes pour aider les utilisateurs et utilisatrices à se repérer dans la hiérarchie :
- Pour l'élément parent, on applique aria-current="true" sur le bouton ou l'onglet de premier niveau. Par exemple, sur l’onglet « Mieux consommer » ou « Programmes d’aide financière » pour indiquer qu'une de ses sous-pages est active.
- Pour l'élément enfant, on applique aria-current="page" sur le lien précis de la page où se trouve la personne qui navigue sur le site. Par exemple, la page « Comprendre les périodes de pointes » de l’exemple ci-dessous.
