Comment implémenter un accordéon accessible ?

Ce que j’ai fait :

• lire le motif de conception Accordion (Sections With Show/Hide Functionality)(lien externe) des WAI-ARIA Authoring Practices 1.1
• étudier le code de l’exemple d’accordéon proposé sur Accordion Example(lien externe) des WAI-ARIA Authoring Practices 1.1

Ce que j’ai appris

Définition

Un accordéon est un composant permettant d’optimiser l’affichage d’un contenu grâce à un système de “plier/déplier”. Des titres interactifs permettent aux internautes de révéler ou de masquer leurs contenus associés.

Un accordéon comprend donc :

• une en-tête : il s’agit d’un titre ou d’un extrait de texte qui sert de contrôle pour afficher ou masquer un panneau.

• un panneau : il s’agit d’une section de contenu associée à une en-tête.

On a souvent recours aux accordéons pour afficher des FAQ (Foire Aux Questions) par exemple.

Comportement attendu et interactions clavier

• les panneaux doivent s’ouvrir et se déplier. En fonction du code, il est possible d’avoir plusieurs panneaux ouverts en même temps, ou bien l’ouverture d’un panneau provoque la fermeture du précédent.

• les touches “Entrée” ou “Espace” permettent d’afficher ou masquer le contenu d’un panneau :
  • lorsque le focus est sur l’en-tête d’un panneau replié, le panneau associé est déplié. Certains accordéons permettent à un seul panneau à la fois d’être affiché, si un autre panneau est déplié, ce dernier est replié.
  • lorsque le focus est sur l’en-tête accordéon d’un panneau déplié, le panneau associé est replié. Certains accordéons requièrent qu’un panneau soit systématiquement déplié, dans ce cas il n’est pas possible de replier le seul panneau développé restant.

• la touche “Tab” permet de déplacer le focus

• la combinaison “Shift + Tab” permet de revenir à l’élément focusable précédent

Option : les flèches haut et bas permettent de déplacer le focus d’une en-tête d’accordéon à une autre, les touches “Home” et “End” permettent d’atteindre respectivement la première et la dernière en-tête de l’accordéon.

Structure (rôles, propriétés, états)

• chaque en-tête de panneau doit être balisée avec un élément <button> (ou un élément ayant pour rôle role="button")

• chaque bouton d’en-tête de panneau doit être contenu dans une balise de titre, <h1> à <h6>, dont le niveau dépend de la hiérarchie de titres présents dans la page. L’élément ayant pour rôle role="button" doit être le seul élément présent dans cette balise de titre.

• chaque bouton d’en-tête comporte un attribut aria-expended dont la valeur varie dynamiquement en fonction de l’état du panneau :
  • aria-expanded="true" lorsque le panneau est déplié.
  • aria-expanded="false" lorsque le panneau est replié.

• chaque bouton d’entête de panneau est rattaché à son panneau via l’attribut aria-controls et un identifiant unique associé

• si le panneau d’accordéon associé à une en-tête est déplié et que l’accordéon ne permet pas de réduire le panneau, l’élément de bouton d’en-tête possède un attribut aria-disabled="true"

Option : l’élément servant de conteneur pour le panneau possède un role="region" ainsi qu’un aria-labelledby dont la valeur fait référence au bouton d’en-tête associé