WCAG 2.4.7 Focus vizibil

Criteriul de succes 2.4.7 asigură că utilizatorii de tastatură văd unde se află pe pagină. Fără un indicator de focus vizibil, apăsarea tastei Tab seamănă cu mișcarea unui mouse cu cursor invizibil: utilizatorii care văd, dar navighează cu tastatura — persoane cu dizabilități motorii, multe persoane cu vedere slabă, utilizatori avansați — nu își pot da seama ce link sau buton va reacționa. Este de nivelul AA și face parte din EN 301 549 (clauza 9.2.4.7); Legea 232/2022 se bazează pe standardul armonizat EN 301 549.

Ce cere criteriul

Orice interfață de utilizator operabilă de la tastatură are un mod de funcționare în care indicatorul de focus al tastaturii este vizibil.

În practică: ori de câte ori un element primește focusul de la tastatură, există un indicator vizibil — conturul implicit al browserului sau un stil propriu. Greșeli documentate:

• stiluri care elimină sau ascund indicatorul de focus (outline: none, outline: 0 sau un chenar care îl acoperă) fără un înlocuitor vizibil;
• scripturi care scot focusul de pe un element imediat ce acesta îl primește.

WCAG 2.2 a adăugat și 2.4.13 Aspectul focusului la nivelul AAA, cu reguli de dimensiune și contrast pentru indicator; la nivelul AA se cere doar vizibilitatea.

Greșeli tipice într-un magazin online

• o resetare în temă cu *:focus { outline: none; } pentru a ascunde inelul „urât” după clicurile cu mouse-ul;
• butoane și mostre de culoare cu un stil propriu care, la focus, schimbă culoarea doar foarte puțin;
• un inel de focus de aceeași culoare cu fundalul brandului, care dispare pe bannerele colorate;
• casete de bifat și butoane radio personalizate, la care câmpul real este ascuns, iar focusul lui nu apare pe înlocuitorul vizual;
• carduri de produs în care focusul ajunge pe un link suprapus invizibil.

Cum se verifică

Automat: nu există nicio regulă axe-core pentru acest criteriu. Dacă focusul este vizibil depinde de ce se schimbă pe ecran când un element primește focusul, iar axe nu compară acest lucru, așa că este nevoie de o verificare manuală.

Manual: apăsați Tab prin toată pagina, inclusiv antetul, meniul extins, filtrele, opțiunile produsului, panoul coșului, formularele și subsolul. La fiecare oprire trebuie să vedeți clar ce element are focusul. Verificați pe fundaluri deschise și închise și în ferestrele pop-up. Dacă indicatorul dispare, căutați în CSS regulile outline: none sau :focus.

Cum se remediază

• Nu eliminați niciodată conturul fără un înlocuitor. Folosiți :focus-visible pentru a afișa un inel puternic pentru utilizatorii de tastatură, păstrând curate clicurile cu mouse-ul.
• Un stil robust: :focus-visible { outline: 3px solid currentColor; outline-offset: 2px; } sau un inel în două culori care funcționează pe orice fundal.
• Afișați focusul pe partea vizibilă a controalelor personalizate (de exemplu, pe mostra de culoare stilizată, nu pe câmpul ascuns).
• Urmăriți un contrast de 3:1 față de culorile alăturate, ca inelul să se vadă ușor.

Criterii conexe

• 2.4.11 Focus neobstrucționat (minim) — elementul cu focus nu trebuie să fie ascuns în spatele altui conținut.
• 1.4.11 Contrast non-text — părțile vizuale ale controalelor au nevoie de un contrast de 3:1.
• 2.4.3 Ordinea focusului — focusul trebuie să se deplaseze într-o ordine logică.

Întrebări frecvente

Este outline: none o încălcare WCAG?

Încalcă 2.4.7 atunci când elimină indicatorul de focus și nimic altceva nu arată unde se află focusul. Eliminarea conturului implicit este în regulă dacă îl înlocuiți cu un stil propriu, clar vizibil.

Care este diferența dintre 2.4.7 Focus vizibil și 2.4.13 Aspectul focusului?

2.4.7 (nivelul AA) cere doar ca indicatorul de focus să fie vizibil. 2.4.13 Aspectul focusului (nivelul AAA, nou în WCAG 2.2) stabilește o dimensiune minimă și o schimbare de contrast de 3:1 pentru indicator.

Are nevoie indicatorul de focus de un contrast minim?

Nu în baza criteriului 2.4.7 în sine. Însă inelul de focus este o parte vizuală a unui control, așa că 1.4.11 Contrast non-text (3:1) este relevant, iar un indicator pe care practic nu îl vede nimeni nu face focusul vizibil.