Aller au contenu principal
RGAA Consulting - Retour à l'accueil
Naviguer et se repérer

Focus visible : garder un repère pendant la navigation

Le focus visible repère le lien, bouton ou champ actif au clavier. Conservez le style natif ou fournissez un indicateur clairement perceptible.

Rédaction : RGAA Consulting · Références vérifiées le · RGAA 4.1.2

Le problème

Supprimer outline sans remplacement retire ce repère. Une bordure discrète ou masquée peut aussi laisser la personne appuyer sur Tab sans savoir quelle commande elle activera.

Exemple : mauvais et correct

Mauvais

button:focus {
  outline: none;
}

Correct

button:focus-visible {
  outline: 3px solid #1d4ed8;
  outline-offset: 3px;
}

Ce style ne supprime pas le focus natif des autres éléments. Les liens et champs doivent eux aussi rester repérables.

RGAA concerné

Les critères dépendent de l’élément, de son usage et des cas particuliers applicables. Voici les contrôles à examiner pour ce sujet.

  • Critère 10.7 — Rendre la prise de focus visible.
  • Critère 3.3 — Contraster les indicateurs concernés, hors cas particuliers.

Impact utilisateur

Sans repère, une personne au clavier peut déclencher la mauvaise action. Pour une personne malvoyante, l’indicateur doit ressortir sur les fonds réellement affichés.

Correction

  1. Retirez les règles effaçant le focus sans remplacement. Vérifiez un style perceptible sur tous les éléments interactifs et les fonds du site.
  2. Pour un indicateur personnalisé concerné par 3.3, atteignez 3:1 contre les couleurs adjacentes. Le style natif sans modification relève du cas particulier prévu par ce critère.
  3. Vérifiez overflow, en-têtes fixes et superpositions : ils peuvent couper ou masquer un indicateur pourtant présent dans le CSS.

Méthode de test

  1. Parcourez les composants avec Tab et Maj+Tab : chaque prise de focus doit être repérable.
  2. Mesurez le contraste de l’indicateur personnalisé dans ses états et contre les fonds adjacents.
  3. Zoomez près des éléments fixes et des bords : contrôle actif et indicateur doivent rester visibles.

Points de vigilance

  • Les 3 px de l’exemple sont un choix de conception, pas une épaisseur universellement imposée par le RGAA 4.1.2.
  • N’attribuez pas au RGAA 4.1.2 les exigences supplémentaires d’apparence du focus de WCAG 2.2.

Sources officielles

Le RGAA fournit les critères de contrôle. Les ressources du W3C et du WHATWG complètent les méthodes de mise en œuvre ; elles ne remplacent pas les tests RGAA.