L'attribut aria-hidden est utilisé pour améliorer l'accessibilité d'une interface. Pourtant mal utilisé, il peut au contraire rendre certains contenus totalement inaccessibles aux utilisateurs de lecteurs d'écran.
Alors, à quoi sert réellement aria-hidden et dans quels cas faut-il l'utiliser ?
À quoi sert aria-hidden ?
L'attribut aria-hidden="true" permet de masquer un élément aux technologies d'assistance comme les lecteurs d'écran, par exemple.
Néanmoins, sa présence n'a aucun effet sur l'affichage visuel de l'élément.
Par exemple :
Une icône portant un attribut aria-hidden="true" sera visible sur la page mais ne sera pas prise en compte par les technologies d'assistance.
<span aria-hidden="true">🔍</span>L'icône reste visible à l'écran, mais elle ne sera pas annoncée vocalement.
Dans quels cas utiliser aria-hidden ?
aria-hidden="true" est surtout utile pour masquer des contenus décoratifs ou éviter des doublons de lecture.
Par exemple :
- une icône accompagnée d'un texte
- un emoji décoratif
- un élément visuel sans information utile
<button>
<span aria-hidden="true">🔍</span>
Rechercher
</button>Ici, le lecteur d'écran annoncera simplement “Rechercher".
Attention : aria-hidden ne masque pas visuellement le contenu
C'est un point important à retenir : l'attribut aria-hidden ne cache rien à l'écran.
Le contenu reste visible pour les utilisateurs voyants, mais il disparaît pour les technologies d'assistance.
Vous souhaitez que vos équipes prennent en main les attributs aria plus en détail, découvrez nos modules de formation express. Ils vous permettent d'approfondir rapidement les thématiques qui vous intéressent.
Une erreur aux lourdes conséquences : les éléments interactifs
Un élément interactif ne doit jamais être masqué avec l'attribut aria-hidden="true".
Par exemple :
<button aria-hidden="true">Valider</button>Le bouton reste visible, mais peut devenir inaccessible ou incohérent pour une technologies d'assistance.
Même problème lorsqu'un bouton ou un lien se trouve à l'intérieur d'un conteneur portant aria-hidden="true". L'état de l'attribut se transmet d'élément parent à élément enfant.
L'élément interactif sera donc atteignable au clavier mais ne pourra pas être restitué par les technologies d'assistance, il est considéré comme vide.
Attention à ne pas en abuser
Parfois, aria-hidden est ajouté inutilement.
Exemple : Un contenu masqué par le CSS (ex : display: none;) ou par l'attribut hidden est déjà ignoré par les technologies d'assistance.
L'attribut aria-hidden="true" doit être utilisé uniquement pour permettre d'améliorer l'expérience utilisateur.
Comme souvent avec les attributs ARIA : "No ARIA is better than Bad ARIA" (Ne pas utiliser d'ARIA est mieux que d'utiliser ARIA d'une mauvaise façon). Lire l'article du W3C à ce sujet (anglais)
Le W3C nous met en garde à ce sujet dans la spécification ARIA dédiée à l'attribut : https://www.w3.org/TR/wai-aria/#aria-hidden
Faire le point sur l'accessibilité de votre site ? Explorez nos différentes offres d'audits d'accessibilité.
Conclusion : Ce qu'il faut retenir
aria-hidden="true" peut être très utile pour améliorer l'expérience des utilisateurs de lecteurs d'écran, mais uniquement lorsqu'il est utilisé correctement.
Avant de l'ajouter, posez-vous toujours cette question : ce contenu apporte-t-il une information utile aux utilisateurs ?
Envie d'en savoir plus sur un autre sujet technique ? Découvrez aussi notre article : Étiquettes <label> : comment rendre les formulaires accessibles ?
