Ce que dit la norme
Pour tout composant d'interface utilisateur (incluant, mais sans s'y limiter, les éléments de formulaire, les liens et les composants générés par des scripts), le nom et le rôle peuvent être déterminés par un programme informatique ; les états, les propriétés et les valeurs qui peuvent être paramétrés par l'utilisateur peuvent l'être également par un programme informatique ; et la notification des changements de ces éléments est disponible pour les agents utilisateurs, incluant les technologies d'assistance.
Pourquoi c'est important
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é.
À quoi ressemble un échec
- é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 A11ySignal le vérifie
29 vérifications automatiques s'exécutent sur ce critère à chaque analyse.
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-titleChaque cadre doit avoir un attribut title
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