Créer un menu à onglet accessible en HTML, CSS et JavaScript (ARIA, RGAA)

La plupart des systèmes d'onglets que l'on trouve en ligne fonctionnent parfaitement... à la souris. Branchez un clavier ou un lecteur d'écran, et tout s'effondre : impossible de naviguer entre les onglets, focus perdu, contenu invisible pour les technologies d'assistance. Dans ce tuto pratique, vous allez coder un composant « Tabs » de niveau professionnel, à la fois moderne visuellement et parfaitement conforme aux normes RGAA et WAI-ARIA. Le tout en JavaScript vanilla, sans aucune dépendance.
Ce cours est le 6e volet de la série Frontend moderne de Carl Brison, dans laquelle vous construisez, un par un, les composants interactifs incontournables du web accessible. Ici, place aux onglets : un motif d'interface omniprésent pour organiser beaucoup de contenu dans un espace réduit, et l'un des plus délicats à rendre réellement accessible.

Pourquoi tant de menus à onglets sont inaccessibles

Un onglet, ce n'est pas un simple bloc que l'on affiche ou que l'on masque au clic. Pour une personne qui navigue au clavier, l'enjeu est double : ne pas la forcer à tabuler à travers chaque onglet, et lui permettre de circuler avec les flèches directionnelles, exactement comme le prévoit le motif « tabs » du WAI-ARIA. C'est cette logique, souvent oubliée par les scripts tout faits, que vous allez implémenter proprement, avec la gestion du focus et du tabindex qui va avec.

Ce que vous allez coder, étape par étape

Vous partez d'une structure claire avec la balise section et un titre relié via aria-labelledby, puis vous attribuez les bons rôles à chaque élément : tablist pour la barre, tab pour les boutons, tabpanel pour les contenus. Vous créez ensuite les liaisons invisibles mais essentielles entre onglets et panneaux grâce à aria-controls et aria-labelledby, et vous gérez les états avec aria-selected et l'attribut hidden.

Côté style, vous utilisez Flexbox et la fameuse propriété flex: 1 pour une barre d'onglets parfaitement équilibrée et responsive. Le point clé : votre CSS réagit directement au code d'accessibilité, avec une stylisation basée sur [aria-selected="true"]. Vous ajoutez aussi une animation d'entrée douce sur les panneaux et un état de focus visible aux petits oignons pour la navigation clavier.

Vient enfin le cœur du tuto, en JavaScript vanilla. Vous bouclez sur les onglets pour identifier le panneau cible, vous mettez à jour dynamiquement tous les états ARIA, puis vous implémentez le « focus rover » : un seul onglet reste focusable à la fois via le tabindex, et les flèches gauche et droite déplacent le focus d'onglet en onglet, avec retour au début ou à la fin en boucle. Chaque ligne est décomposée et expliquée, y compris la logique mathématique de la navigation.

À qui s'adresse ce tuto ?

Ce cours est fait pour les développeurs front-end qui veulent monter en gamme sur l'accessibilité, les intégrateurs qui souhaitent créer des composants interactifs robustes, et plus largement toute personne qui veut comprendre comment un site web se pilote entièrement au clavier. Une connaissance de base du HTML, du CSS et du JavaScript est recommandée pour suivre confortablement. Vous repartez avec un modèle de code propre, commenté et réutilisable dans vos futurs projets clients.

Votre formateur

Ce tuto est animé par Carl Brison, technicien supérieur en multimédia depuis le début des années 2000, créateur de nombreux sites professionnels et auteur d'ouvrages informatiques publiés aux Éditions Ellipses. Formateur front-end de référence sur Tuto.com, il est aussi le mentor de la formation Développeur Web Front-End éligible au CPF. Son approche : décortiquer chaque notion pour que vous compreniez le « pourquoi » derrière le code, pas seulement le « comment ».

Poursuivez votre montée en compétences

Ce composant fait partie d'une série cohérente d'exercices accessibles. Retrouvez les épisodes complémentaires signés Carl Brison : créer un menu burger accessible, un menu accordéon FAQ accessible et une fenêtre modale accessible. Pour consolider les bases théoriques, appuyez-vous sur les tutos Maîtriser les attributs ARIA. Envie d'aller au bout de la démarche accessibilité ? Explorez le Bundle RGAA formation complète, ou l'ensemble du channel tutos HTML.