Prijeđi na sadržaj
Percelia
Prijava

Tutorial

Kako izraditi vidljiv indikator fokusa

Ukratko

Nikad ne uklanjaj prsten fokusa bez zamjene. Koristi :focus-visible da korisnicima tipkovnice prikažeš jasan prsten bez pojavljivanja pri svakom kliku miša. Indikator treba najmanje 3:1 kontrasta prema okolini; outline-offset daje mu vidljiv razmak.

Ukratko po koracima

  1. Ukloni outline: none

    Potraži u CSS-u outline: none ili outline: 0 i zamijeni ga pravim indikatorom.

  2. Koristi :focus-visible

    Oblikuj prsten preko :focus-visible da se prikaže pri fokusu tipkovnicom, ali ne pri kliku miša.

  3. Osiguraj kontrast

    Odaberi boju prstena s najmanje 3:1 prema okolini (1.4.11).

  4. Dodaj razmak

    Postavi outline-offset da se prsten ne stopi s rubom elementa.

Tko stranicu koristi tipkovnicom, uvijek mora vidjeti gdje je fokus. Upravo to uklanja outline: none. To je vjerojatno najštetnija jedna linija u mnogim stilovima, često dodana jer se zadani prsten smatra ružnim. Rješenje nije uklanjanje, nego zamjena.

Problem

Prije: nije pristupačnoCSS
/* Entfernt den Fokus-Ring komplett -> Tastaturnutzer sind verloren */
*:focus {
  outline: none;
}

button:focus {
  outline: 0;
}

Bez vidljivog fokusa korisnik prolazi kroz stranicu naslijepo: ne zna koji je gumb ili poveznica aktivan. To pada na 2.4.7 (Fokus vidljiv).

Rješenje: :focus-visible uz kontrast

:focus-visible prikazuje prsten samo kad preglednik prepozna interakciju tipkovnicom, ne pri svakom kliku miša. Dobivaš uredan izgled koji dizajneri žele bez napuštanja korisnika tipkovnice.

Poslije: pristupačnoCSS
/* Kein Ring bei Maus-Klick, klarer Ring bei Tastatur-Fokus */
:focus-visible {
  outline: 3px solid #1d4ed8;   /* >= 3:1 zur Umgebung (1.4.11) */
  outline-offset: 2px;          /* Abstand, damit der Ring nicht im Element verschwindet */
  border-radius: 2px;
}

/* Fallback fuer aeltere Browser ohne :focus-visible:
   Ring zeigen, aber wieder ausblenden, sobald :focus-visible unterstuetzt wird */
:focus {
  outline: 3px solid #1d4ed8;
  outline-offset: 2px;
}
:focus:not(:focus-visible) {
  outline: none;
}
  • Kontrast: prsten treba najmanje 3:1 prema susjednoj boji (1.4.11). Plava (#1d4ed8) na bijeloj to ispunjava.
  • Debljina i razmak: najmanje 2px debljine uz outline-offset drži prsten zamjetljivim i na obojenim površinama.
  • Ne prekrivaj: ljepljiva zaglavlja ili banneri za kolačiće ne smiju prekriti fokusirani element (2.4.11 Fokus nije zaklonjen, WCAG 2.2).

Testiranje

  1. Ne klikni nigdje, pritisni samo Tab: svaki zaustavni korak mora prikazati jasno vidljiv prsten.
  2. Provjeri interaktivne elemente na obojenoj pozadini: prsten mora ostati vidljiv i ondje.
  3. Skrolaj s otvorenim ljepljivim zaglavljem: fokusirani element ne smije nestati iza njega.

Povezani WCAG kriteriji

Česta pitanja

Zašto :focus-visible umjesto :focus?
:focus bi prikazao prsten i pri svakom kliku miša, što smeta mnogim dizajnerima i vodi do štetnog outline: none. :focus-visible prikazuje prsten samo pri interakciji tipkovnicom i rješava sukob.
Je li promjena boje dovoljna kao indikator fokusa?
Samo ako je promjena dovoljno velika i jakog kontrasta. Sama promjena boje često pada na 1.4.1 (samo boja) ili na 3:1 kontrast. Prsten preko outline sigurniji je izbor.
Smijem li prsten prilagoditi zaobljenim kutovima?
Da, outline automatski prati border-radius. Pomoću outline-offset možeš dodatno kontrolirati razmak.

Zatražite besplatno skeniranje

Recite nam svoju domenu — provodimo besplatno početno skeniranje i pokazujemo najvažnije prepreke.

Pokrenite besplatno skeniranje
← Natrag na tutorijale