Maîtriser aria-hidden : quand et comment masquer du contenu aux technologies d'assistance
En Bref : L'essentiel à retenir
- aria-hidden true retire un élément et ses enfants de l'arbre d'accessibilité sans le masquer visuellement
- Ne jamais utiliser aria-hidden sur des éléments focusables ou interactifs
- Privilégier les solutions HTML natives comme hidden ou inert avant d'utiliser ARIA
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>
[!TIP] 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
Selon les analyses récentes, les sites web utilisent en moyenne 18 attributs aria-hidden="true" par page, une augmentation de plus de 250% depuis 2020. Cette croissance suggère 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.
Pour approfondir les attributs ARIA, explorez nos autres guides techniques ou utilisez notre outil d'audit qui détecte automatiquement les erreurs d'utilisation courantes.
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 et ne pas piéger le focus.
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.