Accordéons

Les accordéons permettent d’afficher ou de masquer des sections de contenus (« panneaux ») en activant un bouton situé dans leur en-tête. Cette approche contribue à restreindre l’espace occupé par les contenus et à limiter le besoin de défilement vertical.

L’exemple présenté plus haut reprend un usage très commun des accordéons : la foire aux questions. Chaque question, logée dans un bouton d’en-tête, sert à étendre ou à réduire la réponse correspondante.

Voici les principaux comportements attendus avec les outils d’adaptation (lecteurs d’écran, commandes vocales, etc.) ainsi que la navigation au clavier :

• L’accordéon s’ouvre ou se ferme à l’aide d’un bouton et non d’un lien.
• Le bouton est focusable au clavier et s’active avec la touche Entrée ou la barre d’espacement.
• L’état étendu ou réduit est communiqué aux lecteurs d’écran lorsque le focus atteint le bouton.
• Tout changement d’état résultant de l’activation du bouton est immédiatement annoncé par les lecteurs d’écran.
• Lorsqu’un accordéon est ouvert, le focus demeure sur le bouton d’ouverture, car l’annonce du changement d’état suffit à confirmer le résultat de l’action.
• Lorsque le panneau de l’accordéon est fermé, il n’est pas exposé aux outils d’adaptation et ses contenus ne font pas partie du parcours de navigation au clavier.

Autres points à surveiller

• Le bouton de l’accordéon doit être reconnu et activable par les outils de commandes vocales, lorsqu’on dicte les mots du libellé visible.
• Pour des accordéons présentant des sections de contenus, il est d’usage de loger le bouton dans une balise d’en-tête de niveau approprié pour l’architecture de la page.
• Certains modèles d’accordéons autorisent un seul panneau ouvert à la fois, en plus de maintenir l’un des panneaux ouvert en tout temps. Dans ce cas de figure :
  • le panneau étendu ne peut pas être replié par activation du bouton d’en-tête associé;
  • l’ouverture d’un panneau provoque la fermeture du panneau auparavant étendu.

Rôles, états et propriétés ARIA

• Le libellé du titre de chaque en-tête d’accordéon est contenu dans la balise <button> (ou encore, dans une balise à laquelle on assigne  role="button").
• Chaque bouton d’en-tête est lui-même enchâssé dans une balise d’en-tête de niveau approprié pour la structure de la page.
• Si le panneau d’accordéon associé à un en-tête d’accordéon est visible, le bouton a l’attribut aria-expanded défini sur true. Si le panneau n’est pas visible, aria-expanded est défini sur false.
• (Optionnel) Chaque bouton d’en-tête de l’accordéon est associé à son panneau depuis l’attribut aria-controls. La valeur de cet attribut correspond à l’identifiant unique (ID) donné au panneau associé.
  • Remarque : L’emploi de aria-controls n’offre pas de réelle valeur ajoutée dans une structure d’accordéons où le panneau de contenus suit immédiatement le bouton qui contrôle son affichage. Cela peut même constituer un irritant pour certains utilisateurs. En effet, à l’exception du lecteur d’écran JAWS, l’attribut n’est pas supporté par les outils d’adaptation actuels. Qui plus est, JAWS se montre très verbeux chaque fois qu’il rencontre l’attribut : « Appuyez sur JAWS + Contrôle + M pour activer l’élément contrôlé ». Enfin, JAWS n’offre aucune option de navigation comparable pour faire le chemin inverse.

Autres considérations techniques

• Les principaux aspects gérés par JavaScript sont :
  • L’ouverture et la fermeture des panneaux de contenus, déclenchés par l’activation du bouton.
  • Le changement dynamique de la valeur de l’attribut aria-expanded, pour déclarer l’état étendu (true) ou réduit (false).
• Lorsque l’accordéon utilise un bouton natif (<button>), les touches Entrée et Barre d’espacement sont d’emblée reconnues pour l’activation du bouton. Cependant, si le bouton est un autre élément HTML auquel on a assigné role="button", tous les comportements du bouton, incluant le fonctionnement attendu au clavier, doivent être recréés avec JavaScript.
• Les icônes qui indiquent l’état étendu ou réduit de l’accordéon reçoivent un traitement décoratif (ex. : alt="" ou aria-hidden="true").
• La mise en forme CSS display:none est appliquée au panneau fermé d’un accordéon. Cela permet de masquer ses contenus aux outils d’adaptation et évite qu’ils ne soient inclus dans le parcours de tabulation.

Bon à savoir : Même si on parle souvent de panneau pour désigner la partie étendue ou réduite d’un accordéon, il n’existe pas de rôle panel dans la spécification ARIA. Par ailleurs, le rôle tabpanel est réservé aux panneaux d’onglets et ne doit pas être employé pour des accordéons.

Cet exemple s’appuie sur le composant Accordéon de Bootstrap 5.3.3. dont la base technique et fonctionnelle est déjà solide pour l’accessibilité.

Les ajustements effectués visent à améliorer l’utilisabilité du composant et à automatiser certains aspects de son intégration.

• Attribut aria-controls : Cet attribut est proposé dans la fondation HTML d’origine composant Bootstrap, mais nous l’avons retiré pour les raisons évoquées dans la section Explications techniques.
• Présentation visuelle : Dans les boutons, ajout d’une icône communiquant l’état étendu ou réduit.
• Gestion des identifiants : Ajout d’un script qui génère automatiquement l’identifiant unique (ID) du bouton et celui du panneau de l’accordéon, lorsque ces identifiants n’ont pas déjà été intégrés au code HTML du composant.