Dans chaque page web, pour chaque élément recevant le focus, la prise de focus est-elle visible ?
Un utilisateur qui navigue au clavier — parce qu’il ne peut pas utiliser une souris, ou parce qu’il préfère simplement ne pas s’en servir — doit savoir à tout moment où il se trouve sur la page. Sans indicateur de focus visible, il appuie sur Tab, rien ne change visuellement, et il ne sait pas quel lien ou quel bouton est actif. C’est une exclusion totale.
Le critère 10.7 impose que chaque élément focusable affiche un indicateur visuel clair au moment où il reçoit le focus. Cet indicateur peut être un contour, un changement de fond, ou les deux — mais il doit être suffisamment contrasté par rapport à l’arrière-plan adjacent : ratio de contraste ≥ 3 :1. Ce seuil s’applique à la couleur de l’indicateur lui-même, pas au contraste du texte de l’élément.
Concrètement, vérifiez tous les éléments atteignables par Tab : liens, boutons, champs de formulaire, listes déroulantes, et tout élément portant un attribut tabindex. Naviguez dans la page avec la seule touche Tab et observez : l’indicateur de focus est-il visible ? Est-il suffisamment contrasté ?
Pour l’implémentation, la pseudo-classe CSS :focus-visible est l’approche recommandée : elle affiche l’indicateur uniquement lors d’une navigation clavier, sans perturber l’apparence au clic souris. Son support navigateur est désormais très satisfaisant.
Un test pour s'assurer que l'indicateur de focus est toujours visible
Indicateur de focus visible et contrasté
- Listez tous les éléments focusables de la page :
- Éléments natifs : liens (
<a href>), boutons (<button>), champs (<input>,<select>,<textarea>), et autres contrôles de formulaire. - Éléments non natifs portant un attribut
tabindexdont la valeur est ≥ 1.
- Éléments natifs : liens (
- Naviguez dans la page en utilisant uniquement la touche Tab (et Maj+Tab pour revenir en arrière) — sans toucher à la souris.
- À chaque prise de focus, vérifiez qu’un indicateur visuel est présent : contour visible, changement de couleur de fond, ou combinaison des deux.
- Mesurez le contraste entre l’indicateur de focus (couleur du contour ou du fond modifié) et l’arrière-plan adjacent : le ratio doit être ≥ 3 :1.
- Si tous les éléments affichent un indicateur visible et suffisamment contrasté, le test est validé. Un seul élément sans indicateur conforme suffit à le faire échouer.
Exemples
❌ Non conforme : Suppression du focus sans alternative
<style>
/* Reset CSS qui efface le focus sur toute la page */
*:focus {
outline: none;
}
</style>
<nav>
<a href="/accueil">Accueil</a>
<a href="/services">Services</a>
<a href="/contact">Contact</a>
</nav>
<form>
<label for="email">Adresse e-mail</label>
<input type="email" id="email" name="email">
<button type="submit">S’inscrire</button>
</form>C’est l’erreur la plus fréquente en audit. Le sélecteur *:focus { outline: none } supprime l’indicateur de focus sur absolument tous les éléments de la page. L’utilisateur qui navigue au clavier ne voit aucune indication visuelle de sa position. Le critère 10.7.1 échoue pour l’intégralité de la page en un seul bloc CSS.
✅ Conforme : Indicateur de focus personnalisé et contrasté avec :focus-visible
<style>
/* `:focus-visible` : uniquement en navigation clavier */
a:focus-visible,
button:focus-visible {
outline: 3px solid #0054AE;
outline-offset: 3px;
border-radius: 2px;
}
input[type="email"]:focus-visible,
input[type="text"]:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid #0054AE;
outline-offset: 2px;
background-color: #EBF3FF;
}
</style>
<nav>
<a href="/accueil">Accueil</a>
<a href="/services">Services</a>
</nav>
<form>
<label for="email">Adresse e-mail</label>
<input type="email" id="email" name="email">
<button type="submit">S’inscrire</button>
</form>:focus-visible garantit l’indicateur en navigation clavier uniquement — les utilisateurs souris ne voient pas de contour au clic. Le bleu #0054AE sur fond blanc atteint un ratio de contraste de 4,6 :1, supérieur au seuil de 3 :1 requis. L’outline-offset crée un espace visuel entre l’élément et son contour, ce qui améliore la lisibilité même sur des fonds colorés.
Astuces et pièges
⚠️ outline: none dans les resets CSS globaux
Dans la majorité des audits, la même cause revient : un développeur a supprimé le focus pour des raisons esthétiques, ou un reset CSS (Normalize, Meyer Reset) l’a effacé sans que personne ne le remarque. Vérifiez dès le début de l’audit si une règle *:focus { outline: none } ou a:focus { outline: 0 } est présente dans les feuilles de styles globales — c’est souvent là que tout se joue.
💡 Préférez :focus-visible à :focus
:focus s’applique dès qu’un élément reçoit le focus, que ce soit par clavier ou par clic souris. :focus-visible est actif uniquement en navigation clavier. Résultat : les utilisateurs souris ne voient pas de contour au clic (expérience préservée), et les utilisateurs clavier voient toujours l’indicateur (accessibilité garantie). Le support navigateur est aujourd’hui très bon, et c’est ll’approche recommandée.
⚠️ Un indicateur visible mais sous le seuil de contraste
Le critère ne demande pas seulement que le focus soit visible — il exige un ratio ≥ 3 :1 entre l’indicateur et l’arrière-plan adjacent. Un contour gris clair (#aaaaaa) sur fond blanc donne un ratio de 2,3 :1 : visuellement présent, mais non conforme. Mesurez toujours avec un outil dédié comme Includdy ou les DevTools du navigateur avant de valider.
⚠️ Les composants custom avec tabindex="0"
Un <div tabindex="0"> ou un <span role="button" tabindex="0"> reçoit le focus au clavier comme un élément natif, mais certains navigateurs n’appliquent aucun style de focus par défaut sur ces éléments. Si votre interface utilise des composants ARIA personnalisés — menus déroulants, accordéons, onglets — stylisez explicitement leur état :focus-visible. Le test 10.7.1 couvre les éléments avec tabindex ≥ 1, mais en pratique, tout élément atteignable par clavier doit être traité.
⚠️ tabindex="-1" hors périmètre du test
Un élément avec tabindex="-1" ne peut pas être atteint par la touche Tab : il n’entre pas dans le périmètre du test 10.7.1. Ce mécanisme est courant pour gérer le focus par script — par exemple, renvoyer le focus à l’ouverture d’une modale. Ces éléments n’ont pas besoin d’un indicateur de focus visible au titre de ce critère.
Questions fréquentes
Comment remplacer outline: none par box-shadow tout en respectant le critère RGAA 10.7 ?
Oui, à condition que le box-shadow soit suffisamment contrasté : ratio ≥ 3 :1 entre la couleur de l’ombre et l’arrière-plan adjacent. Le test 10.7.1 accepte tout indicateur visuel — contour, fond, ombre portée — tant qu’il est présent et mesurable. Mesurez la couleur du box-shadow contre le fond de la page, pas contre la couleur de l’élément lui-même.
Comment auditer le critère RGAA 10.7 sur la visibilité du focus ?
Posez votre souris et naviguez dans la page uniquement avec Tab. Vous devez voir à tout moment où vous vous trouvez. Si vous « perdez » le focus visuellement à un moment — l’indicateur disparaît ou devient imperceptible — le critère échoue. Complétez ensuite avec un outil de mesure de contraste pour valider le ratio ≥ 3 :1 sur chaque indicateur observé.
Pourquoi le RGAA 10.7 échoue-t-il si souvent malgré le focus natif des navigateurs ?
Les navigateurs modernes affichent bien un focus par défaut, mais les feuilles de styles projets l’effacent régulièrement — reset CSS ou règle :focus { outline: none } ajoutée pour des raisons esthétiques. C’est la cause quasi systématique d’échec au critère 10.7. La règle d’or : ne supprimez jamais le focus sans le remplacer par un indicateur au moins aussi visible.
Quelle est la différence entre le RGAA 10.7 et le WCAG 2.4.7 ?
WCAG 2.4.7 Focus Visible (niveau AA) demande que le focus clavier soit visible, sans préciser de seuil de contraste. Le RGAA 10.7 va plus loin : il exige que l’indicateur atteigne un ratio ≥ 3 :1. Un indicateur conforme à WCAG 2.4.7 peut donc ne pas l’être au regard du RGAA si son contraste est insuffisant.
Pourquoi un fond coloré seul ne suffit pas comme indicateur de focus selon le RGAA 10.7 ?
Oui. Le test 10.7.1 accepte explicitement un changement de fond comme unique indicateur, sans contour obligatoire. La condition : que le contraste entre la couleur de fond au repos et la couleur de fond au focus soit ≥ 3 :1. Combiner fond et contour reste la meilleure pratique pour les utilisateurs à faible vision, car les deux signaux se renforcent.