Navigation au clavier

La navigation au clavier désigne la capacité de parcourir et d'utiliser une interface web avec les seules touches du clavier, sans souris. C'est le mode d'interaction principal pour les personnes qui ne peuvent pas utiliser de dispositif de pointage, et un test de base pour vérifier l'accessibilité d'un site.

Débranchez votre souris et essayez d'utiliser votre site. Tab pour avancer, Maj+Tab pour reculer, Entrée pour activer un lien, Espace pour cocher une case. Si vous êtes bloqué au bout de trois clics de Tab, vos utilisateurs au clavier le sont aussi.

#Comment ça fonctionne

Le navigateur maintient un curseur invisible, le focus, qui se déplace d'un élément interactif à l'autre. Les éléments HTML natifs (<a>, <button>, <input>, <select>) reçoivent le focus automatiquement, dans l'ordre du code source.

Les touches de base :

• Tab : élément suivant
• Maj+Tab : élément précédent
• Entrée : activer un lien ou un bouton
• Espace : cocher une case, ouvrir un menu déroulant
• Flèches : naviguer dans les menus, onglets, grilles
• Échap : fermer une modale ou un menu

Le critère 2.1.1 des WCAG (niveau A) résume l'exigence : toute fonctionnalité utilisable à la souris doit l'être au clavier. Seules les interactions qui dépendent du tracé du mouvement (dessin à main levée, par exemple) sont exemptées.

#L'erreur que tout le monde fait

Remplacer un <button> par un <div onclick="...">. Le div ne reçoit pas le focus. Il n'écoute ni Tab, ni Entrée, ni Espace. Pour un utilisateur au clavier, ce bouton n'existe pas.

La correction minimale demande tabindex="0", un role="button", et un gestionnaire keydown pour Entrée et Espace. Trois ajouts au lieu de zéro avec un <button> natif.

<!-- Inaccessible au clavier -->
<div onclick="envoyer()">Envoyer</div>
 
<!-- Accessible nativement -->
<button type="button" onclick="envoyer()">Envoyer</button>

Autre piège fréquent : tabindex="5" ou toute valeur positive. Le W3C APG le déconseille formellement. Une valeur positive crée un ordre de tabulation parallèle, imprévisible et quasi impossible à maintenir sur une page complexe.

#En résumé

Utilisez les éléments HTML natifs. Testez au clavier avant de livrer. Et si un composant personnalisé ne répond pas à Tab, corrigez-le avant de vous occuper du reste. Un site inaccessible au clavier est inutilisable pour des millions de personnes.