Navigation au clavier et ordre de mise au point
Assurez-vous que toutes les fonctionnalités sont accessibles au clavier de manière logique.
Navigation au clavier et ordre de mise au point est une leçon HTML 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 HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.
Qui a besoin de la navigation au clavier ?
De nombreux utilisateurs dépendent de la navigation au clavier :
- Personnes ayant un handicap moteur — elles ne peuvent pas utiliser de souris
- Utilisateurs expérimentés — ils préfèrent les raccourcis clavier
- Utilisateurs de lecteurs d’écran — ils naviguent entièrement au clavier
- Utilisateurs de dispositifs de commutation — ils utilisent des boutons qui simulent des pressions de touches
Éléments naturellement accessibles au focus
Par défaut, ces éléments HTML peuvent recevoir le focus au clavier :
<a href>— la touche Tab y déplace le focus, Entrée l’active<button>— la touche Tab y déplace le focus, Entrée ou Espace l’active<input>,<textarea>,<select>— la touche Tab y déplace le focus<details>/<summary>— Tab + Entrée
Ordre de tabulation
Le navigateur détermine l’ordre de tabulation selon les règles suivantes :
- Ordre du DOM par défaut — les éléments reçoivent le focus dans l’ordre où ils apparaissent dans le HTML
- Valeurs tabindex positives — ces éléments reçoivent d’abord le focus dans l’ordre croissant
tabindex="0"— ajouté à l’ordre naturel de tabulation à sa position dans le DOMtabindex="-1"— absent de l’ordre de tabulation ; accessible uniquement via un script
Ordre naturel de tabulation = ordre du DOM
L’ordre de lecture de votre HTML doit correspondre à la disposition visuelle :
<!-- GOOD: DOM order matches visual left-to-right, top-to-bottom: -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>
<!-- BAD: visually reordered with CSS, DOM order broken:
CSS flexbox order: doesn't affect tab order!
Screen readers and keyboard users follow DOM order, not CSS order -->Indicateur de focus visible
WCAG 2.4.7 (niveau AA) : le focus du clavier doit être visible :
/* NEVER do this: */
* { outline: none; } /* removes all focus outlines */
/* GOOD: styled focus indicator: */
:focus-visible {
outline: 2px solid #0070f3;
outline-offset: 3px;
border-radius: 4px;
}
/* :focus-visible shows outline for keyboard only
mouse clicks don't trigger :focus-visible -->
/* But outline: none with :focus (not :focus-visible) hides for both */Styles de focus personnalisés
Styles de focus du système de conception :
/* Replace outline with box-shadow for rounded elements: */
button:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.4);
}
/* Always ensure 3:1 contrast ratio between
focus indicator and background (WCAG 2.4.11 Level AA) */Ordre logique du focus
L’ordre du focus doit être logique et prévisible — WCAG 2.4.3 (niveau A) :
<!-- BAD: focus order jumps around the page -->
<!-- First: footer link (tabindex=5) -->
<!-- Then: sidebar (tabindex=3) -->
<!-- Then: header nav (tabindex=1) -->
<!-- GOOD: natural DOM order matches reading flow: -->
<!-- Header → Nav → Main Content → Sidebar → Footer -->Liens d’évitement
Les liens d’évitement permettent aux utilisateurs du clavier de contourner la navigation répétitive :
<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- Visually hidden until focused: -->
.skip-link {
position: absolute;
top: -100%;
left: 0;
background: #0070f3;
color: white;
padding: 0.75rem;
z-index: 9999;
}
.skip-link:focus {
top: 0; /* visible when focused -->
}Piège à focus dans les modales
Les modales doivent piéger le focus tant qu’elles sont ouvertes :
<!-- When modal opens:
1. Move focus to modal container or first interactive element
2. Tab stays within modal
3. When modal closes, return focus to the trigger button
-->
const modal = document.getElementById('modal');
const trigger = document.getElementById('open-modal');
function openModal() {
modal.removeAttribute('hidden');
modal.querySelector('button, [tabindex="0"]').focus();
}
function closeModal() {
modal.setAttribute('hidden', '');
trigger.focus();
}Raccourcis clavier
Implémentez les raccourcis clavier avec des écouteurs d’événements :
document.addEventListener('keydown', (e) => {
// Close modal on Escape:
if (e.key === 'Escape') closeModal();
// Navigate tabs with arrow keys:
if (e.key === 'ArrowRight') focusNextTab();
if (e.key === 'ArrowLeft') focusPrevTab();
// Submit form on Enter (default behavior in inputs):
// Nothing needed — browser handles this
});Tester la navigation au clavier
Comment tester l’accessibilité au clavier :
- Éloignez votre souris et utilisez uniquement le clavier
- Appuyez sur Tab — pouvez-vous atteindre chaque élément interactif ?
- L’indicateur de focus est-il toujours visible ?
- L’ordre de tabulation est-il logique ?
- Pouvez-vous utiliser toutes les fonctionnalités (formulaires, modales, menus déroulants) sans souris ?
- Appuyez sur Maj+Tab pour naviguer en arrière
Vérification rapide
Quelle propriété CSS ne devez-vous jamais supprimer de tous les éléments pour garantir l’accessibilité au clavier ?
Récapitulatif : navigation au clavier
Principes essentiels de l’accessibilité au clavier :
- Tous les éléments interactifs doivent être accessibles avec la touche Tab
- Ordre du DOM = ordre de tabulation — faites-les correspondre à la disposition visuelle
- Ne supprimez jamais les contours du focus — utilisez
:focus-visiblepour les styles personnalisés - Les liens d’évitement permettent de contourner la navigation répétitive
- Piégez le focus dans les modales ; rendez le focus à la fermeture
- Testez votre site en utilisant uniquement le clavier
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
- 40
- Leçons
- 159
Questions Fréquemment Posées
La leçon « Navigation au clavier et ordre de mise au point » est-elle gratuite ?
Oui — le texte complet de « Navigation au clavier et ordre de mise au point » 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 « Navigation au clavier et ordre de mise au point » ?
Assurez-vous que toutes les fonctionnalités sont accessibles au clavier de manière logique. 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 4 sur 4.
Combien de temps prend la leçon « Navigation au clavier et ordre de mise au point » ?
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
- Pourquoi l’accessibilité compte : niveaux WCAG
- Hiérarchie des titres pour les lecteurs d’écran
- Texte alternatif des images : quand et comment
- Navigation au clavier et ordre de mise au point