Test d’un composant accordéon

Description

Voir Accordion (widget)

Implémentation d’ARIA

Rôle et propriétés du composant :

role="tablist"
aria-multiselectable="true"

Rôle et propriétés du titre :

role="tab"
aria-selected="true" (panneau affiché)
aria-selected="false" (panneau masqué)

Rôle et propriétés du panneau :

role="tabpanel"
aria-labelledby="[id-du-titre]"
aria-expanded="true" et aria-hidden="false" (panneau affiché)
aria-expanded="false" et aria-hidden="true" (panneau masqué)

Interactions au clavier

Touche Tabulation :

De l’extérieur du composant, lorsque aucun panneau n’est actif, le focus est donné sur le titre du premier panneau.
De l’extérieur du composant, lorsqu’un panneau est actif, le focus est donné sur le titre du premier panneau actif.
Tab permet d’atteindre l’élément suivant et Maj+Tab l’élément précédent du panneau actif.
Lorsque le dernier élément focusable du composant est atteint, le focus est donné sur l’élément focusable suivant à l’extérieur du composant.
Lorsque le premier élément focusable du composant est atteint, le focus est donné sur l’élément focusable précédent à l’extérieur du composant.

Flèches de direction :

À partir du titre d’un accordéon les flèches Haut et Gauche permettent d’atteindre le titre précédent.
À partir du titre d’un accordéon les touches Bas et Droite permettent d’atteindre le titre suivant.

Touches Entrée et Espace :

Lorsque le focus est sur le titre d’un panneau fermé, les touches Entrée et Espace permettent d’ouvrir le panneau.
Lorsque le focus est sur le titre d’un panneau ouvert, les touches Entrée et Espace permettent de fermer le panneau.

Restitution par les technologies d’assistance

Compatibilité avec l’une de ces combinaisons au moins :

NVDA + Firefox, JAWS + Firefox ou IE9+, Voice Over + Safari
JAWS + Firefox, NVDA + Firefox ou IE9+, Voice Over + Safari
JAWS + Firefox, Window Eyes + Firefox ou IE9+, Voice Over + Safari
Window Eyes + Firefox, JAWS + Firefox ou IE9+, Voice Over + Safari