← Înapoi la Semnal
RO IT EN

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 (image-alt) 2. Câmpuri de formular fără etichetă (label) 3. Contrast insuficient text/fundal (color-contrast) 4. Butoane fără nume accesibil (button-name) 5. Link-uri fără text descriptiv (link-name) 6. Pagină fără atributul lang (html-has-lang)
axe-core: image-alt

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ă.

Greșit
<img src="echipa-noastra.jpg">
Corect
<img src="echipa-noastra.jpg" alt="Echipa Semnal la sediul din Porto Viro">

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.

axe-core: label

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.

Greșit
<input type="email" placeholder="Emailul tău">
Corect
<label for="email">Emailul tău</label> <input type="email" id="email">
axe-core: color-contrast

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.

Greșit — raport 2.3:1
color: #999999; background: #ffffff;
Corect — raport 4.6:1
color: #595959; background: #ffffff;
axe-core: button-name

4. Butoane fără nume accesibil

Un buton cu doar o iconiță (ex: un X pentru "închide", o lupă pentru "caută") e mut pentru un cititor de ecran dacă nu are text vizibil sau aria-label. Utilizatorul aude doar "buton", fără să știe ce face.

Greșit
<button><svg>...</svg></button>
Corect
<button aria-label="Închide fereastra"><svg>...</svg></button>
axe-core: html-has-lang

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ă.

Greșit
<html>
Corect
<html lang="ro">

Astea sunt doar 6 din zecile de reguli WCAG 2.1 AA verificate automat.

Scanează-ți site-ul gratuit cu Semnal →

© 2026 semnal.cloud. Toate drepturile rezervate.