Pune mouse-ul deoparte și încearcă să folosești site-ul doar cu Tab, Shift+Tab, Enter, Space și săgețile. Pentru utilizatorii cu dizabilități motorii, pentru cei care folosesc cititoare de ecran și pentru utilizatorii de switch-uri, asta nu e un exercițiu: e singurul mod de a naviga. WCAG 2.1.1 cere ca toată funcționalitatea să fie disponibilă de la tastatură, iar 2.4.7 cere să vezi mereu unde te afli.
Cele cinci eșecuri clasice
Focus invizibil: cineva a scris outline: none în CSS și acum apeși Tab orbește, fără să știi unde ești. Elemente neatingibile: butoane din div-uri fără tabindex, care nu primesc niciodată focus. Capcane: ferestre modale din care Tab nu mai iese: criteriul 2.1.2 le interzice explicit. Ordine haotică: focusul sare imprevizibil prin pagină pentru că ordinea din DOM nu corespunde cu cea vizuală. Meniuri doar pe hover: submeniul apare la mouse-over, dar de la tastatură nu se deschide deloc.
Cum corectezi
Regula de aur: folosește elemente native. Un <button> și un <a href> primesc focus, răspund la Enter/Space și își anunță rolul gratuit. Pentru focus vizibil, definește un stil clar pe :focus-visible, un contur de 2-3 pixeli, contrastant, în loc să-l elimini. Pentru modale, mută focusul în fereastră la deschidere, ține-l acolo cât e deschisă și returnează-l la elementul declanșator la închidere; Escape trebuie să închidă mereu. Adaugă un skip link („Sari la conținut") ca prim element focusabil: criteriul 2.4.1.
Scannerul Wawsome detectează automat focusul suprimat, elementele interactive neatingibile și lipsa skip link-ului, iar widgetul oferă utilizatorilor un mod de evidențiere amplificată a focusului.