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.

É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.

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)

Si le focus est sur un en-tête d'accordéon, déplacer le focus sur le dernier en-tête d'accordéon.