Patterns WAI-ARIA : accordéon, modale, onglets, carrousel

Accordéon : titre button, panneau region, état aria-expanded

L'accordéon réduit la charge cognitive en masquant du contenu. Sa structure sémantique doit être robuste. Utilisez des balises button pour les titres (les boutons gèrent nativement les interactions : clavier, activation). Chaque titre doit porter : aria-expanded (état vrai/faux), aria-controls (id du panneau associé), aria-labelledby (lien vers le libellé du titre). Le panneau est idéalement un region. Le focus reste sur le titre après activation.

Fenêtre modale : dialog, aria-modal, focus piégé puis restitué

Une modale efficace est un environnement fermé et sécurisé. Utilisez le rôle dialog ou alertdialog et la propriété aria-modal=true pour signaler au lecteur d'écran que le contenu est isolé. Le focus doit être transféré dans la modale à l'ouverture (critère 4.1.2) et restitué à l'élément déclencheur à la fermeture. Tab et Maj+Tab ne doivent jamais sortir du contexte (critère 2.1.2 No Keyboard Trap). Échap doit fermer la modale.

Onglets (tabs) : tablist, tab, tabpanel, flèches de navigation

Le pattern tabs repose sur les rôles tablist (conteneur), tab (chaque onglet), tabpanel (contenu associé), avec aria-selected pour l'état actif et aria-controls pour lier onglet et panneau. La navigation clavier s'effectue avec les flèches gauche/droite (parfois haut/bas pour les onglets verticaux). Choisissez : activation automatique (le panneau s'affiche au focus sur l'onglet) ou activation manuelle (Entrée ou Espace pour activer).

Carrousel : pas de pattern officiel, vigilance maximale

Le carrousel est le composant le plus problématique pour l'accessibilité : aucun pattern WAI-ARIA officiel ne le couvre. Si vous devez en implémenter un, suivez les recommandations : défilement automatique qui s'arrête au focus clavier ou au survol (critère 2.2.2), commandes Précédent/Suivant en boutons vrais, alternative textuelle ou liste des contenus, et un indicateur de position. Évitez display:none sur les slides non visibles sans gérer leur état ARIA pour les lecteurs d'écran.

Pièges fréquents : tabindex positif, dialog sans aria-modal, role sur div non focalisable

Trois erreurs reviennent dans tous les audits. Première, l'attribut role="button" sur un div sans tabindex=0 ni gestion d'Entrée/Espace : le composant ne reçoit jamais le focus et n'active rien. Deuxième, le tabindex positif (tabindex="1", tabindex="2") : il force un ordre artificiel qui désoriente toute la navigation. Troisième, l'oubli de aria-modal dans les modales : le lecteur d'écran ne sait pas qu'il est en contexte isolé et continue sa lecture à l'extérieur. Ces pièges se cumulent souvent sur des sites avec plusieurs stacks techniques.

Questions fréquentes

Faut-il toujours ARIA pour un onglet ?

Oui, car le HTML natif ne fournit pas la sémantique de tablist ni la navigation clavier attendue. Sans ARIA, l'onglet n'est qu'une suite de boutons et de blocs sans lien logique pour le lecteur d'écran, déclenchant l'échec des critères 1.3.1, 4.1.2 et 2.1.1 cumulés.

Comment gérer le focus dans une modale React ?

Utilisez des bibliothèques reconnues comme react-focus-lock pour garantir le piégeage du focus, et des références (ref) pour déplacer le focus sur le premier élément interactif ou le titre de la modale dès l'ouverture. Pensez également à restaurer le focus sur l'élément déclencheur à la fermeture.

Comment sortir d'un piège au focus non intentionnel ?

Vérifiez votre implémentation clavier. La touche Échap doit fermer toute modale ou popover. Pour les pièges involontaires, examinez l'ordre de tabulation avec Tab pour identifier où le focus reste bloqué, puis corrigez la cause (souvent un tabindex mal géré ou un addEventListener qui appelle preventDefault sur Échap).

Puis-je vraiment mettre un carrousel accessible ?

Oui, mais cela demande un effort de remédiation élevé : arrêt automatique du défilement, libellés explicites sur tous les boutons, état des slides annoncé aux lecteurs d'écran, et navigation clavier intuitive. Envisagez une liste statique dès que la séquence sert une finalité SEO ou que les utilisateurs cherchent à comparer un nombre réduit de contenus.

ARIA first rule : quand ne pas utiliser ARIA ?

À chaque fois qu'un élément HTML natif suffit : details/summary pour un accordéon, button pour une action, nav pour une zone de navigation. La règle est sans ambiguïté : si un élément natif apporte le rôle et le comportement attendus, utilisez-le plutôt qu'un div personnalisé avec ARIA.

L'EAA privé impose-t-elle l'accessibilité des composants riches ?

Depuis le 28 juin 2025, l'EAA impose le niveau WCAG 2.1 AA aux services numériques privés. Les onglets, modales et carrousels sont des composants courants dans les parcours marchands : ils doivent être conformes, sous peine de sanctions DGCCRF (7 500 € à 15 000 €).