Composant d’onglets avec :checked ou JS

Un composant à onglets nécessite : un indicateur visuel de l’onglet actif, un panneau associé affiché ou masqué lors de la sélection, une navigation au clavier entre les onglets et des attributs ARIA accessibles. Ces fonctionnalités peuvent être obtenues avec du CSS pur grâce au stratagème :checked, ou avec JavaScript pour une meilleure accessibilité.

Les champs radio masqués servent d’état : chaque onglet est un <label> associé à un champ radio. Lorsqu’un bouton radio est coché, les combinateurs de frères CSS affichent le panneau correspondant et mettent en forme le libellé de l’onglet actif. Aucun JavaScript n’est nécessaire.

Placez les champs radio, puis tous les libellés (onglets), puis tous les panneaux dans le même conteneur. Utilisez le combinateur de frères généraux (~) pour relier un bouton radio coché au panneau correspondant. Par défaut, les panneaux utilisent display: none ; le panneau correspondant reçoit display: block.

Le stratagème :checked ne peut pas mettre à jour les attributs ARIA (aria-selected, aria-controls), activer la navigation entre les onglets avec les touches fléchées, ni éviter que les contraintes d’ordre du DOM entrent en conflit avec les exigences de la conception visuelle. Ces lacunes limitent l’accessibilité réelle.

Un composant d’onglets en JS écoute les clics sur les boutons d’onglet, définit aria-selected sur l’onglet actif, met à jour aria-hidden sur les panneaux et gère le focus. Cette approche permet une conformité ARIA complète et des interactions au clavier conformes aux pratiques de conception ARIA.

Utilisez role="tablist" sur le conteneur, role="tab" sur chaque bouton d’onglet avec aria-selected et aria-controls, ainsi que role="tabpanel" sur chaque panneau avec aria-labelledby. Les lecteurs d’écran annoncent le nombre d’onglets, la position de l’onglet et son état sélectionné.

Pratiques de conception ARIA pour les onglets : la touche Tab entre dans la liste d’onglets et place le focus sur l’onglet actif. Les flèches gauche et droite permettent de passer d’un onglet à l’autre. Origine et Fin permettent d’aller directement au premier ou au dernier onglet. Chaque déplacement avec une touche fléchée active l’onglet focalisé (modèle d’activation automatique).

Mettez l’onglet actif en forme avec une bordure inférieure ou un changement d’arrière-plan à l’aide du sélecteur [aria-selected="true"] — cela fonctionne avec les approches JS et :checked. Le CSS reste ainsi synchronisé avec l’attribut d’état ARIA, ce qui évite de gérer deux états distincts.

Un indicateur animé d’onglet glisse d’un onglet à l’autre : placez un élément indicateur en position absolue, utilisez JavaScript pour définir sa position à gauche et sa largeur afin qu’elles correspondent aux dimensions de l’onglet actif, puis animez-le avec transition: left 200ms ease, width 200ms ease.

Lorsque les onglets débordent de leur conteneur sur les petits écrans, utilisez le défilement horizontal (overflow-x: auto; scrollbar-width: none) ou regroupez-les dans un menu déroulant sur mobile. L’approche avec une liste de sélection nécessite JS pour synchroniser la liste native avec la visibilité du panneau d’onglet.

Utilisez l’astuce :checked pour une interface utilisateur simple et non critique, lorsque l’accessibilité n’est pas une contrainte prioritaire. Utilisez des onglets JavaScript pour toute interface en production destinée aux utilisateurs du clavier ou d’un lecteur d’écran, ou pour les applications qui doivent respecter ARIA lors d’audits ou pour satisfaire des exigences légales.

Quelle est la principale limitation d’accessibilité de l’astuce CSS :checked pour les onglets ?

L’astuce :checked permet de changer d’onglet uniquement avec CSS grâce aux champs radio et aux combinateurs de frères, mais elle ne fournit ni accessibilité ARIA ni accessibilité au clavier. Les onglets JavaScript dotés des rôles ARIA (tablist, tab, tabpanel), de la gestion de aria-selected et de la gestion des touches fléchées offrent l’expérience complète et accessible requise pour les composants en production.