aria-checked-state-mismatch
L’aria-checked d’une case à cocher ou d’un bouton radio natif devrait correspondre à son état réel
Signale, pour revue manuelle, un <input type="checkbox">/<input type="radio"> natif dont la valeur aria-checked explicite ne correspond pas à son état coché/indéterminé réel.
Applicabilité. Éléments natifs <input type="checkbox"> / <input type="radio"> qui portent un attribut aria-checked explicite.
Attendu. aria-checked est redondant sur une case à cocher ou un bouton radio natif (l’état coché du rôle est déjà exposé nativement), mais lorsqu’un auteur le définit explicitement, il devrait correspondre à l’état réel de l’élément ; sinon, les technologies d’assistance reçoivent une information différente de ce que perçoit un utilisateur voyant.
Ce que rapporte un constat.
ariaChecked: l’état qu’annoncearia-checked:true,falseoumixed(case à cocher uniquement). Une valeur qui n’est pas l’une de celles-ci compte commefalse.actualState: l’état réel du contrôle :true,false, oumixedpour une case à cocher indéterminée.type:checkboxouradio.
Ces champs de data.details aident à lire et à reproduire un constat. À part reasonCode et les quelques champs que la page Schéma de sortie donne comme stables, ils ne constituent pas un contrat stable : un champ peut être renommé ou supprimé dans une version mineure, ne vous appuyez donc pas dessus.
Exemples
<input type="checkbox" checked aria-checked="true">
aria-checked correspond à l’état coché réel du contrôle.
<input type="checkbox" checked aria-checked="false">
La case est réellement cochée, mais aria-checked="false" indique le contraire aux technologies d’assistance.
Comment vérifier
Quand cette règle ne peut pas trancher, elle renvoie cantTell et laisse la question à une personne. Chaque question qu’elle peut poser figure ici sous son code de raison, avec les étapes pour y répondre. Un constat porte les mêmes étapes dans howToCheck, dans la langue de l’analyse. Voir Schéma de sortie.
ARIA_CHECKED_STATE_MISMATCH
- Attendez que la page soit entièrement chargée, puis repérez la case à cocher ou le bouton radio indiqué par le rapport et notez s’il semble coché.
- Ouvrez le panneau Accessibilité et lisez son état coché.
- Cliquez dessus, ou appuyez sur Espace, et vérifiez que l’apparence et l’état dans le panneau Accessibilité changent ensemble, ou écoutez avec un lecteur d’écran.
Réussite. L’état signalé par les technologies d’assistance correspond à ce qu’affiche le contrôle, avant et après le changement.
Échec. Les technologies d’assistance signalent un état différent de celui affiché, ce qui ne respecte pas le critère WCAG 4.1.2.