Toute personne ne peut ou ne veut pas utiliser une souris : tremblement, handicap moteur, ou simplement une préférence d’utilisation. Un site correctement conçu doit rester entièrement utilisable au clavier seul, de la première touche de tabulation jusqu’à la validation d’un formulaire, sans jamais laisser un visiteur bloqué devant un élément inaccessible autrement qu’à la souris.
Ce qu’il faut vérifier
- Chaque lien, bouton et champ de formulaire doit être atteignable par la touche
Tab, dans un ordre logique. - L’élément actif doit afficher un indicateur visuel clair (contour de focus), jamais supprimé par un simple
outline: none;sans alternative. - Un menu déroulant doit pouvoir s’ouvrir et se fermer sans souris, souvent via la touche
EntréeouÉchap.
Dans WordPress
L’éditeur de blocs Gutenberg est lui-même entièrement pilotable au clavier, un prérequis d’accessibilité pour l’administration ; côté thème public, la propriété CSS :focus-visible permet de n’afficher l’indicateur de focus que lors d’une navigation clavier, sans l’imposer inutilement à un clic de souris.
Exemple
a:focus-visible, button:focus-visible {
outline: 2px solid #1e3a8a;
outline-offset: 2px;
}
Pièges fréquents
Un menu construit uniquement avec des événements onmouseover, sans équivalent au clavier, reste invisible pour un utilisateur qui navigue à la tabulation, même si le rendu visuel paraît impeccable à la souris. Un ordre de tabulation qui ne correspond pas à l’ordre visuel de la page, souvent causé par un positionnement CSS approximatif, désoriente aussi profondément un visiteur qui navigue sans souris, même quand chaque élément pris isolément reste bien accessible.