Scan gratuit

Corriger « Prise de focus invisible » en HTML

Pourquoi c'est un problème

Une personne qui navigue au clavier doit voir en permanence où elle se trouve. Un « outline: none » posé pour des raisons esthétiques efface ce repère : chaque Tab déplace le focus sans que rien ne bouge à l'écran. Notre contrôle focalise les premiers éléments interactifs de la page et signale le cas où aucun n'affiche de contour ni d'ombre au focus.

Comment corriger — HTML

Ne supprimez jamais le contour de focus sans le remplacer. Avec :focus-visible, il n'apparaît qu'à la navigation clavier, pas au clic : c'était la raison habituelle de le retirer. Si votre focus passe par un autre style (bordure, fond), le contrôle ne le voit pas : vérifiez à la main en tabulant dans la page.

À éviter
<style>
  a:focus, button:focus { outline: none; }
</style>
Correct
<style>
  /* Visible au clavier, discret à la souris */
  a:focus-visible, button:focus-visible {
    outline: 3px solid #171e19;
    outline-offset: 2px;
  }
</style>

Vérifiez votre site en 30 secondes

Conformly détecte ce type de problème sur toutes vos pages, en continu, et vous alerte à chaque régression.

Scan gratuit

Autres corrections