Bazele accesibilitatii web — Construieste site-uri pentru toata lumea

Peste un miliard de oameni din lume traiesc cu o forma de dizabilitate. Aceasta reprezinta aproximativ 15% din populatia globala. Printre ei se numara persoane nevazatoare sau cu deficiente de vedere, persoane surde sau cu deficiente de auz, persoane cu dizabilitati motorii, diferente cognitive sau afectiuni temporare precum un brat rupt sau o migrena.

Cand construim site-uri web fara a tine cont de aceste realitati, nu facem lucrurile doar incomode. Blocam oamenii de la informatii, servicii si oportunitati pe care altii le considera de la sine intelese. Accesibilitatea nu este o functionalitate. Este o responsabilitate.

Ce inseamna accesibilitatea web

Accesibilitatea web inseamna proiectarea si dezvoltarea site-urilor web astfel incat persoanele cu dizabilitati sa le poata percepe, intelege, naviga si interactiona cu ele. Inseamna de asemenea ca pot contribui la web.

Nu este vorba doar despre cititoarele de ecran. Accesibilitatea acopera:

• Vizuale: cecitate, vedere slaba, daltonism
• Auditive: surditate, hipoacuzie
• Motorii: control motor fin limitat, tremuraturi, paralizie
• Cognitive: dislexie, ADHD, dificultati de memorie, dificultati de invatare
• Temporare si situationale: un incheietura rupta, lumina puternica a soarelui pe ecran, un mediu zgomotos, internet lent

Ideea cheie este ca designul accesibil aduce beneficii tuturor. Subtitrairile ajuta intr-o camera zgomotoasa. Contrastul ridicat ajuta in lumina puternica. Navigarea cu tastatura ajuta utilizatorii avansati. Limbajul clar ajuta vorbitorii non-nativi. Accesibilitatea nu este un mod special — este design bun.

Standardul WCAG

Web Content Accessibility Guidelines (WCAG) reprezinta standardul international pentru accesibilitatea web, publicat de W3C. Versiunea actuala este WCAG 2.2, organizata in jurul a patru principii cunoscute sub acronimul POUR:

Perceptibil (Perceivable)

Informatia trebuie sa poata fi prezentata in moduri pe care toti utilizatorii le pot percepe.

• Alternative text: fiecare imagine are nevoie de un atribut alt care sa descrie continutul sau. Imaginile decorative folosesc alt="".
• Subtitrari si transcrieri: continutul video necesita subtitrari; continutul audio necesita transcrieri.
• Structura adaptabila: continutul trebuie sa aiba sens cand stilurile sunt eliminate. Foloseste HTML semantic (<h1>, <nav>, <main>, <article>), nu doar stilizare vizuala.
• Continut distinguibil: contrast de culoare suficient, text scalabil, nicio informatie transmisa doar prin culoare.

Operabil (Operable)

Utilizatorii trebuie sa poata opera interfata.

• Accesibil de la tastatura: fiecare element interactiv trebuie sa fie accesibil si utilizabil doar cu tastatura. Fara capcane de mouse.
• Timp suficient: daca continutul are limite de timp, utilizatorii trebuie sa le poata extinde sau dezactiva.
• Fara declansatori de convulsii: evita continutul care clipeste de mai mult de trei ori pe secunda.
• Navigabil: titluri de pagina clare, structura logica a titlurilor, linkuri de navigare rapida, indicatori de focus vizibili.

Inteligibil (Understandable)

Continutul si interfata trebuie sa fie inteligibile.

• Text lizibil: specifica limba paginii (atributul lang). Foloseste un limbaj clar si simplu cand este posibil.
• Comportament previzibil: navigarea trebuie sa fie consistenta. Paginile nu trebuie sa schimbe contextul in mod neasteptat.
• Asistenta la introducerea datelor: eticheteza campurile de formular clar. Ofera mesaje de eroare utile care explica ce a mers gresit si cum se poate remedia.

Robust (Robust)

Continutul trebuie sa fie suficient de robust pentru a functiona cu tehnologiile actuale si viitoare.

• HTML valid: markup semantic corect pe care tehnologiile asistive il pot interpreta in mod fiabil.
• Nume, rol, valoare: componentele personalizate trebuie sa isi expuna scopul catre API-urile de accesibilitate (prin ARIA cand este necesar).

Niveluri de conformitate

WCAG defineste trei niveluri:

Majoritatea legislatiei la nivel mondial cere conformitatea cu nivelul AA. Acesta este nivelul catre care ar trebui sa tintesti.

Bariere comune si cum sa le rezolvi

Text alt lipsa pe imagini

Problema: utilizatorii de cititoare de ecran aud "imagine" sau nimic.

Solutia: adauga text alt descriptiv la fiecare imagine informativa. Pentru imaginile decorative, foloseste alt="" pentru ca cititoarele de ecran sa le ignore.

<!-- Bine -->
<img
  src="chart.png"
  alt="Grafic cu bare care arata o crestere de 40% a vanzarilor din ianuarie pana in iunie 2025"
/>

<!-- Decorativ -->
<img src="divider.svg" alt="" />

Contrast de culoare insuficient

Problema: persoanele cu vedere slaba sau daltonism nu pot citi textul.

Solutia: asigura un raport minim de contrast de 4,5:1 pentru text normal si 3:1 pentru text mare (18px+ sau 14px bold). Foloseste un instrument de verificare a contrastului pentru a valida combinatiile de culori.

Etichete de formular lipsa

Problema: utilizatorii de cititoare de ecran nu stiu la ce serveste un camp de formular.

Solutia: fiecare camp de intrare are nevoie de un element <label> vizibil, legat prin atributul for.

<!-- Bine -->
<label for="email">Adresa de email</label>
<input type="email" id="email" name="email" />

<!-- Gresit: placeholderul nu este o eticheta -->
<input type="email" placeholder="Adresa de email" />

Fara navigare cu tastatura

Problema: utilizatorii care nu pot folosi un mouse sunt blocati.

Solutia: foloseste elemente HTML native (<button>, <a>, <select>) care sunt accesibile de la tastatura in mod implicit. Daca construiesti componente personalizate, asigura-te ca sunt focalizabile si raspund la evenimentele de tastatura. Nu elimina niciodata contururile de focus fara a oferi o alternativa.

Structura paginii lipsa

Problema: utilizatorii de cititoare de ecran nu pot naviga eficient.

Solutia: foloseste HTML semantic. Un singur <h1> pe pagina, ierarhie logica a titlurilor (nu sari peste niveluri), repere (<nav>, <main>, <footer>).

Redare automata a mediilor

Problema: sunetul neasteptat deranjeaza utilizatorii de cititoare de ecran. Redarea automata a videourilor poate declansa convulsii sau cauza disconfort.

Solutia: nu reda niciodata sunet automat. Daca un video se reda automat, asigura-te ca nu are sunet implicit si ofera controale de pauza.

Culoarea nu este suficienta

Nu te baza niciodata pe culoare ca singura modalitate de a transmite informatii. Ia in considerare:

• Un camp de formular cu chenar rosu pentru erori are nevoie si de o pictograma de eroare sau un mesaj text
• Un grafic cu linii colorate are nevoie si de modele, etichete sau o legenda
• Un link in textul curent are nevoie de subliniere sau un alt indiciu vizual, nu doar o schimbare de culoare

Aproximativ 8% dintre barbati si 0,5% dintre femei au o forma de deficienta a vederii culorilor. Proiectarea tinand cont de acest lucru nu este un caz special — este incluziune de baza.

Testarea accesibilitatii

Testare automata

Instrumentele automate detecteaza aproximativ 30-40% din problemele de accesibilitate. Sunt un prim pas bun, nu o solutie completa.

• axe DevTools (extensie de browser) — scaneaza o pagina si raporteaza incalcarile WCAG
• Lighthouse (integrat in Chrome DevTools) — include un audit de accesibilitate
• WAVE (instrument web) — suprapunere vizuala care arata problemele

Testare manuala

Multe probleme de accesibilitate necesita judecata umana:

• Testare cu tastatura: deconecteaza mouse-ul si navigheaza intregul site cu Tab, Enter, Escape si tastele sageata. Poti ajunge peste tot? Este ordinea de focus logica?
• Testare cu cititor de ecran: incearca VoiceOver (Mac), NVDA (Windows, gratuit) sau TalkBack (Android). Are sens continutul citit cu voce tare?
• Testare cu zoom: mareste browserul la 200%. Functioneaza layout-ul in continuare? Este vreun continut decupat sau suprapus?
• Miscare redusa: activeaza "reduce miscare" in setarile sistemului de operare. Respecta animatiile aceasta preferinta?

Testare cu utilizatori

Cel mai valoros feedback vine de la persoanele care folosesc efectiv tehnologii asistive in viata lor de zi cu zi. Daca bugetul permite, include utilizatori cu dizabilitati in procesul de testare.

Accesibilitatea este un spectru, nu o caseta de bifat

Accesibilitatea nu este un proiect unic cu o linie de sosire. Este o practica continua. Site-urile web se schimba, se adauga continut si noi bariere pot aparea cu fiecare actualizare.

Obiectivul nu este perfectiunea. Obiectivul este imbunatatirea continua si grija autentica pentru oamenii care folosesc ceea ce construiesti. Incepe cu schimbarile cu cel mai mare impact — contrastul culorilor, textul alt, navigarea cu tastatura, etichetele de formular — si construieste de acolo.

Fiecare bariera pe care o elimini este o usa pe care o deschizi.

Lista rapida de verificare

• Toate imaginile au text alt semnificativ (sau alt="" daca sunt decorative)
• Contrastul de culoare respecta WCAG AA (4,5:1 pentru text, 3:1 pentru text mare)
• Toate campurile de formular au etichete vizibile
• Site-ul este complet navigabil cu tastatura
• Titlurile urmeaza o ierarhie logica
• Indicatorii de focus sunt vizibili
• Limba paginii este setata (atributul lang pe <html>)
• Nicio informatie nu este transmisa doar prin culoare
• Videourile au subtitrari
• Animatiile respecta prefers-reduced-motion