Partie 4 — Clavier & gestion du focus

⏱️ TL;DR — Règle non négociable : si ça ne marche pas au clavier, ce n’est pas accessible — point. Beaucoup d’utilisateurs n’ont pas de souris : personnes avec un handicap moteur, utilisateurs de lecteurs d’écran, utilisateurs experts, ou toi le jour où ton trackpad lâche. Le clavier, c’est le plus petit dénominateur commun de l’interaction. Cette partie t’apprend à naviguer au clavier, à garder un focus visible et logique, à manier tabindex sans te tirer une balle dans le pied, à gérer le focus en JavaScript (modales, suppressions, changements de route) et à éviter les pièges (contenu masqué, focus prisonnier).

Le problème qu’on résout

La souris est une évidence pour beaucoup de développeurs, au point qu’ils testent leur interface uniquement à la souris. Résultat : des <div> cliquables qu’on ne peut pas atteindre au clavier, des menus qui se referment dès qu’on tabule, un outline: none qui rend le focus invisible, une modale dont on ne peut plus sortir. Ces bugs sont invisibles à la souris mais bloquants pour une part énorme d’utilisateurs. La bonne nouvelle : ils se détectent en 30 secondes (débranche la souris) et se corrigent avec des réflexes simples que cette partie va ancrer.

Ce que tu sauras faire à la fin de cette partie

• Naviguer et tester n’importe quelle interface au clavier seul, et repérer ce qui casse.
• Garantir un ordre de focus logique et un focus toujours visible (jamais d’outline: none nu).
• Utiliser tabindex correctement : 0, -1, et pourquoi jamais de valeur positive.
• Gérer le focus en JavaScript : modales, suppression d’élément, changement de route, liens d’évitement.
• Détecter et corriger les pièges au clavier et gérer proprement le contenu masqué (display:none, aria-hidden, inert…).

Les chapitres

On commence : Naviguer au clavier.