Comment rendre un site utilisable au clavier ?
En bref
Naviguer au clavier consiste à parcourir une page avec la touche de tabulation et à activer les éléments avec Entrée ou Espace. Un site utilisable au clavier respecte quatre conditions : tous les éléments interactifs sont atteignables, l'élément actif est visible, l'ordre de parcours suit la lecture, et aucun piège n'empêche de sortir d'un menu ou d'une fenêtre.
Toutes les personnes n'utilisent pas une souris. Certaines ne le peuvent pas, d'autres préfèrent le clavier, d'autres encore utilisent un lecteur d'écran, logiciel qui restitue la page à voix haute et se pilote au clavier. Un site inutilisable sans souris exclut ces visiteurs et laisse passer des erreurs qui gênent tout le monde.
Comment tester en cinq minutes ?
Ouvrez une page, posez la souris de côté et appuyez sur la touche de tabulation. À chaque appui, l'élément actif change : c'est le focus. Parcourez la page jusqu'au bas et vérifiez quatre points :
- Voyez-vous en permanence où vous êtes ?
- Pouvez-vous atteindre tous les liens, boutons et champs ?
- L'ordre suit-il la lecture visuelle de la page ?
- Pouvez-vous toujours revenir en arrière et sortir de ce que vous ouvrez ?
Si l'un des quatre échoue, le problème touche aussi les outils d'assistance, comme le rappelle l'article sur l'accessibilité d'un site web.
Pourquoi l'indicateur de focus est-il essentiel ?
Les navigateurs entourent l'élément actif d'un contour visible. Ce contour est parfois supprimé par une règle de style, pour des raisons esthétiques : la navigation au clavier devient alors impossible, puisque l'on ne sait plus où l'on est. S'il ne convient pas graphiquement, il faut le remplacer par un indicateur visible, pas le supprimer. Un contour épais, un fond contrasté ou un soulignement marqué conviennent, à condition de rester perceptibles sur tous les fonds.
Quels éléments posent problème ?
| Élément | Problème courant | Correction |
|---|---|---|
| Menu déroulant | Ne s'ouvre qu'au survol de la souris | L'ouvrir aussi au focus et à l'activation |
| Fenêtre modale | Le focus reste derrière ou s'échappe | Enfermer le focus dans la fenêtre, fermer avec Échap |
| Bandeau cookies | Impossible d'atteindre le bouton de refus | Rendre tous les boutons atteignables |
| Carrousel | Défile seul, sans commande | Ajouter des boutons utilisables au clavier |
| Faux bouton | Un élément décoratif rendu cliquable par script | Utiliser un vrai bouton ou un vrai lien |
La dernière ligne résume l'essentiel : les éléments natifs du web sont utilisables au clavier par défaut. La plupart des problèmes viennent de composants reconstruits sans cette propriété.
À quoi sert un lien d'évitement ?
Un lien d'évitement est un lien placé tout en haut de la page, invisible tant qu'il n'a pas le focus, qui permet d'aller directement au contenu principal. Sans lui, une personne qui navigue au clavier traverse le menu entier sur chaque page avant d'atteindre le texte. Il se met en place une fois dans le gabarit et sert partout.
Et les formulaires ?
Un formulaire se remplit très souvent au clavier, y compris à la souris. Vérifiez que chaque champ s'atteint dans l'ordre, que l'étiquette est liée au champ, que les messages d'erreur sont atteignables et que l'envoi fonctionne depuis le clavier. Ces points sont détaillés dans l'article consacré au formulaire de contact.
Qui bénéficie de ces corrections ?
Au-delà des personnes en situation de handicap, la navigation au clavier sert aux utilisateurs pressés, aux personnes qui travaillent sur un ordinateur portable sans souris, et aux outils automatiques qui parcourent les pages. Les corrections nécessaires sont en général peu coûteuses lorsqu'elles sont faites à la conception, et beaucoup plus lourdes une fois le site en ligne.
NexSecure intègre ces vérifications au développement dans le cadre du développement web sur mesure.
Questions fréquentes
Comment tester la navigation au clavier ?
Posez la souris de côté et parcourez la page avec la touche de tabulation. Vérifiez que vous voyez toujours l'élément actif, que tout est atteignable, que l'ordre suit la lecture et que vous pouvez sortir de ce que vous ouvrez.
Peut-on supprimer le contour bleu du focus ?
Pas sans le remplacer. Ce contour indique l'élément actif. S'il ne convient pas graphiquement, il faut lui substituer un indicateur visible et contrasté, jamais le retirer.
Pourquoi mon menu déroulant ne s'ouvre-t-il pas au clavier ?
Parce qu'il réagit uniquement au survol de la souris. Il doit aussi s'ouvrir lorsque l'élément reçoit le focus ou qu'il est activé par Entrée ou Espace.
Qu'est-ce qu'un lien d'évitement ?
Un lien placé en début de page, révélé au premier appui sur la touche de tabulation, qui mène directement au contenu principal. Il évite de traverser tout le menu sur chaque page.
Sources
Service lié
Articles liés
Rédigé par l'équipe NexSecure. Responsable de la publication : Yohann Toumine. Dernière mise à jour le 11 septembre 2026.
Une question sur votre situation ? Parler de votre projet