Erori frecvente de accesibilitate web și cum se repară
Cele mai des întâlnite probleme detectate de axe-core (motorul folosit și de Chrome DevTools, Google Lighthouse, și de Semnal) — cu exemplu concret de cod, nu doar teorie.
1. Imagini fără text alternativ
Cea mai frecventă eroare găsită pe web. Un cititor de ecran nu poate "vedea" o imagine —
dacă nu are un atribut alt, anunță doar "imagine", fără niciun context. Pentru
cineva care navighează cu cititor de ecran, o pagină plină de "imagine, imagine, imagine"
e inutilizabilă.
Dacă imaginea e pur decorativă (nu adaugă informație), folosește alt="" —
gol, dar prezent — ca s-o sară cititorul de ecran, nu s-o citească pe litere din numele fișierului.
2. Câmpuri de formular fără etichetă
Un placeholder nu e etichetă. Dispare imediat ce utilizatorul începe să scrie, iar unele
cititoare de ecran nici nu-l anunță. Fără un <label> legat corect,
cineva care navighează cu tastatura sau cititor de ecran nu știe ce trebuie să introducă
în câmp.
3. Contrast insuficient între text și fundal
WCAG 2.1 AA cere minimum 4.5:1 pentru text normal și 3:1 pentru text mare (18px+ bold, sau 24px+ normal). Textul gri deschis pe fundal alb, la modă în multe design-uri "minimaliste", pică des acest test — și e greu de citit pentru oricine cu vedere slabă, nu doar pentru cei cu dizabilități vizuale diagnosticate.
5. Link-uri fără text descriptiv
"Click aici" sau "citește mai mult" nu spun nimic dacă un cititor de ecran le citește izolat, în afara contextului paragrafului — și mulți utilizatori navighează exact așa, listând toate link-urile de pe pagină deodată.
6. Pagina fără atributul lang
Fără lang="ro" pe eticheta <html>, un cititor de ecran nu
știe ce pronunție să folosească și poate citi tot textul cu accent greșit — o pagină în
română citită cu pronunție engleză e practic neinteligibilă.
Astea sunt doar 6 din zecile de reguli WCAG 2.1 AA verificate automat.
Scanează-ți site-ul gratuit cu Semnal →