État État global

`aria-hidden`

Retire un élément et tous ses descendants de l'arbre d'accessibilité. Les utilisateurs voyants continuent de voir l'élément ; la technologie d'assistance n'y accède jamais. À réserver au contenu décoratif ; ne jamais appliquer à un contrôle pouvant recevoir le focus.

Quand l’utiliser

Sur du contenu décoratif qui n’apporte rien aux utilisateurs de lecteurs d’écran — généralement des icônes déjà accompagnées d’un libellé textuel, des séparateurs, des graphiques d’arrière-plan ou du texte dupliqué existant uniquement pour la mise en page. Marquer ces éléments aria-hidden="true" permet de centrer l’arbre d’accessibilité sur le contenu significatif.

Comparaison avec des mécanismes similaires :

aria-hidden="true" — visible pour les utilisateurs voyants, invisible pour la technologie d’assistance. L’élément continue d’occuper de l’espace dans la mise en page.
CSS display: none et l’attribut HTML hidden — invisibles pour tous (utilisateurs voyants et technologie d’assistance). L’élément n’est pas du tout restitué.
CSS visibility: hidden — invisible pour tous mais l’élément occupe toujours de l’espace dans la mise en page.
L’attribut inert — l’élément et ses descendants ne peuvent pas recevoir le focus, les événements de clic sont supprimés, mais ils restent dans l’arbre d’accessibilité (contrairement à aria-hidden). L’outil approprié pour les arrière-plans de modales et les écrans désactivés par le routage.

Point crucial : n’appliquez jamais aria-hidden="true" à un élément qui est — ou contient — un contrôle pouvant recevoir le focus. Les utilisateurs du clavier peuvent toujours y accéder via la touche Tab, mais leur lecteur d’écran ne l’annoncera pas. Ils arrivent sur un contrôle qui leur est invisible. C’est l’un des problèmes les plus fréquemment rapportés par axe-core.

Comment le maintenir synchronisé

Les valeurs valides sont "true", "false" et "undefined". La valeur utile est "true" ; "false" existe pour remplacer un aria-hidden d’un ancêtre, ce qui n’est presque jamais nécessaire en pratique.

L’état peut être statique (une icône qui est toujours décorative) ou dynamique. Si vous basculez aria-hidden sur une région — par exemple, pour masquer l’application principale pendant qu’une modale est ouverte — synchronisez-le avec l’état visuel réel et associez-le à inert pour que la région ne puisse pas non plus recevoir le focus.

Erreurs fréquentes

aria-hidden="true" sur un élément pouvant recevoir le focus — le problème le plus fréquemment signalé par axe-core.
Utiliser aria-hidden pour masquer du texte visible que l’on ne souhaite pas que les lecteurs d’écran lisent. Il vaut mieux supprimer le texte ou le retirer du DOM.
Oublier aria-hidden="true" sur une icône purement décorative à côté d’un bouton libellé — le lecteur d’écran annonce le nom accessible de l’icône en plus du libellé du bouton.
Définir aria-hidden="true" sur l’élément <body> ou <main> pour bloquer le contenu d’arrière-plan derrière une modale, sans utiliser également inert — le focus clavier peut encore s’en échapper.
Utiliser aria-hidden="false" pour « afficher » quelque chose masqué par CSS. Le CSS le masque toujours.

Exemple

<button type="button">
  <svg aria-hidden="true" focusable="false" width="16" height="16">…</svg>
  Enregistrer
</button>