Navigation au clavier

1. Pourquoi c’est important ?

Beaucoup d’utilisateurs ne naviguent qu’au clavier, et pas seulement par choix :

• Personnes en situation de handicap moteur.
• Utilisateurs de lecteurs d’écran qui dépendent du clavier.
• Utilisateurs avancés qui préfèrent le clavier pour sa rapidité (développeurs, etc.).

Si un site n’est pas entièrement utilisable au clavier, il exclut immédiatement une partie de ses utilisateurs.

2. Principes de la navigation clavier

• Touche Tab : permet de passer d’un élément interactif au suivant (lien, bouton, champ de formulaire).
• Maj + Tab : permet de revenir à l’élément précédent.
• Entrée ou Espace : active un bouton ou suit un lien.
• Flèches directionnelles : utilisées pour naviguer à l’intérieur de composants complexes (menus, sliders, etc.).

Règle d’or : Tous les éléments interactifs doivent être accessibles et activables via la tabulation.

3. Bonnes pratiques

• S’assurer que tous les liens, boutons, et champs de formulaires sont atteignables avec Tab.
• Utiliser l’attribut tabindex avec parcimonie et correctement.
• Mettre en évidence l’élément sélectionné avec un style de focus visible (bordure, ombre, etc.).
• Ne jamais désactiver l’outline en CSS (outline: none;) sans proposer une alternative claire et visible.

Exemple de focus visible :

button:focus {
  outline: 3px solid #1976d2; /* Un contour bleu bien visible */
  outline-offset: 2px;
}

4. Pièges fréquents à éviter

• Focus piégé : L’utilisateur entre dans un élément (une fenêtre modale, par exemple) et ne peut plus en sortir avec la touche Tab.
• Éléments non focusables : Utiliser un <div> avec un événement JavaScript pour simuler un bouton le rend inaccessible au clavier par défaut.
• Ordre de tabulation incohérent : Le focus saute d’un bout à l’autre de la page de manière illogique, ne suivant pas l’ordre visuel.

Exercices Interactifs

Exercice 1 – Testez un site

Ouvrez un site web que vous aimez, débranchez votre souris et essayez de naviguer uniquement avec les touches Tab, Maj+Tab et Entrée. Pouvez-vous accéder à tout ? L’élément sélectionné est-il toujours visible ?

Exercice 2 – Focus invisible

Un développeur a ajouté le code CSS suivant pour « nettoyer » l’apparence des boutons. Pourquoi est-ce un grave problème d’accessibilité et comment le corriger ?

button:focus {
  outline: none;
}

button:focus-visible {
  outline: 3px solid #FF5722; /* Style de focus personnalisé et visible */
  outline-offset: 2px;
}

Exercice 3 – Piège de navigation

Imaginez une fenêtre modale (popup) qui s’ouvre. Que doit faire un développeur pour que l’utilisateur ne puisse pas « tabber » sur les éléments de la page en arrière-plan et puisse fermer la modale facilement ?

document.addEventListener('keydown', function(e) {
  if (e.key === "Escape") {
    // Logique pour fermer la modale ici
    document.querySelector('.popup').style.display = "none";
  }
});