Quand on navigue au clavier sur votre site, voit-on clairement quel élément est actif à chaque instant ?
Critère officiel 10.7 — Dans chaque page web, pour chaque élément recevant le focus, la prise de focus est-elle visible ?
Pourquoi c'est important
Une personne qui navigue exclusivement au clavier doit toujours savoir où se trouve le focus. Si l'indicateur de focus est invisible — contour supprimé par le CSS pour des raisons esthétiques — elle navigue à l'aveugle sans savoir si elle est sur un lien, un bouton ou un champ de formulaire.
Exemples concrets
Ce qui est conforme
En naviguant à la touche Tab, chaque lien, bouton et champ de formulaire affiche un contour visible à la prise de focus — bordure bleue ou halo coloré clairement perceptible. L'utilisateur sait toujours où il se trouve sur la page.
Ce qui pose problème
Le thème a supprimé l'indicateur de focus natif du navigateur sans en proposer un autre. En naviguant au clavier, aucun élément ne se signale visuellement. La navigation est impossible sans la souris.
Comment agir
Test autonome : naviguez sur vos pages principales en utilisant uniquement la touche Tab. À chaque pression, un élément doit être visiblement mis en évidence. Si rien ne s'illumine, demandez à votre prestataire de restaurer le style de focus. Note : c'est la même exigence de base que pour la navigation clavier du critère 7.3 — le focus visible et la navigabilité au clavier forment un système cohérent.
Règles clés
- Ne jamais supprimer outline sans le remplacer par un style de focus explicite et visible.
- Utiliser :focus-visible pour cibler les utilisateurs clavier sans affecter les interactions souris — mais ne pas se limiter à :focus-visible si le support est insuffisant dans l'environnement de test.
- Le contour de focus doit avoir un ratio de contraste minimum de 3:1 par rapport au fond adjacent (critère 3.3 RGAA).
- WCAG 2.2 (futur RGAA) précise : la zone de focus doit avoir une aire minimale équivalente à un contour de 2px autour de la cible.
- Un changement de couleur de fond seul n'est pas suffisant si la couleur n'est pas le seul vecteur d'information (critère 3.1).
Erreurs fréquentes
- outline: none ou outline: 0 appliqué globalement sur :focus sans remplacement
- Indicateur de focus remplacé par un changement de couleur de fond imperceptible
- Focus visible uniquement en :focus-visible (ce qui est correct) mais le style est trop léger (contour 1px gris clair sur fond blanc)
- Reset CSS qui supprime tous les styles de focus (normalize.css mal configuré)
- Composants custom (boutons, liens stylisés) qui suppriment l'outline hérité sans en définir un nouveau
- Focus visible uniquement en :hover, pas en :focus
Exemples de code
suppression globale de l'outline
✗ Non conforme/* Reset CSS fréquent — DANGEREUX */
* {
outline: none;
}Supprime l'indicateur de focus sur tous les éléments de la page. La navigation clavier devient aveugle.
suppression globale avec remplacement incorrect
✗ Non conformea:focus {
outline: none;
color: #0066cc; /* changement de couleur seul */
}Le changement de couleur de texte seul n'est pas un indicateur de focus suffisant — il n'est pas perceptible par tous et ne répond pas au critère de zone minimale.
indicateur de focus accessible
✓ Conforme/* Approche recommandée : :focus-visible + fallback --*/
:focus-visible {
outline: 3px solid #005fcc;
outline-offset: 2px;
border-radius: 2px;
}
/* Fallback pour les navigateurs qui ne supportent pas :focus-visible */
:focus {
outline: 3px solid #005fcc;
outline-offset: 2px;
}Contour de 3px en couleur contrastée (bleu #005fcc sur blanc = ratio ~5.9:1, supérieur au minimum de 3:1). offset de 2px pour que le contour n'entre pas en collision avec le fond de l'élément.
focus sur composant custom
✗ Non conforme.btn-custom:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(0, 100, 200, 0.3); /* trop discret */
}Un box-shadow semi-transparent très léger n'est pas suffisamment contrasté pour être perceptible comme indicateur de focus.
focus sur composant custom
✓ Conforme.btn-custom:focus-visible {
outline: 3px solid #005fcc;
outline-offset: 3px;
}Outline opaque et contrasté. outline-offset crée un espace entre le bouton et le contour, améliorant la visibilité sur des fonds complexes.
Référence WCAG : 1.4.1, 2.4.7