aria-hidden n’est pas assigné aux éléments qui reçoivent le focus au clavier

Pourquoi cette vérification existe

C'est le critère sur lequel butent les composants maison. Un `div` stylé en case à cocher ne dit rien aux technologies d'assistance sur le fait d'être coché.

Ce qui la déclenche habituellement

• échoueUn interrupteur en `<div>` sans `role="switch"` ni `aria-checked`.
• échoueUn bouton en icône sans nom accessible.
• échoueUn accordéon dont l'en-tête ne met jamais `aria-expanded` à jour.
• échoueUn `<select>` maison sans `role="combobox"` ni `aria-activedescendant`.

Comment corriger

• à faireUtilisez l'élément natif partout où il en existe un. `<button>`, `<input type="checkbox">` et `<select>` fournissent tout cela gratuitement.
• à fairePour un composant réellement sur mesure, suivez le motif correspondant des ARIA Authoring Practices, comportement clavier compris.
• à faireGardez les attributs d'état synchronisés avec ce qui est à l'écran.

Comment c'est signalé

A11ySignal le signale avec un impact grave. Chaque élément en échec arrive avec son sélecteur CSS et le balisage fautif, pour aller droit à la ligne plutôt que de la chercher. Deque publie le détail au niveau du moteur :

https://dequeuniversity.com/rules/axe/4.13/aria-hidden-focus ↗

Vérification implémentée par axe-core 4.13.0, © Deque Systems, MPL-2.0.

Autres vérifications pour 4.1.2