← Toutes les règles

Noms et rôles

Un élément masqué ne doit pas rester accessible au clavier

• Règle: aria-hidden-focus
• Gravité: Sérieux
• Niveau WCAG A

Pourquoi c’est important

aria-hidden="true" masque un élément aux lecteurs d’écran, pas à la touche Tab. Qui utilise les deux atterrit sur un composant annoncé comme rien, dans une partie de la page qu’il ne voit pas.

Comment corriger

1. Ajoutez l’attribut inert au conteneur masqué pour que son contenu quitte aussi l’ordre de tabulation.
2. Là où inert n’est pas envisageable, mettez tabindex="-1" sur chaque descendant focusable.
3. Pour un contenu également masqué visuellement, display:none ou l’attribut hidden le retire des deux à la fois.

Dans le balisage

<div aria-hidden="true">
  <button>Buy now</button>
</div>

<div aria-hidden="true" inert>
  <button>Buy now</button>
</div>

L’exigence sous-jacente

Cette règle est une manière d’échouer aux critères de succès WCAG 2.2 suivants. Le W3C, qui rédige la norme, explique chacun d’eux :

• 4.1.2 Nom, rôle et valeur (s’ouvre dans un nouvel onglet) — Niveau WCAG A

Pour aller plus loin

Deque University sur aria-hidden-focus (s’ouvre dans un nouvel onglet)

Deque développe axe-core, le moteur open source utilisé par notre scanner. Sa page documente la règle telle que le moteur l’implémente.

Les contrôles automatiques trouvent les défaillances qu’un navigateur peut prouver. Ils ne peuvent pas juger si un sous-titrage est fidèle, si une alternative textuelle est utile, ni si une page s’utilise de bout en bout au clavier : cela demande une personne.