Ce este Focus-Visible?

Indicator vizual care arata ce element este selectat la navigarea cu tastatura

Definiție Focus-Visible

Focus visible (sau focus outline) este indicatorul vizual (de obicei un contur albastru) care arata utilizatorilor de tastatura ce element este selectat curent. Eliminarea focus outline-ului (outline: none) este un anti-pattern de accesibilitate grav: persoanele care navigheaza cu tastatura nu mai pot vedea unde sunt pe pagina. Solutia: :focus-visible in loc de :focus.

De ce contează Focus-Visible

Indicatorul de focus este echivalentul cursorului mouse-ului pentru utilizatorii de tastatura — fara el, navigarea devine ca si cum ai folosi un mouse invizibil, fara sa stii unde esti pe pagina. Eliminarea outline-ului de focus cu CSS (outline: none) este una dintre cele mai frecvente incalcari WCAG detectate de WebAIM Million, prezenta pe 86% din site-uri. Critieriul WCAG 2.4.7 cere explicit un indicator de focus vizibil.

Cum verifici Focus-Visible

SoftAudit analizeaza stylesheet-urile pentru reguli care elimina outline-ul pe :focus fara sa ofere un stil alternativ vizibil. Testul verifica ca elementele interactive (link-uri, butoane, input-uri) au un indicator de focus cu contrast minim 3:1 si o arie de vizibilitate suficienta conform WCAG 2.4.11.

Greșeli frecvente

Regula globala *:focus { outline: none } aplicata pentru a elimina "conturul urat albastru" este distructiva — afecteaza toti utilizatorii de tastatura si incalca direct WCAG. Alta greseala este stilizarea focus-ului doar cu schimbare de culoare (fara outline sau shadow), ceea ce nu este perceptibil de persoanele cu daltonism.

Bune practici

Foloseste pseudo-clasa :focus-visible in loc de :focus — aceasta aplica stilul doar cand navigarea este prin tastatura, nu si la click. Implementeaza un outline cu offset (outline: 2px solid #4A90D9; outline-offset: 2px) sau un box-shadow echivalent, cu un contrast minim de 3:1 fata de fundalul adiacent.