Navigation clavier et focus visible
Un site accessible au clavier permet de tout atteindre et d’activer avec Tab, Entrée et les flèches. C’est indispensable aux personnes qui n’utilisent pas la souris et à de nombreuses technologies d’assistance.
Les règles essentielles
- Ordre logique : l’ordre de tabulation suit l’ordre visuel et la source HTML ; évitez
tabindexpositif. - Focus visible : contraste d’au moins 3:1 avec l’arrière-plan ; ne supprimez jamais
outlinesans remplacement. - Lien d’évitement : premier élément focalisable, il mène au contenu principal.
- Pas de piège : on doit pouvoir quitter tout composant (modale, menu) au clavier, avec Échap si pertinent.
- Focus non masqué : un en-tête fixe ne doit pas recouvrir l’élément focalisé (WCAG 2.4.11).
Exemple de code
<a class="skip-link" href="#main-content">Aller au contenu principal</a>
<main id="main-content" tabindex="-1">…</main>
:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }
html { scroll-padding-top: 6rem; }Comment tester
Débranchez la souris. Parcourez la page avec Tab puis Maj+Tab. Vérifiez que chaque élément interactif est atteignable, que le focus est visible et que vous pouvez fermer chaque surcouche. Critères RGAA : 7.3, 10.7, 12.7, 12.8, 12.9.
Questions fréquentes
Faut-il utiliser tabindex ?
Utilisez surtout les éléments natifs. Limitez tabindex à 0 ou -1 ; les valeurs positives perturbent l’ordre naturel.
Un lien d’évitement est-il obligatoire ?
Le RGAA demande un mécanisme d’accès rapide au contenu (critère 12.7) ; le lien d’évitement est la solution la plus courante.