Dernière mise à jour : 31 mars 2026
Principes pour optimiser la navigation des pages en utilisant uniquement le clavier.
Comprendre l’interactivité au clavier
Pour qu’un site soit accessible, toutes les interactions qui peuvent être faites avec la souris doivent aussi pouvoir être faites en utilisant uniquement le clavier. Cela assure l’accès au contenu pour toutes les personnes, peu importe leur façon de naviguer.
Pour y arriver, certaines touches du clavier permettent de se déplacer, d’activer ou de sélectionner les éléments d’une page.
Touches principales
La touche Tabulation (Tab.) permet de déplacer le repère visuel, appelé focus, vers l’élément interactif suivant. Le déplacement se fait de gauche à droite, puis de haut en bas.
La combinaison Majuscule + Tabulation (Majuscule + Tab.) permet de revenir à l’élément précédent.
Les touches Espace et Entrée ont le même effet qu’un clic de souris : elles activent l’élément sélectionné.
Gérer le contenu caché et le focus visuel
Bloquer l’accès au contenu caché tant qu’il n’est pas affiché
Certains éléments d’une page peuvent être cachés, comme un menu déroulant qui apparaît au clic ou un texte qui se dévoile seulement après une action. Tant qu’ils ne sont pas visibles à l’écran, ces éléments ne doivent pas être accessibles au clavier ni lus par un lecteur d’écran. Cela évite qu’une personne qui navigue au clavier lise ou interagisse avec du contenu qu’elle ne peut pas voir dans la page.
Montrer où se trouve le focus sur les éléments interactifs
Quand un élément interactif peut recevoir le focus (c’est-à-dire qu’on peut le sélectionner avec le clavier), il doit afficher un repère visuel clair, par exemple un contour, une surbrillance ou un changement de couleur. Ce repère permet à l’utilisateur de savoir exactement où il se trouve sur la page et de naviguer facilement, sans se perdre.
Limiter le focus au composant superposé, tant qu’il est ouvert
Lorsqu’un composant s’affiche par-dessus le contenu principal d’une page (comme une modale ou un menu déroulant), le focus doit automatiquement être déplacé à l’intérieur de ce dernier. Les touches Tab. et Majuscule + Tab. permettent alors de naviguer uniquement entre les éléments de ce composant, jusqu’à ce qu’il soit fermé à l’aide de la touche Échap (Esc) ou du bouton prévu à cet effet. Une fois fermé, le focus retourne automatiquement à l’élément qui a déclenché son ouverture, et les autres portions de la page redeviennent accessibles à la navigation au clavier.