Practică recomandată Prioritate: Grav
Ordinea de navigare cu tastatura este forțată într-o succesiune neașteptată
Unele elemente au tabindex cu o valoare mai mare decât 0, așa că primesc focus înaintea tuturor celorlalte când cineva parcurge pagina cu tasta Tab. Aceasta este o practică recomandată, dincolo de nivelul WCAG 2.2 AA.
Acest text a fost tradus automat și nu a fost încă verificat de un vorbitor nativ.
De ce contează pentru clienții tăi
Utilizatorii care navighează cu tastatura se așteaptă ca focusul să se miște în ordinea pe care o văd pe ecran. Cu tabindex peste 0, focusul sare de colo-colo, de exemplu de la logo direct la câmpul de newsletter și apoi înapoi la meniu, așa că oamenii se pierd și pot sări peste câmpuri importante la finalizarea comenzii.
Pe cine afectează
- utilizatorii care navighează cu tastatura
- utilizatorii de cititoare de ecran
- persoanele cu dizabilități motorii
Cum se remediază
Înlocuiți fiecare tabindex pozitiv cu tabindex="0" (ca elementul să primească focus la locul lui firesc) sau eliminați-l complet. Dacă ordinea tot pare greșită, schimbați ordinea elementelor în HTML ca să corespundă ordinii vizuale, în loc să o forțați cu tabindex. Folosiți tabindex="-1" doar pentru elementele care trebuie să primească focus dintr-un script.
În Shopify
De obicei provine din cod propriu în secțiunile temei sau dintr-o aplicație, de exemplu un pop-up sau un widget de chat. Căutați tabindex în codul temei și corectați-l în Liquid sau contactați dezvoltatorul aplicației.
În Shoptet (CZ)
Dacă provine din propriul cod inserat sau dintr-un widget terț, corectați acel cod; dacă provine din șablon, contactați echipa Shoptet sau un partener.
În PrestaShop
Verificați fișierele .tpl ale temei și șabloanele modulelor pentru valori tabindex mai mari decât 0 și suprascrieți șabloanele modulelor în temă, în loc să modificați modulele direct.
În WooCommerce
Este adăugat adesea de pluginuri de pop-up, formulare sau chat ori de temă. Căutați tabindex în codul sursă al paginii, corectați-l în tema copil sau raportați-l autorului pluginului.
Standarde
Nu este un criteriu WCAG, ci o practică recomandată care face site-ul mai ușor de folosit.
Verificare automată: regula axe-core tabindex.
dequeuniversity.com, github.com, www.w3.org