Un accordéon permet d'afficher ou de masquer du contenu grâce à un sytème de « plier/déplier ».
L'accordéon est une façon simple de réduire la longueur d'une page en intégrant du contenu dans des panneaux fermés. Le titre de l'accordéon donne une brève description de son contenu.
| Table of Contents | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
Les listes d'accordéons sont communément utilisées dans les foires aux questions (FAQ), la documentation plus complexe, les menus de navigation à plusieurs niveaux et les formulaires en plusieurs étapes.
Contrairement aux onglets, un accordéon peut avoir un titre long et plusieurs accordéons peuvent être ouverts en même temps.
Contrairement à l'infobulle ou au menu déroulant, l'accordéon est à même la structure du contenu. Donc, lorsqu'il est ouvert, le reste du contenu de la page est poussé vers le bas.
Avantages et inconvénients
...
Avantages
...
Inconvénients
...
Donne une vue d'ensemble rapide sur les différents contenus disponibles
Permets le dévoilement progressif du contenu à la demande de l'utilisateur
Mets en avant l'architecture d'information et éduque le modèle mental de l'utilisateur
Évite le chargement d'une nouvelle page à la différence d'un lien
Réduis la hauteur de la page
...
Requiers une action de l'utilisateur sur chaque accordéon qui l'intéresse
Cacher du contenu insinue que le contenu est secondaire (pensez à des titres évocateurs et attirants)
Attention à la façon dont le contenu sera intégré dans la page. Si c'est un contenu qui doit être référencé par les moteurs de recherche (SEO), il devra être chargé dès l'ouverture de la page et masqué avec CSS.
Précisions sur la composante
...
Élément
...
Description et interactions
...
Entête de l'accordéon (Navigation)
...
L'entête de l'accordéon est un bouton avec les différents états (focus, survol, pressé, désactivé, plié, déplié) qui permet d'afficher ou masquer son contenu.
L'entête prend la pleine largeur de son conteneur parent.
L'icône pliée/dépliée est obligatoire et le chevron est l'icône préconisée; expand-more pour déplié et expand-less pour plié. (NNG)
Si la longueur du contenu de l'accordéon dépasse de beaucoup la hauteur d'un écran, il est suggéré que l'entête de l'accordéon déplié reste visible au défilement (sticky) afin de permettre à l'utilisateur de le replier. (NNG)
...
Titre de l'accordéon
...
Le titre est obligatoire et doit être explicite quant au contenu à déplier.
Il est possible d'afficher une icône avant un titre à des fins esthétiques.
...
Contenu de l'accordéon
...
Le contenu de l'accordéon est libre, mais devrait être secondaire au contenu principal de la page.
Comportements attendus
Navigation générale
L'utilisateur peut actionner l'en-tête de l'accordéon en entier.
L'icône de chevron passe d'un état à l'autre.
Le changement d'état (plié/déplié) est annoncé au lecteur d'écran.
L'utilisateur doit pouvoir ouvrir plusieurs accordéons sans qu'ils se referment, sauf si les contenus des différents accordéons entrent en conflit, s'adressent à des situations contradictoires. (Canada.ca)
Lorsque le contenu est masqué et qu'on actionne l'en-tête de l'accordéon, le contenu de celui-ci s'affiche.
Lorsque le contenu est affiché et qu'on actionne l'en-tête de l'accordéon, le contenu de celui-ci est marqué.
Après action de l'utilisateur, le focus reste sur l'en-tête de l'accordéon.
Navigation à l’aide du clavier
...
Touches
...
Actions
...
Entrée et
Espace
...
Lorsque le focus clavier est positionné sur un en-tête d'accordéon, déplie/replie alternativement le panneau dépliant associé.
Si la composante ne permet pas d'afficher plus d'un panneau déplié à la fois et qu'un panneau est déjà déplié, replier ce panneau.
...
Tab
...
Déplace le focus sur le prochain élément focussable. Soit sur un élément se trouvant dans le contenu de l'accordéon ouvert, soit sur le prochain en-tête d'accordéon. (Les éléments focussable dans les accordéons fermés ne doivent pas être accessibles à la tabulation.)
...
Shift + Tab
...
Déplace le focus sur l'élément focussable précédent. Soit sur un élément se trouvant dans le contenu de l'accordéon ouvert, soit sur l'en-tête de l'accordéon précédent. (Les éléments focussable dans les accordéons fermés ne doivent pas être accessible à la tabulation.)
...
Flèche bas (facultatif)
...
Si le focus est sur un en-tête d'accordéon, déplace le focus sur le prochain en-tête d'accordéon actif. Si le focus est sur le dernier en-tête d'accordéon, soit ne rien faire soit déplacer le focus sur le premier en-tête d'accordéon.
...
Flèche haut (facultatif)
...
Si le focus est sur un en-tête d'accordéon, déplace le focus sur l'en-tête d'accordéon actif précédent. Si le focus est sur le premier en-tête d'accordéon, soit ne rien faire soit déplacer le focus sur le dernier en-tête d'accordéon.
...
Home (facultatif)
...
Si le focus est sur un en-tête d'accordéon, déplacer le focus sur le premier en-tête d'accordéon.
...
End (facultatif)
...
| Panel | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
Pour accéder à la dernière version de cette article, voir sur le portail de l'accessibilité : Meilleures pratiques en matière d'accessibilité pour les accordéons |
Références
Lists (v. Expand and collapse dans la section Types), Material Design 2 (2018)
Accordéon | Système de design gouvernemental, http://Québec.ca (2022)
Afficher/masquer - Configuration de conception, Canada.ca (2019)
https://www.hassellinclusion.com/blog/accessible-accordion-pattern/
https://www.w3.org/WAI/ARIA/apg/example-index/accordion/accordion
https://examples.hassellinclusion.com/accordion/accessible-accordion-example.html
Annexe
...