enum Valeurs : true,false

aria-hidden

Masque un élément et ses descendants de l'arbre d'accessibilité, les rendant invisibles aux technologies d'assistance.

Description

aria-hidden="true" exclut l’élément de l’arbre d’accessibilité : les lecteurs d’écran ignorent complètement l’élément et son contenu. L’élément reste visible visuellement et dans le DOM.

aria-hidden="false" réintègre un élément dans l’arbre d’accessibilité — rarement nécessaire car c’est le comportement par défaut.

Syntaxe

<!-- Icône décorative ignorée par les AT -->
<svg aria-hidden="true" focusable="false">…</svg>

<!-- Texte redondant masqué -->
<span aria-hidden="true">★★★★☆</span>
<span class="sr-only">4 étoiles sur 5</span>

Exemples

Bouton avec icône et texte visible :

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

Carousel : masquer les diapositives inactives :

<div role="group" aria-roledescription="diapositive" aria-hidden="true">…</div>
<div role="group" aria-roledescription="diapositive" aria-hidden="false">…</div>

Notes

Ne jamais masquer un élément focusable : si aria-hidden="true" est appliqué sur un élément qui peut recevoir le focus (lien, bouton, input), celui-ci reste atteignable au clavier mais son contenu est silencieux — expérience très déroutante.

Différence avec display: none / visibility: hidden : ces propriétés CSS masquent à la fois visuellement et des AT. aria-hidden ne masque que des AT.

Ne pas appliquer sur <body> : masquer le <body> entier rendrait toute la page inaccessible.

Support navigateurs