aria-expanded-state-mismatch

aria-expanded devrait correspondre à l’affichage du contenu contrôlé

manualWCAG 4.1.2 (A)confiance : mediumgravité : moderaterobust

Signale, pour une revue manuelle, un élément dont la valeur aria-expanded ne concorde pas avec l’affichage des éléments que nomme son aria-controls.

Applicabilité. Éléments que la page affiche, dotés de aria-expanded="true" ou aria-expanded="false" et d’un aria-controls qui nomme au moins un élément du même arbre. Laissés de côté :

un combobox, dont l’aria-controls nomme sa fenêtre surgissante, souvent conservée dans la page lorsqu’il est replié ;
les éléments contrôlés qui contiennent l’élément lui-même (un élément d’arbre qui nomme le parent de son propre groupe).

Attendu. aria-expanded indique aux technologies d’assistance si le contenu que contrôle l’élément est affiché. Lorsqu’il dit le contraire de ce qu’affiche la page, on annonce à une personne qui utilise un lecteur d’écran qu’un panneau est fermé alors qu’il est ouvert, ou l’inverse.

aria-expanded="false", et chaque élément que nomme aria-controls est affiché : cantTell (EXPANDED_FALSE_CONTROLLED_SHOWN).
aria-expanded="true", et chaque élément que nomme aria-controls est masqué : cantTell (EXPANDED_TRUE_CONTROLLED_HIDDEN).
Sinon : pass.

Un élément compte comme masqué lorsqu’il est hors de l’arbre d’accessibilité : display: none, visibility: hidden, hidden, un <details> fermé, content-visibility: hidden, inert ou aria-hidden="true" sur lui ou sur un ancêtre et, dans un navigateur, une boîte propre réduite à une hauteur ou une largeur nulle avec son débordement découpé (un panneau d’accordéon animé avec height: 0). Un panneau replié d’une autre façon (une transformation, la hauteur d’un ancêtre) compte comme affiché, et le contenu que déploie un contrôle peut rester visible lorsqu’il est replié (un paragraphe coupé à deux lignes par line-clamp) : c’est pourquoi un constat est une question.

Ce que rapporte un constat.

ariaExpanded : true ou false, comme l’indique l’attribut.
controlledCount : le nombre d’éléments nommés par aria-controls qui ont été comparés.

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

pass

<button aria-expanded="false" aria-controls="shipping">Shipping</button>
<div id="shipping" hidden>Orders ship within two working days.</div>

Le panneau est masqué, comme l’indique aria-expanded="false".

can't tell

<button aria-expanded="false" aria-controls="shipping">Shipping</button>
<div id="shipping">Orders ship within two working days.</div>

aria-expanded="false" indique à un lecteur d’écran que le panneau est fermé, mais il est affiché. Une personne vérifie si le panneau est ouvert, ou si le contrôle ne fait que déployer un contenu qui reste visible.

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.

`EXPANDED_FALSE_CONTROLLED_SHOWN`

Repérez le bouton de bascule indiqué par le rapport ; il indique qu’il est réduit.
Regardez le contenu qu’il contrôle et vérifiez s’il est affiché en entier ou seulement en aperçu, par exemple quelques lignes tronquées.
Activez le bouton de bascule avec Entrée ou Espace et vérifiez le panneau Accessibilité : l’état développé doit suivre ce qui est affiché.

Réussite. Le contenu est réduit ou seulement en aperçu tant que le bouton indique « réduit », et l’état change quand le contenu s’ouvre.

Échec. Le contenu est entièrement affiché alors que le bouton de bascule indique aux utilisateurs de lecteur d’écran qu’il est réduit, ce qui ne respecte pas le critère WCAG 4.1.2.

`EXPANDED_TRUE_CONTROLLED_HIDDEN`

Repérez le bouton de bascule indiqué par le rapport ; il indique qu’il est développé.
Cherchez le contenu qu’il contrôle et vérifiez s’il est affiché à l’écran, en attendant la fin de toute animation.
Activez le bouton de bascule avec Entrée ou Espace et vérifiez dans le panneau Accessibilité que l’état développé suit ce qui est affiché.

Réussite. Le contenu est affiché tant que le bouton indique « développé », une fois toute transition terminée.

Échec. Le contenu reste masqué alors que le bouton de bascule indique aux utilisateurs de lecteur d’écran qu’il est développé, ce qui ne respecte pas le critère WCAG 4.1.2.

Voir le code source