Le modèle des onglets : tablist, tab, tabpanel
Mettez en place les trois rôles nécessaires à un ensemble d'onglets.
Le modèle des onglets : tablist, tab, tabpanel est une leçon Web Accessibility Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Web Accessibility Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Web Accessibility Academy comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
What a Tab Set Really Is
A tab set shows one panel at a time and lets users switch between them. To assistive tech it must look like one widget, not loose links.
Three Roles Work Together
The pattern relies on three ARIA roles: a tablist that holds the tabs, each tab, and the panel each tab reveals. Get all three right.
The Container Is a tablist
Wrap your row of tabs in an element with role="tablist". This tells screen readers the children inside are a related set of tabs.
<div role="tablist">...</div>Each Tab Is a Button
Build each tab from a real button with role="tab". A button is focusable and clickable for free, so you avoid extra wiring.
<button role="tab">Profile</button>The Panel Is a tabpanel
The content each tab shows gets role="tabpanel". This marks it as the region controlled by the currently selected tab.
<div role="tabpanel">Profile details</div>Mark the Selected Tab
Set aria-selected="true" on the active tab and false on the rest. Screen readers announce which tab is currently chosen.
<button role="tab" aria-selected="true">Profile</button>Link Tab to Its Panel
Point each tab at its panel with aria-controls, set to the panel id. Users learn which region the tab opens.
<button role="tab" aria-controls="p1">Profile</button>Name the Panel From Its Tab
Give the panel an aria-labelledby that points back to its tab. Now the panel borrows the tab text as its accessible name.
<div role="tabpanel" aria-labelledby="tab1">...</div>Hide the Inactive Panels
Only one panel should show at a time. Add the hidden attribute to the panels whose tab is not selected so they leave the page.
<div role="tabpanel" hidden>...</div>Give the Tablist a Label
A tablist deserves an aria-label describing its purpose, like Account settings. Users hear what the whole set of tabs is for.
<div role="tablist" aria-label="Account settings">...</div>How It All Sounds
Put together, a screen reader announces something like Profile, tab, selected, 1 of 3. That orientation is exactly what makes tabs usable.
Quick Check
You are wiring up the container that holds your row of tabs. Which role belongs on it?
Recap: The Tabs Pattern
You learned the tablist, tab, tabpanel trio. Mark the selected tab, link each tab to its panel, and hide the inactive ones.
Questions Fréquemment Posées
La leçon « Le modèle des onglets : tablist, tab, tabpanel » est-elle gratuite ?
Oui — le texte complet de « Le modèle des onglets : tablist, tab, tabpanel » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Web Accessibility Academy, passe à CoddyKit PRO. Le cours Web Accessibility Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Le modèle des onglets : tablist, tab, tabpanel » ?
Mettez en place les trois rôles nécessaires à un ensemble d'onglets. Tu pratiques Web Accessibility Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Web Accessibility Academy ?
Aucune expérience préalable n'est requise. Web Accessibility Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Le modèle des onglets : tablist, tab, tabpanel » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Web Accessibility Academy ?
Oui. Chaque leçon Web Accessibility Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Le modèle des onglets : tablist, tab, tabpanel
- Navigation entre les onglets avec les touches fléchées
- Accordéons avec Button et aria-expanded
- Zone dépliable ou onglets : choisir le bon modèle