Navigation clavier : guide pratique pour l'accessibilité

La navigation au clavier est fondamentale pour l'accessibilité. Elle permet aux personnes ne pouvant utiliser une souris (handicaps moteurs, déficiences visuelles) d'interagir avec votre site. Ce guide couvre les techniques essentielles pour une expérience clavier irréprochable.

Pourquoi la navigation clavier est critique

Qui en bénéficie ?

• Personnes aveugles ou malvoyantes utilisant un lecteur d'écran
• Personnes avec des handicaps moteurs (tremblements, paralysie)
• Utilisateurs avancés préférant le clavier pour la rapidité
• Personnes en situation temporaire (bras cassé, souris défaillante)

Critères WCAG concernés

• 2.1.1 Clavier (A) : Toute fonctionnalité doit être utilisable au clavier
• 2.1.2 Pas de piège clavier (A) : L'utilisateur ne doit jamais être bloqué
• 2.4.3 Ordre du focus (A) : L'ordre de navigation doit être logique
• 2.4.7 Focus visible (AA) : L'indicateur de focus doit être perceptible

Les fondamentaux du tabindex

tabindex="0"

Ajoute un élément au flux de tabulation naturel, à sa position dans le DOM.

<!-- Rendre un div focusable (quand vraiment nécessaire) -->
<div tabindex="0" role="button" onclick="action()">
  Élément interactif personnalisé
</div>

tabindex="-1"

L'élément peut recevoir le focus programmatiquement mais pas via Tab.

<!-- Utile pour les skip links et la gestion du focus -->
<main id="contenu-principal" tabindex="-1">
  <h1>Titre de la page</h1>
</main>

tabindex positif : à proscrire

<!-- JAMAIS FAIRE CELA -->
<a href="/" tabindex="3">Accueil</a>
<a href="/services" tabindex="1">Services</a>
<a href="/contact" tabindex="2">Contact</a>

Les valeurs positives créent un ordre de tabulation explicite qui :

• Devient ingérable sur les grandes pages
• Cause de la confusion quand le focus "saute" dans la page
• Est incompatible avec le contenu dynamique

Les skip links (liens d'évitement)

Principe

Les skip links permettent aux utilisateurs clavier de sauter les éléments répétitifs (navigation, en-tête) pour accéder directement au contenu principal.

Implémentation

<!-- Premier élément focusable de la page -->
<a href="#contenu-principal" class="skip-link">
  Aller au contenu principal
</a>

<header>
  <nav><!-- Navigation longue --></nav>
</header>

<main id="contenu-principal" tabindex="-1">
  <h1>Titre de la page</h1>
  <!-- Contenu -->
</main>

/* Masque le lien visuellement mais le garde accessible */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px 16px;
  z-index: 100;
}

/* Affiche le lien quand il reçoit le focus */
.skip-link:focus {
  top: 0;
}

[!NOTE] Le tabindex="-1" sur la destination corrige un bug de certains navigateurs qui déplacent la vue mais pas le focus.

[!TIP] Consultez notre guide détaillé sur les skip links pour des implémentations avancées.

L'indicateur de focus visible

L'obligation légale

Le critère WCAG 2.4.7 (niveau AA) exige un indicateur de focus visible. Ne supprimez jamais le focus visible avec outline: none sans alternative.

Bonnes pratiques CSS

/* MAUVAISE PRATIQUE */
*:focus {
  outline: none; /* Supprime le focus visible - NON ACCESSIBLE */
}

/* BONNE PRATIQUE : améliorer l'indicateur par défaut */
:focus {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* Variante moderne avec :focus-visible */
:focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none; /* Masque pour les clics souris */
}

Contrastes du focus

L'indicateur de focus doit avoir un contraste suffisant avec l'arrière-plan :

• 3:1 minimum selon WCAG 2.4.11 (niveau AA)
• Évitez les indicateurs trop subtils (gris clair, ombre légère)

Ordre de focus logique

Le principe

L'ordre de tabulation doit suivre le flux visuel de lecture : haut vers bas, gauche vers droite (pour les langues LTR).

Problèmes courants

/* Problématique : l'ordre visuel ne correspond plus au DOM */
.container {
  display: flex;
  flex-direction: row-reverse;
}

Dans ce cas, l'ordre de focus (DOM) sera différent de l'ordre visuel, créant de la confusion.

Solutions

1. Restructurer le HTML pour que l'ordre du DOM corresponde à l'ordre visuel
2. Éviter les manipulations CSS qui inversent l'ordre (row-reverse, order)
3. Si impossible, utiliser tabindex="0" strategiquement (en dernier recours)

Les pièges au clavier

Qu'est-ce qu'un piège ?

Un piège clavier est une situation où l'utilisateur peut entrer dans un élément mais ne peut plus en sortir avec Tab ou Shift+Tab.

Cas fréquents

• Modales sans gestion du focus
• Lecteurs vidéo personnalisés
• Widgets JavaScript mal codés
• iframes de tiers

Solution pour les modales

// Gestion du focus dans une modale
function ouvrirModale(modal) {
  // Sauvegarder l'élément qui avait le focus
  const elementPrecedent = document.activeElement;

  // Afficher la modale
  modal.classList.add('ouverte');

  // Déplacer le focus dans la modale
  const premierElementFocusable = modal.querySelector(
    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
  );
  premierElementFocusable.focus();

  // Piéger le focus dans la modale
  modal.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
      fermerModale(modal, elementPrecedent);
    }
    // Gérer la boucle de focus...
  });
}

function fermerModale(modal, elementPrecedent) {
  modal.classList.remove('ouverte');
  // Restaurer le focus
  elementPrecedent.focus();
}

Tester la navigation clavier

Test manuel essentiel

1. Posez votre souris
2. Appuyez sur Tab pour naviguer vers l'avant
3. Vérifiez que tous les éléments interactifs sont accessibles
4. Vérifiez que l'ordre est logique
5. Vérifiez que le focus est toujours visible
6. Testez Shift+Tab pour la navigation inverse
7. Vérifiez qu'aucun piège n'existe

Touches à tester

Outils

• Testeur de focus : Vérifiez la visibilité et le style de vos indicateurs de focus
• Générateur de focus ring : Créez des styles de focus accessibles et esthétiques
• RGAA Checker : Détecte les problèmes de tabindex et de navigation
• Extension WAVE : Visualise l'ordre de tabulation

Conclusion

La navigation clavier est le fondement de l'accessibilité web. En respectant l'ordre naturel du focus, en implémentant des skip links et en évitant les pièges, vous rendez votre site utilisable pour tous.

Testez régulièrement votre site uniquement au clavier. Si vous ne pouvez pas accomplir une tâche sans souris, vos utilisateurs non plus.