Bazele accesibilității digitale

Învață bazele accesibilității web și testează-ți cunoștințele

Ce este accesibilitatea digitală?

Accesibilitatea digitală înseamnă proiectarea și dezvoltarea site-urilor web, aplicațiilor și conținutului digital astfel încât să poată fi utilizate de cât mai multe persoane, inclusiv de cele cu dizabilități permanente, temporare sau situaționale. Este un drept fundamental ca toți oamenii să aibă acces egal la informație și servicii digitale.

Accesibilitatea nu înseamnă doar conformitate cu legi și standarde - înseamnă incluziune, echitate și respect pentru diversitatea umană. Un site accesibil este un site mai bun pentru toată lumea.

Principiile WCAG (POUR)

Standardul internațional WCAG (Web Content Accessibility Guidelines) este dezvoltat de W3C și reprezintă reperul global pentru accesibilitate. Versiunea curentă este WCAG 2.2, iar cea în lucru este WCAG 3.0. Cele 4 principii fundamentale sunt:

  • Perceput (Perceivable) - Informația și componentele interfeței trebuie să fie prezentate utilizatorilor astfel încât să le poată percepe. Exemple: text alternativ pentru imagini, subtitrări pentru video, contrast suficient, conținut care poate fi prezentat în moduri diferite fără a pierde informația.
  • Operabil (Operable) - Componentele interfeței și navigarea trebuie să fie operabile. Exemple: toate funcționalitățile disponibile de la tastatură, suficient timp pentru citire, design care nu provoacă convulsii, navigare ușoară și consistență.
  • Inteligibil (Understandable) - Informația și operarea interfeței trebuie să fie ușor de înțeles. Exemple: limbaj clar și simplu, comportament previzibil al paginilor, validare și mesaje de eroare utile în formulare.
  • Robust (Robust) - Conținutul trebuie să fie suficient de robust pentru a fi interpretat în mod fiabil de o gamă largă de agenți utilizatori, inclusiv tehnologii asistive. Exemple: cod HTML semantic valid, nume și roluri corecte pentru elemente, ARIA folosit corect.

Nivelurile de conformitate WCAG

WCAG definește trei niveluri de conformitate:

  • Nivelul A - Minimul. Acoperă cele mai critice bariere de accesibilitate. Este punctul de plecare.
  • Nivelul AA - Standardul legal (cerut de EAA). Acoperă majoritatea barierelor comune. Include criterii precum contrast de 4.5:1, text alternativ, navigare cu tastatura.
  • Nivelul AAA - Excelență. Cel mai înalt nivel, dar greu de atins pe tot site-ul. Include cerințe precum contrast de 7:1, limbaj al semnelor pentru video, explicații detaliate.

Tipuri de dizabilități și bariere

Dizabilitățile nu sunt doar permanente - ele pot fi temporare sau situaționale. Iată principalele categorii:

  • Vizuale - orbire totală, vedere redusă, daltonism, sensibilitate la lumină. Bariere: imagini fără text alternativ, contrast slab, fonturi greu de citit.
  • Auditive - surditate, auz redus. Bariere: video fără subtitrări, conținut doar audio fără transcriere.
  • Moto - paralizie, tremor, distrofie musculară, artrită, lipsa unui membru. Bariere: acțiuni care necesită precizie, elemente prea mici, navigare doar cu mouse.
  • Cognitive - dislexie, ADHD, autism, demență, dificultăți de învățare. Bariere: layout inconsecvent, fraze lungi și complicate, termeni tehnici fără explicații.
  • De vorbire - incapacitatea de a vorbi, bâlbâială. Bariere: comenzi vocale nerecunoscute, lipsa alternativelor.
  • Temporare - mână ruptă, migrene, operație la ochi, otită. Pot afecta pe oricine.
  • Situaționale - ecran spart, soare puternic, zgomot de fundal, mâini ocupate (gătit, condus).

Important: Peste 15% din populația globală (peste 1 miliard de oameni) are o formă de dizabilitate. Dacă incluzi și dizabilitățile temporare și situaționale, procentul crește la peste 50%.

European Accessibility Act (EAA) 2025

Directiva (UE) 2019/882 - cunoscută ca European Accessibility Act - a intrat în vigoare la 28 iunie 2025. Aceasta obligă toate companiile care oferă produse și servicii digitale în Uniunea Europeană să respecte standardele de accesibilitate.

Ce afectează:

  • Site-uri web și aplicații mobile
  • Platforme de e-commerce
  • Servicii bancare și financiare digitale
  • E-books și platforme de e-reading
  • Transport și ticketing online
  • ATM-uri, POS-uri, terminale self-service

Nerespectarea poate duce la amenzi substanțiale, pierderi de imagine, pierderea clienților și acțiuni în instanță. În România, legea a fost transpusă prin Legea nr. 178/2024.

Beneficiile accesibilității

Accesibilitatea nu este doar o obligație legală - este o investiție cu multiple beneficii:

  • Audiență mai largă - peste 15% din populație are o dizabilitate, iar îmbătrânirea populației crește această cifră.
  • SEO îmbunătățit - multe practici de accesibilitate (heading-uri corecte, text alternativ, structură semantică) ajută și motoarele de căutare.
  • Experiență mai bună pentru toți - contrast bun, linkuri clare, navigare ușoară ajută fiecare utilizator.
  • Conformitate legală - eviți amenzile și procesele.
  • Loialitatea clienților - utilizatorii apreciază brandurile incluzive.
  • Inovație - constrângerile de accesibilitate duc adesea la soluții creative și mai bune.
  • Viteză și performanță - codul semantic și bine structurat se încarcă mai repede.

Greșeli comune de accesibilitate

Cele mai frecvente probleme întâlnite în auditurile de accesibilitate:

  • Lipsa textului alternativ pentru imagini - cititoarele de ecran nu pot descrie imagini fără text alt.
  • Contrast insuficient - text gri pe fundal alb e greu de citit, mai ales la lumina puternică.
  • Formulare fără etichete - câmpurile trebuie să aibă elemente <label> asociate corect.
  • Navigare imposibilă cu tastatura - focus trap, lipsa focus visible, ordine greșită a tab-urilor.
  • Linkuri cu text generic - "click aici", "citește mai mult", "află detalii" - trebuie să fie descriptive.
  • Lipsa heading-urilor ierarhice - salturi de la h1 la h4, heading-uri doar pentru stilizare.
  • Butoane și linkuri false - div-uri și span-uri folosite ca butoane, fără rol sau acțiune corectă.
  • Lipsa anunțurilor pentru conținut dinamic - utilizatorii de screen reader nu știu că s-a încărcat conținut nou.
  • Videoclipuri fără subtitrări - persoanele cu dizabilități auditive pierd informația.
  • Limbaj și structură complexă - propoziții prea lungi, jargon tehnic, termeni neexplicați.

Cum se face un audit de accesibilitate

Un audit profesionist de accesibilitate implică mai multe etape:

  1. Evaluare automată - cu instrumente precum Axe DevTools, WAVE, Lighthouse, Ally. Oferă o imagine de ansamblu rapidă, dar nu detectează toate problemele.
  2. Testare manuală - verificarea cu tastatura (tab, shift+tab, enter, escape), testare cu screen reader (NVDA, JAWS, VoiceOver, TalkBack), verificare zoom și redimensionare.
  3. Evaluare de specialitate - un expert în accesibilitate analizează fiecare componentă în raport cu criteriile WCAG.
  4. Testare cu utilizatori reali - persoane cu diverse dizabilități testați produsul și oferă feedback autentic.
  5. Raport și recomandări - documentare detaliată cu problemele găsite, nivelul de severitate și soluții concrete.
  6. Remediere și reverificare - implementarea soluțiilor și un al doilea audit pentru confirmare.

Contrast și culoare

Contrastul suficient între text și fundal este esențial pentru lizibilitate. Cerințele WCAG AA:

  • Text normal - raport de contrast minim 4.5:1
  • Text mare (peste 18px bold sau 24px normal) - minim 3:1
  • Componente grafice - minim 3:1
  • Nu transmite informații doar prin culoare - de exemplu, un grafic care arată creșterea/scăderea doar prin verde/roșu (problema pentru daltoniști).

Navigare cu tastatura

Toate funcționalitățile trebuie să fie accesibile de la tastatură. Aspecte cheie:

  • Focus visible - trebuie să vezi întotdeauna unde ești pe pagină (outline sau alt indicator vizibil).
  • Ordine logică a focusului - tabindex trebuie să urmeze ordinea vizuală.
  • Fără focus trap - utilizatorul trebuie să poată naviga în și din orice componentă.
  • Scurtături - skip link (sari la conținut), taste rapide (acceskey) pentru funcții frecvente.

Formulare accesibile

  • Fiecare câmp trebuie să aibă un <label> asociat explicit (prin for și id).
  • Mesajele de eroare trebuie să fie descriptive și să indice clar câmpul cu problemă.
  • Etichetele trebuie să rămână vizibile și când se completează câmpul (placeholder nu înlocuiește label-ul).
  • Grupurile de opțiuni (radio, checkbox) trebuie încadrate în <fieldset> cu <legend>.
  • Instrucțiunile trebuie să fie clare și să nu se bazeze doar pe culoare, poziție sau formă.

Structura paginii

O pagină bine structurată ajută atât utilizatorii, cât și motoarele de căutare:

  • Heading-uri ierarhice - o singură dată h1 pe pagină, apoi h2, h3 etc. în ordine logică.
  • Landmark-uri HTML - <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>.
  • Linkuri de salt - "Skip to content", "Skip to navigation".
  • Liste corecte - <ul> și <ol> pentru liste, nu doar paragrafe cu bullet.
  • Tabele - doar pentru date tabelare, cu <caption>, <th> cu scope.

Testare cu screen reader

Testarea cu un cititor de ecran este esențială pentru a înțelege cum experimentează utilizatorii nevăzători site-ul tău. Recomandări:

  • Navighează doar cu tastatura (fără mouse) pentru a verifica focusul și ordinea.
  • Folosește NVDA (gratuit, Windows) pentru testare.
  • Verifică dacă toate elementele interactive sunt anunțate corect.
  • Verifică dacă mesajele de eroare, notificările și conținutul dinamic sunt anunțate.
  • Asigură-te că utilizatorul poate înțelege structura paginii doar din audio.

Resurse utile

10 întrebări aleatorii dintr-un set de peste 25