aria-hidden : quand masquer du contenu aux lecteurs d'écran
En Bref : L'essentiel à retenir
aria-hidden="true"retire un élément et tous ses enfants de l'arbre d'accessibilité, sans le masquer visuellement.- Ne jamais le poser sur un élément focusable : le contenu disparaît du lecteur d'écran mais reste atteignable au clavier, ce qui crée un focus sur du vide.
- Préférer les solutions natives (
hidden,inert,display: none) qui masquent aux deux à la fois, avant de recourir à ARIA. - Sur une image décorative, la forme attendue est
alt="": le critère RGAA 1.2 l'évalue sur ce point.
L'attribut aria-hidden permet de masquer du contenu aux technologies d'assistance tout en le laissant visible à l'écran. Utilisé correctement, il améliore l'expérience des utilisateurs de lecteurs d'écran. Mal utilisé, il crée des barrières d'accessibilité sévères. Ce guide clarifie son usage.
Fonctionnement de aria-hidden
Ce que fait aria-hidden
Ajouter aria-hidden="true" à un élément le retire, ainsi que tous ses descendants, de l'arbre d'accessibilité. Les lecteurs d'écran l'ignorent complètement comme s'il n'existait pas.
<div aria-hidden="true">
Ce contenu est invisible pour les lecteurs d'écran
<button>Ce bouton aussi est invisible</button>
</div>
Ce que aria-hidden ne fait pas
L'élément reste visible à l'écran et peut encore être focusé avec Tab si c'est un élément interactif. C'est la source de nombreux problèmes.
Différence avec hidden
| Attribut | Visible | Dans l'arbre d'accessibilité | Focusable |
|---|---|---|---|
aria-hidden="true" | Oui | Non | Oui (problématique) |
hidden | Non | Non | Non |
display: none | Non | Non | Non |
visibility: hidden | Non (espace réservé) | Non | Non |
Cas d'usage légitimes
Contenu décoratif redondant
Lorsqu'un élément visuel n'apporte pas d'information supplémentaire, le masquer évite la redondance.
<button>
<svg aria-hidden="true" focusable="false">
<!-- icône de loupe -->
</svg>
Rechercher
</button>
L'icône est décorative car le texte "Rechercher" suffit. Sans aria-hidden, le lecteur pourrait annoncer des éléments SVG internes confus.
SVG complexes décoratifs
Les SVG contiennent souvent des structures complexes sans signification pour l'utilisateur.
<svg aria-hidden="true" focusable="false">
<defs>...</defs>
<path>...</path>
<g>...</g>
</svg>
Note
Ajoutez focusable="false" aux SVG décoratifs car certaines versions d'Internet Explorer rendaient les SVG focusables par défaut.
Contenu dupliqué
Si une information est présentée deux fois (texte et icône par exemple), masquez l'élément redondant.
<a href="/panier">
<span aria-hidden="true" class="badge">3</span>
Panier (3 articles)
</a>
Le badge affiche "3" mais le texte complet annonce déjà le nombre d'articles. Le badge visuel est masqué pour éviter "3 Panier 3 articles".
Éléments visuels d'interface
Séparateurs, décorations et éléments purement visuels.
<span aria-hidden="true" class="separator">|</span>
Erreurs courantes à éviter
Masquer des éléments focusables
C'est l'erreur la plus grave. Un élément aria-hidden="true" mais focusable crée une situation où l'utilisateur peut naviguer vers quelque chose qu'il ne peut pas percevoir.
<!-- INCORRECT -->
<div aria-hidden="true">
<button>Fermer</button>
</div>
L'utilisateur peut atteindre ce bouton avec Tab mais n'entend rien. Il ne sait pas où il est ni ce qu'il peut faire.
Solution : Si l'élément ne doit pas être accessible, retirez-le du flux de tabulation ou masquez-le complètement.
<!-- Correct : élément inerte -->
<div aria-hidden="true" inert>
<button>Fermer</button>
</div>
<!-- Ou : masquer complètement -->
<div hidden>
<button>Fermer</button>
</div>
Masquer du contenu essentiel
Ne masquez jamais d'informations que seul le visuel transmet.
<!-- INCORRECT : prix invisible aux lecteurs -->
<p>
Prix : <span aria-hidden="true">49,99 EUR</span>
</p>
Appliquer sur un parent d'éléments interactifs
L'attribut s'applique à tous les descendants. Attention aux applications trop larges.
<!-- INCORRECT -->
<nav aria-hidden="true">
<a href="/">Accueil</a>
<a href="/produits">Produits</a>
</nav>
Astuce
Avant d'ajouter aria-hidden, vérifiez qu'aucun élément focusable n'est descendant de l'élément cible.
Gestion des modales
Masquer le contenu derrière la modale
Lorsqu'une modale s'ouvre, le contenu derrière doit être masqué et non interactif.
<body>
<div id="main-content" aria-hidden="true" inert>
<!-- Contenu principal masqué quand la modale est ouverte -->
</div>
<div class="modal" role="dialog" aria-modal="true" aria-labelledby="modal-title">
<h2 id="modal-title">Titre de la modale</h2>
<!-- Contenu de la modale -->
</div>
</body>
Utilisation de inert
L'attribut inert (HTML standard) combine le masquage d'accessibilité et le blocage de focus. C'est la solution moderne recommandée.
<div inert>
<!-- Contenu non focusable et non annoncé -->
</div>
inert est préférable à aria-hidden seul car il empêche aussi le focus, évitant le piège de l'élément focusable invisible.
Alternatives à considérer
Première règle d'ARIA
La première règle d'ARIA stipule : n'utilisez pas ARIA si vous pouvez utiliser HTML natif. Avant aria-hidden, considérez :
hidden: masque complètementdisplay: none/visibility: hidden: idem via CSSinert: masque et bloque le focus- Contenu réellement supprimé du DOM
Classes de masquage visuel
Pour masquer visuellement tout en gardant accessible (inverse de aria-hidden) :
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
<button>
<svg aria-hidden="true"><!-- icône --></svg>
<span class="sr-only">Fermer le menu</span>
</button>
Tests et validation
Avec un lecteur d'écran
La meilleure vérification est le test direct :
- Activez NVDA ou VoiceOver
- Naviguez vers l'élément
- Vérifiez qu'il n'est pas annoncé
- Vérifiez qu'aucun enfant focusable ne crée de problème
Avec les outils de développement
L'inspecteur d'accessibilité de Chrome/Firefox montre l'arbre d'accessibilité. Un élément aria-hidden n'apparaît pas dans cet arbre.
Vérifications automatisées
Notre outil d'audit RGAA détecte les utilisations problématiques de aria-hidden, notamment sur les éléments focusables.
Statistiques d'usage
Le WebAIM Million de février 2026 relève une moyenne de 23,3 attributs aria-hidden="true" par page d'accueil, en hausse de 30 % sur un an (18 en 2025) et de plus de 250 % depuis 2020. Cette croissance signale une adoption massive, mais pas toujours correcte.
Les erreurs courantes détectées incluent :
- Éléments focusables masqués
- Contenu essentiel caché
- Sur-utilisation sur des éléments déjà non-sémantiques
Bonnes pratiques résumées
- Utilisez
aria-hiddenuniquement pour le contenu décoratif ou redondant - Jamais sur des éléments interactifs ou focusables
- Préférez
inertpour les contenus temporairement inaccessibles (modales) - Préférez
hiddenou CSS pour un masquage complet - Testez toujours avec un lecteur d'écran
- Documentez la raison de chaque usage dans votre code
Conclusion
aria-hidden est un outil précis qui demande une compréhension claire de son effet. Utilisez-le pour améliorer l'expérience des lecteurs d'écran en supprimant le bruit, jamais pour masquer du contenu significatif. En cas de doute, testez avec des technologies d'assistance ou consultez notre checklist UX accessibilité pour une vérification systématique.
Deux prolongements selon votre besoin : le nommage des éléments interactifs dans notre guide aria-label et aria-labelledby, et le traitement des images décoratives dans images décoratives et alt vide, qui relève du critère RGAA 1.2.
Analysez votre page pour repérer les aria-hidden posés sur des éléments focusables, l'erreur la plus fréquente et l'une des rares qu'un automate tranche seul.
Questions fréquentes
Quelle différence entre aria-hidden, hidden et display none ?
L'attribut aria-hidden="true" retire l'élément de l'arbre d'accessibilité mais le laisse visible à l'écran et atteignable au clavier. Les propriétés hidden et display: none le retirent des deux à la fois, visuellement et pour les technologies d'assistance. La règle pratique : si le contenu ne doit être perçu par personne, utilisez le masquage natif ; aria-hidden ne sert qu'au contenu visible dont la restitution vocale serait du bruit.
Peut-on mettre aria-hidden sur un bouton ou un lien ?
Non. Un élément focusable masqué par aria-hidden reste accessible à la tabulation : l'utilisateur au clavier atteint un élément que son lecteur d'écran n'annonce pas, et se retrouve avec un focus sur du vide. Si le contrôle doit être retiré, utilisez inert sur son conteneur, ou retirez-le du DOM.
Faut-il aria-hidden sur une image décorative ?
Un attribut alt vide suffit pour une balise img : alt="" la retire déjà de l'arbre d'accessibilité. L'ajout d'aria-hidden="true" est redondant mais sans effet néfaste, et reste utile sur les icônes rendues autrement qu'en img, par exemple une icône SVG inline ou une police d'icônes.
Guides RGAA associés
Pour aller plus loin sur les sujets abordés dans cet article, consultez nos fiches techniques :
Chaque image porteuse d'information doit avoir une alternative textuelle pertinente via l'attribut alt. Les images décoratives doivent avoir un attribut alt vide.
Chaque champ de formulaire doit avoir une étiquette (label) qui lui est liée explicitement.
L'ordre de tabulation clavier doit être cohérent avec l'ordre de lecture visuel (l'absence de piège au clavier relève du critère 12.9).
Vidéos RGAA sur ce thème
Pour voir ces sujets en action, regardez les épisodes vidéo correspondants :
Articles similaires
Votre site est-il conforme ?
Ne prenez pas de risques avec l'accessibilité. Lancez un audit complet de votre site en quelques minutes et obtenez un rapport détaillé des corrections à apporter.