liquiddesign

Zasada 06

Fokus zawsze widoczny

Część użytkowników nie używa myszy z wyboru, część z konieczności. Usunięcie obrysu fokusa, bo psuje estetykę, odbiera im nawigację. Pseudoklasa :focus-visible pokazuje obrys tylko przy klawiaturze, więc nie ma już czego ukrywać.

Odłóż mysz i wciskaj Tab

Kliknij pierwszy przycisk po lewej i przechodź Tabem przez oba panele. Po lewej zgadujesz, gdzie jesteś, po prawej widzisz.

✕ outline usunięty

✓ focus-visible z obrysem

Reguły

  • Style fokusa definiuje :focus-visible, mysz nie widzi obrysu, klawiatura widzi zawsze.
  • Obrys ma kontrast co najmniej 3:1 do tła i odstęp outline-offset od elementu.
  • Kolejność Tab odpowiada kolejności wizualnej, bez tabindex większego od zera.
  • Nic nie usuwa outline bez podania widocznego zamiennika.

Wzorzec w kodzie

Jedna globalna reguła, dokładnie ta działa na tej platformie
:focus-visible {
  outline: 2px solid var(--color-glow-400);
  outline-offset: 2px;
  border-radius: 2px;
}
Antywzorzec i wzorzec: usuwać wolno tylko dając zamiennik
button:focus { outline: none; }

button:focus-visible {
  outline: 2px solid var(--kolor-akcentu);
  outline-offset: 2px;
}