Accesibilitate
Alt text, label-uri, tastatură și ARIA — doar cât trebuie.
Actualizat
Ce este accesibilitatea
Accesibilitatea (a11y — „a”, 11 litere, „y”) înseamnă că site-ul poate fi folosit de oricine:
- cu tastatura (fără mouse — mulți utilizatori avansați și oameni cu dizabilități motorii);
- cu screen reader (programul citește pagina cu voce tare — utilizatori nevăzători);
- cu zoom sau vedere slabă;
- cu daltonism, pe un ecran în soare, cu o mână ocupată.
Din 2025, în UE e și obligație legală pentru multe site-uri (European Accessibility Act). Bonus: ce e accesibil e mai ușor de testat automat și mai bine indexat.
Cum „vede” un screen reader pagina
Nu vede pixeli — citește arborele de accesibilitate, construit din HTML. Pentru fiecare element știe:
| Proprietate | Exemplu | De unde vine |
|---|---|---|
| rol | buton, link, titlu, listă | tag-ul (<button>) sau role |
| nume | „Închide” | textul, alt, <label>, aria-label |
| stare | apăsat, extins, dezactivat | disabled, aria-expanded, aria-pressed |
De-asta HTML-ul semantic e 80% din accesibilitate: <button>Salvează</button> are deja rol, nume și e focusabil.
Cele 6 reguli care acoperă majoritatea cazurilor
- HTML semantic —
button,a,nav,main,label. - Text alternativ —
<img alt="Descriere">; imagine decorativă →alt=""(gol, nu lipsă — altfel se citește numele fișierului). - Fiecare input are label —
<label for>sau, dacă nu ai loc vizual,aria-label. - Totul merge din tastatură — Tab ajunge peste tot, în ordine logică; focusul e vizibil (
:focus-visible). - Contrast — minim 4.5:1 pentru text normal, 3:1 pentru text mare (WCAG AA).
- Butoanele cu icon au nume —
<button aria-label="Închide">✕</button>.
ARIA — doar când HTML nu ajunge
ARIA = atribute care adaugă informații pentru tehnologii asistive. Prima regulă ARIA: nu folosi ARIA dacă există un element nativ.
<!-- ✗ trebuie să adaugi role, tabindex, handler pentru Enter și Space... -->
<div role="button" tabindex="0" onclick="save()">Salvează</div>
<!-- ✓ toate gratis -->
<button type="button">Salvează</button>Tipuri de atribute ARIA:
| Tip | Atribute | Exemplu de folosire |
|---|---|---|
| nume / descriere | aria-label, aria-labelledby, aria-describedby |
buton cu icon, mesaj de eroare legat de input |
| stare | aria-expanded, aria-pressed, aria-current, aria-invalid |
meniu deschis, toggle, pagina curentă, câmp greșit |
| regiuni vii | aria-live="polite" |
toast, erori care apar după submit |
| ascundere | aria-hidden="true" |
icon decorativ lângă text |
Link sau buton?
<a href> |
<button> |
|
|---|---|---|
| Ce face | duce undeva (schimbă URL-ul) | face ceva (submit, deschide, șterge) |
| Tastatură | Enter | Enter și Space |
| Click dreapta → tab nou | da | nu |
Cum testezi în 5 minute
- Folosește pagina doar cu Tab / Shift+Tab / Enter / Space / Esc.
- Chrome DevTools → Lighthouse → Accessibility.
- Zoom 200% — layout-ul nu trebuie să se rupă.
- macOS: VoiceOver (Cmd+F5) pentru 2 minute — revelator.
Pe scurt
- Screen reader-ul citește rol + nume + stare, din HTML.
- HTML semantic rezolvă majoritatea problemelor; ARIA doar completează.
- Tastatură, focus vizibil, contrast,
alt,label.