WCAG 2.4.11 Focus neobstrucționat (minim)

Criteriul de succes 2.4.11 este nou în WCAG 2.2. El se asigură că utilizatorii de tastatură pot vedea efectiv elementul la care au ajuns, în loc ca focusul să dispară în spatele unui antet fix, al unui buton de chat sau al unui banner de cookie-uri. Este de nivelul AA și face parte din EN 301 549 (clauza 9.2.4.11). Legea 232/2022 se bazează pe standardul armonizat EN 301 549.

Ce cere criteriul

Când o componentă a interfeței primește focusul tastaturii, componenta nu este ascunsă în întregime de conținut creat de autor.

Puncte esențiale de la W3C:

• la nivelul AA, acoperirea parțială este acceptabilă — elementul nu trebuie să fie ascuns în întregime. Nivelul AAA (2.4.12 Focus neobstrucționat (sporit)) cere să nu fie ascunsă nicio parte;
• acolo unde utilizatorul poate muta conținutul (de exemplu, poate trage o bară de instrumente), se ia în considerare doar poziția inițială a acelui conținut;
• conținutul deschis de utilizator poate acoperi elementul cu focus; dacă utilizatorul îl poate face vizibil fără să mute focusul tastaturii (de exemplu, apăsând Esc pentru a închide o fereastră pop-up), elementul nu este considerat ascuns.

Greșeli tipice într-un magazin online

• un antet fix sau o bară „Adaugă în coș” care acoperă linkurile și butoanele pe măsură ce utilizatorul navighează cu Tab în josul paginii;
• un banner de consimțământ pentru cookie-uri fixat în partea de jos a ecranului, care ascunde linkurile din subsol și câmpurile de formular din spatele lui;
• un buton plutitor de chat sau „Înapoi sus” așezat peste câmpurile de finalizare a comenzii;
• o bară promoțională care glisează și acoperă elementul cu focus;
• un panou non-modal „Newsletter” care rămâne deschis în timp ce focusul se mută în spatele lui.

Cum se verifică

Automat: nu există o regulă axe-core pentru acest criteriu. Faptul că focusul este ascuns depinde de poziția de derulare și de straturile suprapuse în momentul focusului, pe care axe nu le testează, așa că este nevoie de o verificare manuală.

Manual: într-o fereastră de dimensiunea unui laptop și apoi la zoom de 200 %, parcurgeți cu Tab întreaga pagină cu bannerul de cookie-uri încă deschis, apoi din nou după ce l-ați închis. Urmăriți antetul fix, barele fixe „Adaugă în coș” și butoanele plutitoare. De fiecare dată când focusul ajunge pe un element, cel puțin o parte din el trebuie să fie vizibilă. Acordați atenție formularului de finalizare a comenzii și subsolului.

Cum se remediază

• Adăugați containerului care derulează scroll-padding-top (și scroll-padding-bottom) egal cu înălțimea barelor fixe, astfel încât elementele cu focus să ajungă într-o zonă liberă.
• Faceți bannerul de cookie-uri modal (focusul intră în el și rămâne acolo până la alegerea unei opțiuni) sau plasați-l astfel încât să nu acopere conținutul.
• Reduceți dimensiunea elementelor fixe pe ecranele mici și la zoom.
• Permiteți utilizatorilor să închidă widgeturile plutitoare cu Esc și de la tastatură.

Criterii conexe

• 2.4.7 Focus vizibil — indicatorul de focus trebuie să fie vizibil.
• 2.4.3 Ordinea focusului — focusul trebuie să se deplaseze într-o ordine logică.
• Lista de verificare WCAG 2.2 — ce mai este nou în WCAG 2.2.

Întrebări frecvente

Un antet fix încalcă WCAG 2.4.11?

Doar dacă acoperă complet un element care are focusul. Dacă o parte a elementului rămâne vizibilă, criteriul 2.4.11 (AA) este îndeplinit; criteriul AAA 2.4.12 cere să nu fie ascunsă nicio parte. De obicei, CSS scroll-padding rezolvă problema.

Un banner de cookie-uri încalcă criteriul 2.4.11?

Un banner de cookie-uri non-modal care ascunde complet elementul ce primește focusul nu îndeplinește criteriul. W3C descrie modalități de a evita acest lucru: faceți bannerul modal, astfel încât să preia focusul, folosiți scroll padding pentru ca elementele cu focus să rămână libere sau închideți bannerul când focusul îl părăsește.

Este 2.4.11 un criteriu nou în WCAG 2.2?

Da. Focus neobstrucționat (minim) a fost adăugat în WCAG 2.2 la nivelul AA, împreună cu Focus neobstrucționat (sporit) la nivelul AAA.