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 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/frame-title ↗
Vérification implémentée par axe-core 4.13.0, © Deque Systems, MPL-2.0.
Autres vérifications pour 4.1.2
critiquearia-allowed-attrLes éléments doivent seulement utiliser les attributs ARIA autorisés
critiquearia-hidden-bodyaria-hidden='true' ne doit pas être présent sur <body>
critiquearia-required-attrLes attributs ARIA requis doivent être présents
critiquearia-rolesLes rôles ARIA doivent se conformer aux valeurs valides
critiquearia-valid-attrLes attributs ARIA doivent se conformer aux noms valides
critiquearia-valid-attr-valueLes attributs ARIA doivent comporter des valeurs valides
critiquebutton-nameLes boutons doivent avoir un texte perceptible
critiqueduplicate-id-ariaLes IDs utilisés avec ARIA et dans les étiquettes doivent être uniques
critiqueinput-button-nameLa valeur textuelle des contrôles de boutons doit être perceptible
critiqueinput-image-altLes boutons images doivent avoir une alternative textuelle
critiqueselect-nameL’élément 'select' doit avoir un nom accessible
gravearia-braille-equivalentaria-braille attributes must have a non-braille equivalent
gravearia-command-nameLes commandes ARIA doivent avoir un nom accessible
gravearia-conditional-attrARIA attributes must be used as specified for the element's role
gravearia-hidden-focusaria-hidden n’est pas assigné aux éléments qui reçoivent le focus au clavier
gravearia-input-field-nameLes champs de formulaire ARIA ont un intitulé accessible
gravearia-prohibited-attrElements must only use permitted ARIA attributes
gravearia-roledescriptionUtiliser aria-roledescription sur les éléments dont le rôle a une valeur sémantique
gravearia-tab-nameARIA tab nodes must have an accessible name
gravearia-toggle-field-nameLes champs de basculement ARIA ont un libellé accessible
gravearia-tooltip-nameLes nœuds ARIA "tooltip" doivent avoir un nom accessible
graveframe-title-uniqueChaque cadre doit avoir un attribut title unique
gravelink-nameLes liens doivent avoir un texte perceptible
gravenested-interactiveVerifier que les éléments interactifs ne sont pas imbriqués
gravesummary-nameSummary elements must have discernible text
mineuraria-deprecated-roleDeprecated ARIA roles must not be used