Aller au contenu
A11ySignal
critiqueWCAG 4.1.2 · A

L’élément 'select' doit avoir un nom accessible

select-name

Vérifier que l’élément 'select' a un nom accessible

Le critère derrière

4.1.2 Nom, rôle et valeur

Chaque contrôle doit exposer ce qu'il est, comment il s'appelle et dans quel état il se trouve.

Niveau A · EN 301 549 § 9.4.1.2

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 critique. 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/select-name

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

Autres vérifications pour 4.1.2

mineuraria-deprecated-roleDeprecated ARIA roles must not be used