WCAG 2.4.3 Ordinea focusului

Criteriul de succes 2.4.3 se asigură că utilizatorii de tastatură și de cititoare de ecran întâlnesc elementele interactive ale paginii într-o ordine cu sens, astfel încât să înțeleagă pagina și să o poată folosi. Este de nivelul A și face parte din EN 301 549 (clauza 9.2.4.3). Legea 232/2022 se bazează pe standardul armonizat EN 301 549.

Ce cere criteriul

Dacă o pagină web poate fi parcursă secvențial (de exemplu, cu Tab), iar secvența de navigare afectează sensul sau funcționarea, componentele focalizabile primesc focusul într-o ordine care păstrează sensul și operabilitatea.

Ordinea focusului nu trebuie să copieze pixel cu pixel aranjarea vizuală. Criteriul nu este îndeplinit când ordinea face conținutul confuz sau imposibil de folosit. Printre greșelile documentate de W3C se numără:

• folosirea tabindex pentru a crea o ordine care strică sensul sau funcționarea;
• plasarea ferestrelor de dialog sau a meniurilor, în ordinea focusului, departe de controlul care le deschide.

Greșeli tipice într-un magazin online

• tabindex="1", "2" … pe elementele din antet, astfel încât focusul sare de colo-colo înainte de a ajunge la ordinea normală;
• un layout CSS (flexbox order, plasare în grid) care afișează „Adaugă în coș” lângă preț, dar îl pune ultimul în DOM, după recenzii și produse similare;
• o fereastră pop-up cu ghidul de mărimi sau cu vizualizarea rapidă adăugată la sfârșitul paginii, astfel încât focusul nu intră în ea, iar utilizatorul trebuie să parcurgă cu Tab toată pagina pentru a ajunge la ea;
• după închiderea panoului coșului, focusul sare în partea de sus a paginii în loc să revină la butonul coșului;
• câmpuri de finalizare a comenzii într-o ordine diferită de cea vizibilă (codul poștal înaintea străzii).

Cum se verifică

Automat: nu există o regulă axe-core pentru acest criteriu. Dacă o ordine „păstrează sensul” este o apreciere asupra paginii, așa că este nevoie de o verificare manuală. (Valorile pozitive ale tabindex sunt raportate de verificatorul nostru ca avertisment de bună practică, nu ca încălcare a criteriului 2.4.3.)

Manual: apăsați Tab din partea de sus a paginii și urmăriți indicatorul de focus. Se deplasează prin antet, conținutul principal și subsol într-o ordine logică? Pe paginile de produs: varianta, cantitatea, „Adaugă în coș”. Deschideți fiecare fereastră pop-up și fiecare panou lateral: focusul ar trebui să intre în ele, să rămână acolo cât sunt deschise și să revină la elementul declanșator la închidere. Completați formularul de finalizare a comenzii folosind doar Tab.

Cum se remediază

• Lăsați ordinea din DOM să urmeze ordinea vizuală și logică; evitați reordonarea prin CSS când aceasta schimbă sensul.
• Eliminați valorile pozitive ale tabindex; folosiți 0 pentru elementele focalizabile personalizate și -1 pentru elementele care primesc focusul prin script.
• La deschiderea unei ferestre de dialog, mutați focusul în ea; la închidere, readuceți focusul la elementul declanșator.
• Inserați conținutul dinamic (ferestre pop-up, mesaje de eroare) în DOM lângă controlul căruia îi aparține.

Criterii conexe

• 2.1.1 Tastatură — fiecare funcție trebuie să funcționeze de la tastatură.
• 2.4.7 Focus vizibil — utilizatorii trebuie să vadă unde se află focusul.
• 2.4.11 Focus neobstrucționat (minim) — elementele cu focus nu trebuie să fie ascunse.

Întrebări frecvente

Trebuie ca ordinea focusului să corespundă ordinii vizuale?

Nu exact. WCAG cere ca ordinea să păstreze sensul și operabilitatea. Diferențele mici sunt în regulă; salturile care fac un formular sau o fereastră de dialog confuză ori imposibil de folosit nu îndeplinesc criteriul.

Este un tabindex pozitiv o încălcare a WCAG?

Nu automat, dar W3C enumeră printre greșelile frecvente folosirea tabindex pentru a crea o ordine a focusului care strică sensul sau funcționarea. Valorile peste 0 duc aproape întotdeauna la acest lucru, așa că evitați-le.

Unde ar trebui să meargă focusul când se deschide o fereastră pop-up?

În fereastra pop-up, iar la închidere înapoi la butonul care a deschis-o. W3C enumeră ferestrele de dialog plasate departe de elementul care le declanșează în ordinea focusului ca o încălcare a criteriului 2.4.3.