Explorer
KNOW-PAT-118

Web UI/UX - Focus Visible Accessibility Rings : outline accent, offset 2px, tous les interactifs

Domaine
web-uiux
Type
pattern
Priorité
P1

Parent : [[INDEX-WEB-UIUX]]

Web UI/UX - Focus Visible Accessibility Rings : outline accent, offset 2px, tous les interactifs

Problème

Une IA génère des boutons et inputs sans :focus-visible → impossible de naviguer au clavier. Ou pire, un outline: none partout rend le site inaccessible.

Solution

Règle CSS globale :focus-visible avec outline accent + outline-offset: 2px sur TOUS les éléments interactifs. Jamais de outline: none sans remplacement.

/* globals.css - ligne unique qui règle tout */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

Points clés

  1. :focus-visible pas :focus : le ring n'apparaît que pour le clavier, pas au clic souris
  2. outline pas box-shadow : outline ne déforme pas le layout, ne trigger pas de repaint
  3. outline-offset: 2px : espace entre l'élément et le ring → visible même sur fond foncé
  4. 2px solid : épaisseur suffisante pour être visible, pas trop grosse pour être moche
  5. var(--accent) : couleur du design system, cohérente avec le reste de l'UI

Exemple incorrect (à JAMAIS faire)

/* ❌ ACCESSIBILITÉ CASSÉE */
button:focus { outline: none; }
input:focus { outline: none; }

Exemple correct (variantes avancées)

/* Variante avec border-radius suivant l'élément */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: inherit; /* Suit le border-radius du parent */
}

/* Éléments spécifiques qui ont besoin d'un traitement différent */
[role="switch"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px; /* Plus d'espace pour les toggles */
}

Pourquoi

  • WCAG 2.1 AA : les éléments interactifs doivent avoir un indicateur de focus visible
  • Navigation clavier : les utilisateurs sans souris doivent savoir où ils sont
  • :focus-visible : moderne, ne dérange pas les utilisateurs souris

Quand l'utiliser

  • ABSOLUMENT sur tout nouveau projet
  • Refonte accessibilité

Quand NE PAS l'utiliser

  • Jamais. Il y a TOUJOURS une bonne raison d'avoir un focus visible.

Références

  • ProjectAlpha/globals.css L147-151
  • WCAG 2.1 Focus Visible (Success Criterion 2.4.7)