Navigation au clavier

Pourquoi la navigation clavier ?

Certaines personnes ne peuvent pas utiliser une souris. Tremblements, paralysie partielle, troubles moteurs — elles naviguent sur le web uniquement avec le clavier.

Mais ce n'est pas tout. Les power users adorent le clavier pour aller vite. Les utilisateurs de lecteurs d'écran naviguent au clavier. Et beaucoup de testeurs d'accessibilité débrancher leur souris pour tester un site. Si rien ne fonctionne sans souris, le site a un problème majeur.

💡

Test rapide : débranche ta souris (ou ne la touche plus). Navigue sur ton site avec uniquement Tab, Shift+Tab et Entrée. Tu peux atteindre tous les éléments ? Tu sais toujours où tu es sur la page ? Si non, il y a des problèmes d'accessibilité à corriger.

Tab et Shift+Tab : les bases

La navigation clavier fonctionne avec quelques touches :

Raccourcis clavier de navigation

Tab — Passe à l'élément focusable suivant

Shift + Tab — Revient à l'élément focusable précédent

Entrée — Active un lien ou un bouton

Espace — Active un bouton, coche une case

Flèches — Navigue dans un menu, un groupe de radios, un select

Par défaut, les éléments focusables via Tab sont : <a href>, <button>, <input>, <select>, <textarea>. Tout ce qui est "inerte" (div, p, span) ne reçoit pas le focus par défaut.

✅

Encore une raison d'utiliser <button> plutôt que <div onclick>. Les boutons sont focusables via Tab nativement. Les divs ne le sont pas.

Le focus visible : ne jamais le supprimer

Quand un élément reçoit le focus (via Tab), le navigateur affiche un indicateur visuel. Par défaut, c'est un contour bleu (outline) autour de l'élément.

Beaucoup de designers trouvent ça "moche" et le suppriment avec CSS :

Supprimer le focus — ERREUR GRAVE

/* ✗ Ne JAMAIS faire ça : rend le site inutilisable au clavier */
* {
  outline: none;
}

/* ✓ À la place : personnalise le focus plutôt que de le supprimer */
:focus-visible {
  outline: 3px solid #be185d;
  outline-offset: 3px;
  border-radius: 4px;
}

⚠️

Supprimer outline: none sur tous les éléments est l'une des erreurs d'accessibilité les plus répandues. Sans indicateur de focus, les utilisateurs clavier sont perdus sur la page. C'est un critère WCAG AA obligatoire.

La pseudo-classe :focus-visible est parfaite pour ça : elle affiche le focus uniquement quand l'utilisateur navigue au clavier, pas quand il clique avec la souris. Win-win.

Tabindex : modifier l'ordre de focus

L'attribut tabindex permet de contrôler si et dans quel ordre un élément reçoit le focus.

tabindex — valeurs et effets

<!-- tabindex="0" : rend un élément focusable dans l'ordre naturel du DOM -->
<div role="button" tabindex="0">Mon bouton custom</div>

<!-- tabindex="-1" : focusable via JS (focus()), mais pas via Tab -->
<div tabindex="-1" id="modal-content">Contenu de la modale</div>

<!-- tabindex="1+" : DÉCONSEILLÉ — perturbe l'ordre naturel -->
<button tabindex="5">Mauvaise idée</button>

0️⃣

tabindex="0"

Rend un élément non-focusable nativement (div, span) focusable dans l'ordre naturel. Utilise avec role.

➖

tabindex="-1"

L'élément peut recevoir le focus via JavaScript (.focus()) mais est ignoré par Tab. Utile pour les modales.

🚫

tabindex="1+"

À éviter. Perturbe l'ordre naturel de navigation. Crée des expériences déroutantes. Utilise l'ordre du DOM à la place.

Le skip link : sauter au contenu principal

Imagine naviguer au clavier sur un site avec un menu de 30 liens. À chaque page, tu dois appuyer 30 fois sur Tab avant d'arriver au contenu. C'est épuisant et frustrant.

Le skip link (lien d'évitement) est un lien caché en haut de la page, visible seulement quand il reçoit le focus, qui permet de sauter directement au contenu principal.

Skip link — implémentation

<!-- Dans le HTML, tout en haut du body -->
<a href="#main-content" class="skip-link">
  Aller au contenu principal
</a>

<nav>...menu...</nav>

<main id="main-content">
  ...contenu...
</main>

Skip link — CSS

/* Caché visuellement, visible uniquement au focus */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: #0f172a;
  color: white;
  padding: 0.5rem 1rem;
  z-index: 999;
}

.skip-link:focus {
  top: 1rem;
}

✅

Le skip link est le premier Tab de ta page. Si tu appuies sur Tab sur un site bien construit, le premier élément à recevoir le focus devrait être "Aller au contenu principal". Essaie sur wikipedia.org ou gov.fr — tu verras.

Ordre de focus logique

L'ordre dans lequel Tab traverse les éléments doit suivre l'ordre visuel de la page. Haut → bas, gauche → droite (pour une lecture en français). Si le focus "saute" partout dans la page de façon incohérente, c'est un problème.

En général, si tu respectes l'ordre naturel du DOM (sans tabindex positifs), l'ordre de focus sera cohérent avec l'ordre visuel. Les problèmes apparaissent quand le CSS repositionne les éléments visuellement sans changer l'ordre dans le HTML.

// À retenir

Tab avance, Shift+Tab recule. Entrée et Espace activent. Tester sans souris = test d'accessibilité basique.
Ne JAMAIS supprimer outline: none globalement. Personnalise :focus-visible à la place.
tabindex="0" rend focusable. tabindex="-1" permet focus via JS. Évite tabindex positifs.
Le skip link permet de sauter le menu. Premier Tab de la page. Caché visuellement, visible au focus.
L'ordre de focus doit suivre l'ordre visuel logique de la page.