Accordéon

L’accordéon est un élément d’interaction avec l’interface permettant à l’usager d'afficher ou de masquer une section de contenu présentée dans une page.

Le composant Accordéon est conçu pour être accessible et respecter les critères du RGAA. Voici les points clés à prendre en compte pour en garantir l’accessibilité.

Interactions clavier

Lorsque le focus est sur le bouton d’ouverture de l’accordéon :

• Entrée : ouvre ou ferme la zone de contenu associée.
• Espace : ouvre ou ferme la zone de contenu associée.

Navigation entre les accordéons :

• Tab : déplace le focus sur le bouton suivant.
• Maj + Tab : déplace le focus sur le bouton précédent.

Si une zone de contenu de l’accordéon est ouverte, tous les éléments interactifs à l’intérieur sont inclus dans le parcours de navigation au clavier.

Règles d’accessibilité

Le composant Accordéon s’appuie sur le motif de conception ARIA Accordion de l’Authoring Practices Guide (APG).

Titre de l’accordéon

• Le titre de l’accordéon doit être explicite et permettre de comprendre le contenu proposé.
• Le niveau titre de l’accordéon doit être cohérent avec le reste de la page.

Bouton de l’accordéon

• Il est placé à l’intérieur de la balise hx, autour du texte.
• Il possède deux attributs ARIA :
  • aria-expanded défini à :
    • true lorsque la zone de contenu contrôlée est affichée,
    • false lorsque la zone de contenu contrôlée est masquée.
  • aria-controls qui relie le bouton à la zone contrôlée et dont la valeur doit correspondre à l’attribut id de la zone de contenu.

Groupe d’accordéons

Le comportement par défaut du « Groupe d’accordéons » (ouverture d’un accordéon à la fois seulement) peut poser des problèmes d’utilisabilité pour certaines personnes handicapées.

L’option « Groupe d’accordéons dissociés » est à privilégier par défaut.

Contrastes de couleurs

Le composant Accordéon est suffisamment contrasté en thème clair.

Au survol du bouton en thème sombre, le ratio de contraste entre le texte et le fond du bouton est insuffisant.

Le chevron est insuffisamment contrasté au survol uniquement lorsque l’accordéon est ouvert.

Restitution par les lecteurs d’écran

L’attribut aria-expanded est restitué différemment selon les lecteurs d’écran.

• Lorsque l’accordéon est fermé (aria-expanded="false") : « réduit » ou « condensé » (VoiceOver macOS)
• Lorsque l’accordéon est ouvert : « développé » (NVDA, Narrateur, VoiceOver iOS) ou « étendu » (JAWS, VoiceOver macOS, Talkback).

---

Critères RGAA applicables

• Couleurs : 3.2, 3.3
• Scripts : 7.1, 7.3
• Structuration : 9.1
• Présentation de l’information : 10.1, 10.2, 10.3, 10.4, 10.5, 10.7, 10.8, 10.11, 10.12
• Navigation : 12.8, 12.9, 12.11
• Consultation : 13.9, 13.11

---

Références

• Référentiel général d’amélioration de l’accessibilité (RGAA 4.1.2)
• Attribut aria-expanded — spécification ARIA
• Attribut aria-controls — spécification ARIA
• Motif de conception WAI-ARIA Accordion