Accordéon — Démo interactive

Testez le composant <details> natif. Utilisez Entrée/Espace pour ouvrir/fermer, Tab pour naviguer. Testez aussi avec un lecteur d'écran (NVDA, VoiceOver).

Exemple 1 : Accordéon simple (FAQ)

Un pattern FAQ classique avec 3 questions/réponses.

Qu'est-ce que l'accessibilité web ?

L'accessibilité web consiste à concevoir des sites et des applications web accessibles à tous, y compris les personnes en situation de handicap. Cela inclut des barrières liées à la vision, l'audition, la motricité fine, et les troubles cognitifs.

Comment tester l'accessibilité ?

Il existe plusieurs outils et méthodes :

Clavier : naviguer sans souris (Tab, Shift+Tab, Entrée)
Lecteur d'écran : NVDA (Windows), VoiceOver (Mac), TalkBack (Android)
Zoom : tester à 200% et 400%
Outils : axe DevTools, WAVE, Lighthouse

Quelle est la norme de référence ?

La norme internationale de référence est WCAG 2.1 (Web Content Accessibility Guidelines), publiée par le W3C. En France, c'est le RGAA 4.1 qui s'applique aux services publics. Depuis 2025, l'EAA (European Accessibility Act) s'applique aussi aux entreprises privées.

Voir le code HTML

<details class="accordion-item">
  <summary>Question</summary>
  <p>Réponse...</p>
</details>

<details class="accordion-item">
  <summary>Autre question</summary>
  <p>Autre réponse...</p>
</details>

À tester :

Clavier : Tab pour naviguer, Entrée/Espace sur <summary> pour ouvrir/fermer
Lecteur d'écran : NVDA annonce « Bouton, Question, fermé » puis « ouvert »
Focus : visible sur <summary> avec outline vert
Triangle : marqueur natif, change automatiquement

Exemple 2 : Accordéon imbriqué

Des <details> dans des <details>. La plupart des navigateurs gèrent bien.

Fondamentaux de l'accessibilité

Les 5 piliers de l'accessibilité :

1. Percevoir (Perception)

Les contenus doivent être présentés de manière à ce que tous puissent les percevoir : images avec alt, vidéos sous-titrées, contrastes suffisants, etc.

2. Utiliser (Utilisabilité)

Tous les éléments doivent être utilisables au clavier, avoir un focus visible, une hiérarchie logique (h1→h2→h3), etc.

3. Comprendre (Compréhensibilité)

Le texte doit être lisible et compréhensible : langage simple, pas d'acrostiches, cohérence dans la navigation, messages d'erreur clairs.

Techniques HTML/CSS

Les techniques fondamentales :

HTML sémantique

Utiliser les bons éléments : <header>, <nav>, <main>, <footer>, <article>, <section>, <h1>-<h6>, <button>, <label>.

ARIA si nécessaire

ARIA (Accessible Rich Internet Applications) complète HTML quand natif ne suffit pas. Règle d'or : « No ARIA is better than bad ARIA ».

Voir le code HTML

<details class="accordion-item">
  <summary>Parent</summary>
  <p>Contenu parent...</p>

  <details class="accordion-nested">
    <summary>Enfant 1</summary>
    <p>Contenu enfant 1...</p>
  </details>

  <details class="accordion-nested">
    <summary>Enfant 2</summary>
    <p>Contenu enfant 2...</p>
  </details>
</details>

À tester :

Nesting : ouvrir/fermer les enfants indépendamment du parent
Clavier : Tab traverse tous les niveaux correctement
Lecteur d'écran : NVDA énonce la hiérarchie (parent/enfant)
Indentation CSS : les enfants sont visuellement indentés

Exemple 3 : Accordéon avec contenu long

Test de performance et d'animation avec du contenu long.

Lire un texte long sur l'accessibilité...

L'accessibilité numérique est un droit fondamental. Toute personne, quel que soit son contexte ou ses capacités, devrait pouvoir accéder et utiliser les contenus web sans barrière. Cela inclut les personnes en situation de handicap, mais aussi les personnes âgées, les parents avec poussettes, ou quelqu'un qui regarde sur un petit écran.

En France, le RGAA (Référentiel Général d'Amélioration de l'Accessibilité) est obligatoire pour tous les services publics depuis 2019. Le RGAA est basé sur WCAG 2.1 AA et contient 106 critères testables.

À partir du 28 juin 2025, l'EAA (European Accessibility Act) entre en vigueur en Europe, élargissant les obligations à toutes les entreprises privées, pas seulement le public.

Les quatre piliers WCAG

Perceptible (Perceivable) : rendre l'information perceptible (alt, contrastes, vidéos sous-titrées)
Utilisable (Operable) : rendre tout utilisable (clavier, focus visible, pas de pieges au clavier)
Compréhensible (Understandable) : rendre compréhensible (langage simple, hiérarchie, cohérence)
Robuste (Robust) : compatible avec les aides techniques (HTML valide, ARIA correct)

L'accessibilité n'est pas une fonctionnalité « bonus » — c'est un droit humain et une obligation légale. Commencer dès maintenant à mettre en place des pratiques accessibles : HTML sémantique, clavier complet, lecteur d'écran supporté, contrastes AA, zoom 200% sans débordement.

Voir le code HTML

<details class="accordion-item">
  <summary>Lire un texte long...</summary>
  <div class="long-content">
    <p>Paragraphe 1...</p>
    <p>Paragraphe 2...</p>
    <h3>Sous-titre</h3>
    <ul>
      <li>Point 1</li>
      <li>Point 2</li>
    </ul>
  </div>
</details>

À tester :

Animation : le contenu s'ouvre en 200ms (smooth)
Clavier : Entrée/Espace fonctionne malgré le contenu long
Lecteur d'écran : tout le contenu est annoncé correctement
Zoom : l'accordéon reste utilisable à 200% et 400%

Notes d'accessibilité

Natif HTML5 : zéro JavaScript, gratuit clavier + annonces SR
`
` agit comme un bouton → clavier auto (Entrée/Espace)
`
` = ouvert par défaut (optionnel)
Lecteur d'écran : annonce « Bouton, texte summary, fermé/ouvert »
Marqueur natif : triangle fourni par le navigateur (pas d'image/pseudo-élément complexe)
Animation : respecte `prefers-reduced-motion` (à tester dans DevTools)
Imbrication : supportée par tous les navigateurs modernes

← Lire la documentation complète