Accessia

Composant accessible · outil gratuit

Onglets accessibles (role tablist, tab, tabpanel) : code vérifié

Des onglets accessibles suivent le motif ARIA « tabs » : une liste role="tablist" nommée, des onglets role="tab" dont un seul est sélectionné (aria-selected) et dans l'ordre de tabulation, des panneaux role="tabpanel" nommés par leur onglet. Les flèches passent d'un onglet à l'autre, Tab va directement au panneau.

Critères RGAA 4.1.2 : 7.1, 7.3 · WCAG 2.2 : 1.3.1, 2.1.1, 4.1.2 · mis à jour le .

Générer et vérifier le composant

Réglez le composant : le code se met à jour, l'aperçu fonctionne pour de vrai, et chaque version est vérifiée en direct par les contrôles du composant, un test de comportement et axe-core. « Introduire une erreur fréquente » montre ce que chaque contrôle détecte ; « Tester mon code » vérifie le vôtre.

Réglages

Manuelle si l'affichage d'un panneau est lent (chargement).

Pour voir le contrôle qui la détecte (les erreurs de comportement apparaissent avec « Tester le comportement »).

<div class="onglets">
  <div role="tablist" aria-label="Informations produit" class="onglets-liste">
    <button type="button" role="tab" id="onglet-1" aria-selected="true" aria-controls="panneau-1">Description</button>
    <button type="button" role="tab" id="onglet-2" aria-selected="false" aria-controls="panneau-2" tabindex="-1">Caractéristiques</button>
    <button type="button" role="tab" id="onglet-3" aria-selected="false" aria-controls="panneau-3" tabindex="-1">Avis</button>
  </div>
  <div role="tabpanel" id="panneau-1" aria-labelledby="onglet-1" tabindex="0">
    <p>Chaussure de course légère, pour l'entraînement quotidien.</p>
  </div>
  <div role="tabpanel" id="panneau-2" aria-labelledby="onglet-2" tabindex="0" hidden>
    <p>Poids : 240 g. Drop : 8 mm.</p>
  </div>
  <div role="tabpanel" id="panneau-3" aria-labelledby="onglet-3" tabindex="0" hidden>
    <p>4,6 sur 5 d'après 128 avis.</p>
  </div>
</div>

Aperçu réel (utilisable à la souris et au clavier)

Vérification en direct

Qui est gêné quand le composant est mal fait

  • Personnes aveugles : sans rôles, des boutons qui affichent du contenu ailleurs ne disent pas qu'ils sont des onglets ni lequel est actif.
  • Personnes qui naviguent au clavier : si chaque onglet est dans l'ordre de tabulation, il faut traverser tous les onglets pour atteindre le contenu.
  • Personnes ayant des troubles cognitifs : un onglet actif bien visible et annoncé évite de se perdre entre les panneaux.

Le comportement attendu

Au clavier

Touche ou momentCe qui doit se passer
TabEntre dans la liste sur l'onglet sélectionné, puis passe directement au panneau.
Flèches gauche et droitePassent à l'onglet précédent ou suivant (en boucle) ; en activation automatique, son panneau s'affiche.
Début et FinVont au premier ou au dernier onglet.
Entrée ou EspaceAffichent l'onglet atteint (activation manuelle).

Avec un lecteur d'écran

  • La liste est annoncée « Informations produit, liste d'onglets », puis « Description, onglet, sélectionné, 1 sur 3 ».
  • Le panneau est annoncé avec le nom de son onglet.

Les erreurs les plus fréquentes

  • Des onglets sans rôles. Des boutons ordinaires : le lecteur d'écran n'annonce ni « onglet » ni « sélectionné ».
  • Tous les onglets atteints avec Tab. Pas de tabindex="-1" sur les onglets inactifs : Tab traverse toute la liste.
  • Des flèches non gérées. Le rôle tab annonce une navigation aux flèches, qui ne fonctionne pas.
  • Un état seulement visuel. L'onglet actif est souligné, mais aria-selected ne change pas.
  • Des onglets pour la navigation. Des liens vers d'autres pages présentés comme des onglets : ce sont des liens, pas des role="tab".

Tester soi-même

  1. Avec Tab, entrez dans les onglets : un seul arrêt, sur l'onglet sélectionné.
  2. Utilisez les flèches : le focus passe d'onglet en onglet, et le panneau suit (ou s'affiche avec Entrée en activation manuelle).
  3. Appuyez sur Tab : le focus doit aller dans le panneau.
  4. Avec un lecteur d'écran, vérifiez l'annonce « onglet, sélectionné, 1 sur 3 ».

Ce qu'Accessia détecte dans un audit

Dans les rapports, Accessia signale les boutons sans nom (critère 11.9). Le Vérificateur de l'extension Chrome applique axe-core à la page affichée et signale les rôles ARIA mal construits (un tab hors d'un tablist, un panneau introuvable…). La navigation aux flèches se vérifie en utilisant les onglets, comme le fait le test ci-dessus.

Auditer une page gratuitement, ou vérifiez ce composant directement dans votre éditeur de code avec le serveur MCP d'Accessia.

Critères RGAA concernés

Questions fréquentes

Activation automatique ou manuelle ?

Automatique quand le panneau s'affiche instantanément ; manuelle s'il demande un chargement, pour ne pas déclencher un chargement à chaque flèche.

Pourquoi tabindex="0" sur le panneau ?

Pour que Tab mène au panneau même s'il ne contient aucun élément focalisable ; on peut l'omettre si le panneau commence par un lien ou un champ.

Des onglets qui changent de page sont-ils des onglets ?

Non : ce sont des liens de navigation, à baliser comme tels (avec aria-current="page" sur la page courante).

Ce code rend-il mon site conforme ?

Il rend ces onglets conformes aux contrôles affichés. Les intitulés et contenus restent à juger.

Autres composants accessibles