Navigation au clavier et gestion du focus
Assurez-vous que tous les éléments interactifs sont accessibles avec Tab, gérez le focus par programmation dans les boîtes de dialogue et le routage, puis créez des indicateurs de focus visibles.
Navigation au clavier et gestion du focus est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 4 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 Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Pourquoi la navigation au clavier est importante
De nombreux utilisateurs ne peuvent pas utiliser une souris : personnes ayant un handicap moteur, utilisateurs de lecteurs d’écran, utilisateurs expérimentés qui préfèrent le clavier. Si votre application ne se navigue pas au clavier, elle ne fonctionne pas pour eux.
Tab et Shift+Tab
Tab déplace le focus vers l’élément interactif suivant. Shift+Tab le déplace vers le précédent. Par défaut, l’ordre suit celui du DOM : ne luttez pas contre ce comportement ; laissez le DOM définir votre ordre de tabulation.
Ce qui peut recevoir le focus par défaut
Les éléments interactifs natifs peuvent recevoir le focus : a[href], button, input, select, textarea, summary. Les éléments personnalisés ont besoin de tabindex.
Valeurs de tabindex
tabindex="0" : inclus dans l’ordre de tabulation à la position du DOM. tabindex="-1" : peut recevoir le focus uniquement via JS (focus par un script, pas avec Tab). tabindex=">0" : anti-modèle ; il crée un ordre de focus déroutant, ne l’utilisez jamais.
<!-- Custom button (still: use real <button>!): -->
<div role="button" tabindex="0" onkeydown="...">Custom</div>
<!-- Programmatically focusable, skipped by Tab: -->
<div tabindex="-1" id="error-summary"></div>Indicateur de focus visible
Ne supprimez jamais les contours du focus sans fournir de remplacement. WCAG exige un indicateur visible sur chaque élément pouvant recevoir le focus.
/* BAD: hides focus for everyone */
*:focus { outline: none; }
/* GOOD: only show focus from keyboard (not mouse click) */
:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 2px;
}:focus-visible
La pseudo-classe :focus-visible s’active uniquement lorsque le focus provient du clavier, et non d’un clic de souris. Elle vous permet de conserver des styles sobres à la souris tout en affichant le focus au clavier.
Lien d’accès direct au contenu
Le premier élément pouvant recevoir le focus devrait être un lien d’accès direct, afin que les utilisateurs du clavier puissent passer la navigation de l’en-tête et accéder directement au contenu principal.
<a href="#main" class="skip-link">Skip to main content</a>
...
<main id="main" tabindex="-1">...</main>
/* CSS */
.skip-link {
position: absolute; left: -10000px;
}
.skip-link:focus {
left: 1rem; top: 1rem;
background: white; padding: 0.5rem 1rem;
}Piège à focus dans les fenêtres modales
Lorsqu’une fenêtre modale s’ouvre, le focus doit y rester confiné : Tab depuis le dernier élément revient au premier, et Shift+Tab depuis le premier revient au dernier. Appuyer sur Échap ferme la fenêtre modale.
// On modal open:
modal.querySelector('h2').focus(); // move focus into modal
lastFocused = document.activeElement;
// On Tab in modal: detect leaving and wrap to first focusable.
// On Escape: close modal and restore focus:
lastFocused.focus();Utilisez l’élément dialog
L’élément natif <dialog> de HTML gère automatiquement le piège à focus, la fermeture avec Échap et le voile modal.
<dialog id="signup">
<h2>Sign up</h2>
<form method="dialog">
<input name="email" required>
<button>Submit</button>
<button value="cancel">Cancel</button>
</form>
</dialog>
<script>
document.getElementById('signup').showModal(); // opens with focus trap
</script>Gestion du focus après un changement de route
Les SPA ne rechargent pas la page ; les utilisateurs de lecteurs d’écran ne reçoivent donc aucun signal indiquant qu’une navigation a eu lieu. Déplacez le focus vers le h1 ou le main de la nouvelle page lors d’un changement de route.
// On route change:
document.getElementById('main')?.focus();
// or focus the new h1:
newPage.querySelector('h1')?.setAttribute('tabindex', '-1');
newPage.querySelector('h1')?.focus();L’ordre du focus doit correspondre à l’ordre visuel
Assurez-vous que l’ordre du DOM correspond au parcours visuel. Si CSS réorganise les éléments (ordre flex, placement dans une grille, position absolue), l’ordre de tabulation ne correspondra pas à l’ordre visuel, ce qui créera de la confusion pour tout le monde.
Testez en rangeant votre souris
Le test d’accessibilité le plus utile : débranchez votre souris et essayez d’utiliser toute votre application avec Tab, Shift+Tab, Entrée, Espace et les touches fléchées. Si vous êtes bloqué, vos utilisateurs le seront aussi.
Vérification rapide
Quelle pseudo-classe CSS permet de styliser le contour du focus uniquement lorsque le focus provient du clavier et non d’un clic de souris ?
Récapitulatif : navigation au clavier
Les éléments interactifs natifs peuvent recevoir le focus par défaut. Utilisez tabindex=0 uniquement sur les composants personnalisés ; n’utilisez jamais tabindex>0. Affichez toujours le focus : utilisez :focus-visible. Ajoutez un lien d’accès direct au contenu. Confinez le focus dans les fenêtres modales et restaurez-le à la fermeture. Utilisez l’élément natif <dialog> lorsque c’est possible. Déplacez le focus vers h1/main lors d’un changement de route. Testez en rangeant votre souris.
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 41
- Leçons
- 163
Questions Fréquemment Posées
La leçon « Navigation au clavier et gestion du focus » est-elle gratuite ?
Oui — le texte complet de « Navigation au clavier et gestion du focus » 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 Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Navigation au clavier et gestion du focus » ?
Assurez-vous que tous les éléments interactifs sont accessibles avec Tab, gérez le focus par programmation dans les boîtes de dialogue et le routage, puis créez des indicateurs de focus visibles. Tu pratiques Frontend 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 Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend 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 4 sur 4.
Combien de temps prend la leçon « Navigation au clavier et gestion du focus » ?
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 Frontend Academy ?
Oui. Chaque leçon Frontend 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
- Niveaux WCAG : A, AA et AAA
- HTML sémantique comme fondation
- Rôles et attributs ARIA
- Navigation au clavier et gestion du focus