---
title: "Navigation au clavier : le test express qui en dit le plus"
description: "Rubrique parente : L'accessibilité numérique. Trois minutes, zéro outil Mettez la souris de côté et affichez l’accueil de votre site. Avancez uniquement avec la touche Tab (et Maj + Tab pour reculer), puis tentez une tâche concrète jusqu’au bout : consulter vos horaires, envoyer une demande de devis, valider un achat. Nous ne connaissons pas […]"
url: "https://www.newp.fr/accessibilite-numerique/navigation-au-clavier/"
author: ""
date: "2026-09-20T09:27:36+00:00"
modified: "2026-09-21T18:34:10+00:00"
lang: "fr_FR"
---

# Navigation au clavier : le test express qui en dit le plus

 Rubrique parente : [L'accessibilité numérique](/accessibilite-numerique/).

 

## Trois minutes, zéro outil

 Mettez la souris de côté et affichez l’accueil de votre site. Avancez uniquement avec la touche Tab (et Maj + Tab pour reculer), puis tentez une tâche concrète jusqu’au bout : consulter vos horaires, envoyer une demande de devis, valider un achat.

 Nous ne connaissons pas de vérification plus rentable. Elle ne réclame aucune connaissance en code, et révèle énormément de problèmes en très peu de temps.

## Quatre défauts typiques

### 1. On ne voit pas où l’on se trouve

 Chaque pression sur Tab déplace le focus, mais l’écran ne montre rien : vous avez perdu votre position. Dans la très grande majorité des cas, le coupable est une déclaration `outline: none` issue d’une feuille de réinitialisation CSS, qui n’a jamais été compensée par un autre style.

 Nous la rencontrons sur presque tous les sites, et elle se règle en quelques lignes.

### 2. Le focus passe derrière un élément

 L’indicateur existe bel et bien, mais il disparaît sous un en-tête fixe, sous la bannière de gestion des cookies ou sous une bulle de chat. Vous suivez un élément, le perdez de vue, puis le retrouvez plusieurs tabulations plus loin.

### 3. Le parcours part dans tous les sens

 Le focus bondit du pied de page vers le menu, puis revient au milieu du contenu. Le plus souvent, la mise en page déplace des blocs à l’écran grâce au CSS alors que le code source garde l’ordre initial. Les affichages mobiles sont particulièrement touchés.

### 4. Impossible de ressortir

 Vous pénétrez dans une fenêtre modale, un diaporama, un lecteur vidéo ou, très fréquemment, la bannière de consentement, et la tabulation y tourne indéfiniment sans jamais vous laisser repartir.

 Nous le classons au premier rang des défauts : il n’abîme pas seulement le confort, il rend tout le reste du site inaccessible.

 Le premier arrêt attendu Dès la première tabulation, quelle que soit la page, un **lien d’évitement** devrait apparaître pour sauter directement au contenu principal. En son absence, la personne au clavier doit franchir tout le menu sur chaque nouvelle page.

 Faites l’essai ici même : il s’affiche dans le coin supérieur gauche.

 

## Les conditions d’un parcours clavier réussi

- **S’appuyer sur les balises natives.** Un `<button>` reçoit le focus et réagit au clavier sans effort ; un `<div>` auquel on a ajouté un clic ne fait ni l’un ni l’autre.
- **Proscrire les valeurs de `tabindex` supérieures à zéro.** Elles imposent un ordre à part qui, tôt ou tard, s’écarte de l’ordre de lecture.
- **Afficher un indicateur de focus bien contrasté**, avec un ratio minimal de 3:1.
- **Permettre de quitter** chaque composant avec la touche Échap, en ramenant le focus sur le bouton qui l’avait ouvert.
- **Ne rien réserver au passage de la souris** : un sous-menu doit aussi se déployer lorsqu’il reçoit le focus.
 
## Bien plus de monde concerné qu’on ne le pense

 Les personnes aveugles qui utilisent un lecteur d’écran se déplacent au clavier. Le pilotage vocal, les contacteurs et le suivi du regard reposent sur ce même mécanisme. Ajoutez les utilisateurs avancés, adeptes du clavier. Une seule série de corrections profite donc à tous ces publics.

  [ Rubrique précédente Les contrastes et les couleurs ](/accessibilite-numerique/contrastes-et-couleurs/) [ Rubrique suivante Les alternatives textuelles ](/accessibilite-numerique/alternatives-textuelles/)

---

*Source : [www.newp.fr](https://www.newp.fr/accessibilite-numerique/navigation-au-clavier/)*