Les accordéons, c'étaient autrefois trois cents lignes de JavaScript pour le travail de deux balises. Donnez un même attribut name à un groupe de <details> et le navigateur en ouvre un et ferme les autres pour vous.
<details name="faq" open>
<summary>What makes this an accordion?</summary>
<p>The name attribute groups the panels; opening one closes the rest.</p>
</details>
<details name="faq">
<summary>Works without JavaScript?</summary>
<p>It never needed any.</p>
</details>Ce que le navigateur fait pour vous
- Clavier : l'onglet atteint chaque résumé, bascule Entrée ou Espace, aucun code de piège de focus n'existe pour se tromper.
- Les lecteurs sans JavaScript bénéficient d'une expérience complète, car il n'y a rien à casser pour un script désactivé.
- Les moteurs de recherche lisent le contenu dans les deux sens : les panneaux sont de véritables DOM, pas un div caché en attente d'hydratation.
Améliorer un vieil accordéon
- Remplacez le script par un <details> par panneau, tous partageant une même valeur de name.
- Déplacez le texte de l'ancien bouton dans le <summary> ; l'icône chevron reste en CSS.
- Supprimez le handler de clic et les attributs d'état ARIA ; <summary> est déjà le toggle.
- Test clavier uniquement : tous les résumés accessibles, un seul panneau ouvert par groupe.
Besoin d'animations ? Décorez les transitions détails[ouvertes] en CSS et laissez le navigateur conserver l'état. Le résultat très intéressant : moins de code et un accès plus large au lieu de moins d'accès.