`aria-selected` et modèles d’onglets
Implémentez des interfaces à onglets accessibles au clavier.
`aria-selected` et modèles d’onglets est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 2 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 HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.
Vue d’ensemble du modèle d’onglets
Une interface d’onglets comporte trois composants ARIA :
role="tablist"— conteneur de tous les ongletsrole="tab"— bouton d’onglet individuelrole="tabpanel"— panneau de contenu de chaque onglet
Structure ARIA des onglets
Balisage complet d’onglets accessibles :
<div role="tablist" aria-label="Account Settings">
<button role="tab" id="tab-1" aria-selected="true"
aria-controls="panel-1">Profile</button>
<button role="tab" id="tab-2" aria-selected="false"
aria-controls="panel-2" tabindex="-1">Security</button>
<button role="tab" id="tab-3" aria-selected="false"
aria-controls="panel-3" tabindex="-1">Notifications</button>
</div>
<div id="panel-1" role="tabpanel" aria-labelledby="tab-1">
Profile content...
</div>
<div id="panel-2" role="tabpanel" aria-labelledby="tab-2" hidden>
Security content...
</div>aria-selected
aria-selected indique l’élément actuellement actif dans un contexte de sélection :
<!-- In a tablist: -->
<button role="tab" aria-selected="true">Active Tab</button>
<button role="tab" aria-selected="false">Other Tab</button>
<!-- In a listbox: -->
<ul role="listbox">
<li role="option" aria-selected="false">Option 1</li>
<li role="option" aria-selected="true">Option 2</li>
</ul>Modèle de navigation clavier des onglets
Les modèles ARIA définissent un comportement clavier précis pour les onglets :
- Tabulation — déplace le focus dans la liste d’onglets, jusqu’à l’onglet sélectionné
- Touches fléchées — parcourez les onglets
- Tabulation à nouveau — déplace le focus hors de la liste d’onglets, vers le panneau actif
- Début — premier onglet
- Fin — dernier onglet
Implémentation de la navigation clavier des onglets
Navigation clavier des onglets à l’aide des touches fléchées :
const tabs = document.querySelectorAll('[role="tab"]');
tabs.forEach((tab, i) => {
tab.addEventListener('keydown', (e) => {
let target;
if (e.key === 'ArrowRight') target = tabs[(i + 1) % tabs.length];
if (e.key === 'ArrowLeft') target = tabs[(i - 1 + tabs.length) % tabs.length];
if (e.key === 'Home') target = tabs[0];
if (e.key === 'End') target = tabs[tabs.length - 1];
if (target) {
activateTab(target);
target.focus();
}
});
});Fonction activateTab
Fonction permettant de changer d’onglet et de mettre à jour ARIA :
function activateTab(selectedTab) {
// Deactivate all tabs:
document.querySelectorAll('[role="tab"]').forEach(tab => {
tab.setAttribute('aria-selected', 'false');
tab.setAttribute('tabindex', '-1');
document.getElementById(tab.getAttribute('aria-controls')).hidden = true;
});
// Activate selected tab:
selectedTab.setAttribute('aria-selected', 'true');
selectedTab.setAttribute('tabindex', '0');
document.getElementById(selectedTab.getAttribute('aria-controls')).hidden = false;
}Modèle de tabindex itinérant
Les groupes d’onglets utilisent un tabindex itinérant pour conserver un seul onglet dans l’ordre de tabulation :
<!-- Only the selected tab has tabindex=0 -->
<button role="tab" aria-selected="true" tabindex="0">Active</button>
<button role="tab" aria-selected="false" tabindex="-1">Other</button>
<button role="tab" aria-selected="false" tabindex="-1">Another</button>
<!-- When user arrows to a new tab:
1. Set new tab tabindex=0
2. Set old tab tabindex=-1
3. Focus new tab -->aria-selected ou aria-checked
aria-selected et aria-checked — des contextes différents :
aria-selected— utilisé dans les composants de sélection : onglets, options d’une liste de sélection, éléments d’un arbrearia-checked— utilisé pour les éléments cochables : cases à cocher, éléments de menu avec coche
Focus du panneau d’onglet
Lorsqu’un onglet est activé, le panneau devient visible, mais le focus reste sur l’onglet :
// Users can then Tab to move into the panel content
// The panel should not automatically receive focus
// Exception: if the panel is very long, consider moving focus
// to the panel heading for long-form content tabs
// Panel should have tabindex=-1 for programmatic focus:
<div id="panel-1" role="tabpanel" aria-labelledby="tab-1" tabindex="-1">Activation automatique ou manuelle
Deux modèles d’activation des onglets :
- Automatique — les onglets sont activés lorsque l’utilisateur les parcourt avec les touches fléchées (expérience utilisateur plus simple)
- Manuelle — l’utilisateur doit appuyer sur Entrée ou Espace pour activer l’onglet après l’avoir atteint avec les touches fléchées (préférable lorsque le contenu de l’onglet doit être chargé)
Mise en forme accessible des onglets
CSS pour l’état sélectionné accessible d’un onglet :
[role="tab"] {
border-bottom: 3px solid transparent;
padding: 0.75rem 1rem;
cursor: pointer;
}
[role="tab"][aria-selected="true"] {
border-bottom-color: #0070f3;
font-weight: bold;
}
/* :focus-visible for keyboard users: */
[role="tab"]:focus-visible {
outline: 2px solid #0070f3;
outline-offset: -2px;
}Vérification rapide
Comment la navigation clavier doit-elle fonctionner dans une liste d’onglets ?
Récapitulatif : aria-selected et onglets
Éléments essentiels du modèle d’onglets :
- tablist → tab (aria-selected) → tabpanel (aria-labelledby)
- Les touches fléchées permettent de naviguer entre les onglets ; Tabulation permet d’entrer dans le panneau
- Tabindex itinérant : seul l’onglet actif possède tabindex=0
- aria-selected="true" sur l’onglet actif
- Les panneaux inactifs utilisent l’attribut hidden
Questions Fréquemment Posées
La leçon « `aria-selected` et modèles d’onglets » est-elle gratuite ?
Oui — le texte complet de « `aria-selected` et modèles d’onglets » 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 HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « `aria-selected` et modèles d’onglets » ?
Implémentez des interfaces à onglets accessibles au clavier. Tu pratiques HTML 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 HTML Academy ?
Aucune expérience préalable n'est requise. HTML 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 2 sur 4.
Combien de temps prend la leçon « `aria-selected` et modèles d’onglets » ?
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 HTML Academy ?
Oui. Chaque leçon HTML 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
- `aria-expanded` et `aria-controls` pour les bascules
- `aria-selected` et modèles d’onglets
- Régions dynamiques : `aria-live`, `aria-atomic`, `aria-relevant`
- Tests avec des lecteurs d’écran