Accordéon et onglets JavaScript accessibles : code à copier-coller | We.Inc
Un accordéon en JavaScript natif avec hauteur animée et aria-expanded, et des onglets avec navigation aux flèches et roving tabindex. Les deux fonctionnent en direct sur la page, avec une checklist clavier et un tableau ARIA.
Un accordéon accessible utilise un vrai bouton dans chaque titre, avec aria-expanded pour indiquer si son panneau est ouvert et aria-controls pour nommer le panneau. Des onglets accessibles utilisent role=tablist, tab et tabpanel, avec aria-selected, et passent d'un onglet à l'autre avec les flèches du clavier, en ne gardant que l'onglet sélectionné dans l'ordre de tabulation. Les deux démos ci-dessous fonctionnent en direct.
Lequel utiliser
Composant
Quand
Accordéon
Longues pages de questions, où l'on peut lire plusieurs réponses
Onglets
Quelques vues d'un même sujet, lues une à la fois
details et summary
Afficher et masquer simplement, sans aucun JavaScript
Chaque démo est un bloc autonome de HTML, CSS et JavaScript. Modifiez-le et le résultat se relance. Ensuite, laissez la souris de côté et testez-le au clavier à l'aide de la checklist plus bas.
Copiez dans votre page le bloc du composant dont vous avez besoin.
Modifiez le texte, en gardant chaque id unique dans la page.
Testez au clavier : Tab, Entrée, Espace, les flèches, Home et End.
Testez avec un lecteur d'écran : il doit annoncer développé ou réduit, ou onglet 2 sur 3.
Vérifiez la page avec la réduction des animations activée ; les panneaux doivent s'ouvrir sans animation.
Placez le bouton dans le titre plutôt que de rendre le titre cliquable ; les titres ne peuvent pas recevoir le focus et n'annoncent pas d'état.
Utilisez l'attribut hidden sur les panneaux fermés pour qu'on ne puisse pas atteindre leurs liens avec Tab.
Ne mettez pas d'onglets dans des onglets ni d'accordéons dans des onglets ; les gens perdent le fil de l'endroit où ils se trouvent.
Si les réponses comptent pour le référencement, laissez-les dans le HTML (masquées, pas chargées plus tard) pour que les robots et les visiteurs voient le même texte.
Questions fréquentes
Les onglets doivent-ils changer avec les flèches ou avec Entrée ?
Le guide ARIA autorise les deux. Changer d'onglet au déplacement de la flèche (activation automatique) paraît le plus rapide quand les panneaux sont déjà chargés. Si l'affichage d'un panneau est lent, déplacez le focus avec les flèches et changez plutôt d'onglet avec Entrée ou Espace.
Comment animer la hauteur d'un accordéon sans mesure en JavaScript ?
Faites du panneau une grille et animez grid-template-rows de 0fr à 1fr, avec un élément intérieur en overflow hidden. Le navigateur calcule la hauteur pour vous.
Un élément details est-il accessible ?
Oui. Les navigateurs exposent summary comme un bouton avec un état développé, et il fonctionne au clavier sans rien ajouter. Styliser le marqueur et l'animer est plus difficile, c'est pourquoi beaucoup de sites construisent encore le leur.
Les réponses masquées d'un accordéon comptent-elles pour le SEO ?
Le contenu présent dans le HTML mais replié est tout de même exploré. Gardez-le dans le code source de la page plutôt que de le charger au clic, et assurez-vous que la réponse visible correspond à ce qui figure dans le HTML.
Pour aller plus loin
Si vous travaillez en React, notre galerie de composants propose un ensemble d'onglets avec soulignement glissant et un accordéon FAQ, tous deux avec du JSX à copier. Pour une section FAQ, ajoutez des données structurées FAQPage correspondantes uniquement si les questions et réponses sont visibles sur la page.
Erreurs courantes
Utiliser des éléments div avec des gestionnaires de clic comme en-têtes d'accordéon. On ne peut pas les atteindre avec Tab et les lecteurs d'écran ne savent pas qu'ils font quelque chose.
Mettre tous les onglets dans l'ordre de tabulation, ce qui oblige les utilisateurs du clavier à tous les parcourir pour atteindre le contenu.
Oublier de mettre à jour aria-expanded ou aria-selected quand l'état change, si bien que le lecteur d'écran annonce une information erronée.
Accordéon
Accordéon accessible avec hauteur animée
Chaque titre contient un vrai bouton avec aria-expanded et aria-controls. La hauteur s'anime grâce à une transition sur les rangées de grille, donc aucune mesure de scrollHeight. Essayez-le avec Tab, Entrée et Espace.
Un seul panneau ouvert à la fois
Quand un panneau s'ouvre, fermez tout autre panneau ouvert. Gardez cela facultatif : les gens qui comparent deux réponses veulent souvent les deux ouvertes.
Solution de repli sans JavaScript : details et summary
Les éléments details natifs s'ouvrent et se ferment sans script. Leur donner le même attribut name les rend exclusifs dans les navigateurs actuels ; les plus anciens permettent simplement d'en ouvrir plusieurs.
Onglets
Onglets avec roving tabindex et flèches du clavier
Seul l'onglet sélectionné a tabindex 0, donc Tab entre une seule fois dans la liste d'onglets puis passe au panneau. Les flèches gauche et droite passent d'un onglet à l'autre, Home et End sautent aux extrémités.
Checklist clavier et ARIA
Test au clavier : essayez chacun dans les démos
Touche
Accordéon
Onglets
Tab
Passe au bouton d'en-tête suivant
Entre dans la liste d'onglets sur l'onglet sélectionné, puis passe au panneau
Shift + Tab
Revient au bouton d'en-tête précédent
Ressort de la liste d'onglets
Entrée ou Espace
Ouvre ou ferme le panneau ayant le focus
Sélectionne l'onglet ayant le focus (nécessaire uniquement avec l'activation manuelle)
Flèche droite / gauche
Non requis
Onglet suivant / précédent, en boucle
Home / End
Facultatif : premier / dernier en-tête
Premier / dernier onglet
Référence ARIA
Attributs nécessaires pour chaque partie
Élément
Accordéon
Onglets
Déclencheur
button dans un titre, aria-expanded, aria-controls
role=tab, aria-selected, aria-controls, tabindex 0 ou -1
Conteneur
Rien de requis
role=tablist avec aria-label
Panneau
id ; role=region avec aria-labelledby est facultatif
role=tabpanel, aria-labelledby, tabindex 0 s'il ne contient aucun élément focalisable