WCAG 2.2 explicat simplu: principii, niveluri și noutăți

Când cineva spune „site-ul trebuie să respecte WCAG", pare că vorbește o limbă străină. De fapt, WCAG este un set de reguli despre lucruri foarte omenești: textul să se poată citi, butoanele să se poată apăsa, formularele să se poată completa, iar informația să nu depindă de un singur simț. Să le luăm pe rând, fără jargon.

Ce sunt WCAG

WCAG vine de la Web Content Accessibility Guidelines, adică „Ghidurile pentru accesibilitatea conținutului web". Sunt publicate de W3C, organizația care stabilește standardele web (aceeași care definește HTML și CSS), prin inițiativa sa dedicată accesibilității. Textul este tehnic, dar scopul este clar: să facă paginile web utilizabile de oameni cu dizabilități vizuale, auditive, motorii, cognitive sau de vorbire, precum și de oameni care folosesc dispozitive neobișnuite sau au limitări temporare.

Un exemplu simplu: o persoană care nu poate folosi mouse-ul, din cauza unei dizabilități motorii sau a unei mâini în ghips, navighează cu tastatura. Dacă meniul tău se deschide doar la trecerea cu mouse-ul, ea nu poate ajunge la pagini. WCAG are un criteriu care cere exact ca toate funcțiile să fie accesibile de la tastatură.

Versiunile WCAG

Există mai multe versiuni: 2.0, 2.1 și 2.2. Fiecare nouă versiune adaugă criterii, dar le păstrează pe cele vechi (cu o excepție despre care vorbim mai jos). Un site care respectă 2.2 respectă, în principiu, și cerințele esențiale din versiunile anterioare. WCAG 2.2 a devenit recomandare oficială W3C în octombrie 2023. Alte documente sau legi pot face referire la o versiune mai veche, de aceea e util să verifici la ce versiune se raportează cerința care te privește. Pentru contextul legal european, vezi articolul despre European Accessibility Act în România.

Cele patru principii: POUR

Toate criteriile WCAG sunt grupate în patru principii. Prescurtarea în engleză este POUR, iar în română le putem spune: perceptibil, operabil, ușor de înțeles și robust.

1. Perceptibil

Informația trebuie prezentată în moduri pe care utilizatorul le poate percepe. Dacă cineva nu vede, trebuie să poată afla conținutul prin sunet sau prin braille. Dacă nu aude, trebuie să poată citi.

Exemple:

• imaginile informative au text alternativ (o descriere pe care o citește cititorul de ecran);
• videoclipurile au subtitrări, iar pentru conținut doar audio există transcriere;
• textul are suficient contrast față de fundal;
• informația nu este transmisă doar prin culoare (de exemplu, „câmpurile roșii sunt obligatorii" fără alt indiciu);
• pagina rămâne utilizabilă când textul este mărit sau ecranul este mic.

2. Operabil

Interfața trebuie să poată fi folosită, indiferent de dispozitivul de intrare. Nu toți oamenii folosesc mouse-ul sau atingerea cu degetul.

Exemple:

• toate funcțiile pot fi folosite cu tastatura;
• utilizatorul are timp suficient să citească și să acționeze, iar elementele care se mișcă pot fi oprite;
• nu există conținut care clipește rapid, deoarece poate provoca crize la unele persoane;
• există modalități de a sări peste blocurile care se repetă (de exemplu, un link „Sari la conținut");
• elementul care are focus (cel selectat de tastatură) este vizibil;
• țintele atinse cu degetul sunt suficient de mari.

3. Ușor de înțeles

Conținutul și funcționarea interfeței trebuie să fie previzibile și clare.

Exemple:

• limba paginii este declarată corect, ca să știe cititorul de ecran cum să pronunțe;
• navigarea se comportă la fel pe toate paginile;
• formularele au etichete și mesaje de eroare care explică ce trebuie corectat;
• nu se schimbă brusc contextul (o pagină nouă care se deschide singură) când cineva doar selectează o opțiune.

4. Robust

Conținutul trebuie să funcționeze cu o gamă largă de tehnologii, inclusiv tehnologii asistive (cititoare de ecran, programe de dictare, comutatoare), actuale și viitoare.

Exemple:

• elementele interactive au un nume, un rol și o stare exprimate corect în cod (de exemplu, un buton de tip „meniu" care spune dacă e deschis sau închis);
• mesajele de stare (de exemplu, „Produs adăugat în coș") sunt anunțate cititorului de ecran fără să mute focusul.

Nivelurile A, AA și AAA

Fiecare criteriu de succes din WCAG are un nivel de conformitate.

Un site care vizează nivelul AA trebuie să respecte criteriile A și AA. W3C însuși precizează că nivelul AAA nu este recomandat ca țintă generală pentru un site întreg, deoarece unele criterii AAA nu se pot satisface pentru orice tip de conținut. Totuși, poți adopta criterii AAA punctual, acolo unde ajută.

În practică, cele mai multe cerințe oficiale și contracte menționează AA. Dacă nu ai o cerință clară, a ținti spre AA este o decizie sensibilă și larg întâlnită.

Exemplul contrastului: două cifre de ținut minte

Un criteriu de nivel AA pe care îl auzi des este contrastul minim (criteriul 1.4.3). Contrastul este raportul dintre luminozitatea textului și cea a fundalului, exprimat ca un număr de forma 4,5:1.

• Text normal: raport de cel puțin 4,5:1.
• Text mare (în mod uzual, 18 puncte sau 14 puncte îngroșat, adică aproximativ 24 px, respectiv aproximativ 18,5 px îngroșat): raport de cel puțin 3:1.

La nivelul AAA, cerințele cresc la 7:1 pentru textul normal și 4,5:1 pentru textul mare. Mai există și un criteriu pentru componentele interfeței (marginea unui câmp, o pictogramă care transmite informație) care cere cel puțin 3:1 față de culorile vecine. Mai multe despre cum măsori și cum alegi culorile găsești în ghidul despre contrast și lizibilitate.

Ce a adus nou WCAG 2.2

Versiunea 2.2 a adăugat nouă criterii de succes și a eliminat unul vechi. Noile criterii se concentrează mai ales pe utilizatorii cu dizabilități motorii, cu dificultăți cognitive și cu vedere slabă, în special pe mobil.

Criterii noi la nivel A

• 3.2.6 Ajutor consecvent. Dacă ai un mecanism de ajutor (link de contact, chat, număr de telefon), acesta apare în același loc relativ pe paginile unde e oferit. Utilizatorul nu trebuie să-l caute de fiecare dată.
• 3.3.7 Introducere redundantă. Nu cere utilizatorului să reintroducă informații pe care le-a dat deja în același proces, de exemplu adresa de livrare pentru adresa de facturare, cu excepții justificate (securitate, de pildă).

Criterii noi la nivel AA

• 2.4.11 Focus neascuns (minim). Elementul care are focus nu trebuie acoperit complet de alte elemente, cum ar fi un banner fix sau o fereastră de cookie-uri.
• 2.5.7 Mișcări de tragere. Orice acțiune care se face prin tragere (de exemplu, un glisor sau o listă reordonată cu drag-and-drop) trebuie să aibă și o alternativă cu un singur clic sau atingere, cu excepții.
• 2.5.8 Dimensiunea țintei (minim). Zonele pe care se apasă trebuie să aibă cel puțin 24 pe 24 de pixeli CSS, sau să aibă suficient spațiu în jur, cu anumite excepții.
• 3.3.8 Autentificare accesibilă (minim). Procesul de autentificare nu trebuie să te oblige la un test cognitiv (memorarea unei parole, rezolvarea unui puzzle, transcrierea unui cod) fără o alternativă. Câmpurile de parolă trebuie să permită lipirea sau managerele de parole.

Criterii noi la nivel AAA

• 2.4.12 Focus neascuns (îmbunătățit). Focusul nu este acoperit deloc de alte elemente.
• 2.4.13 Aspectul focusului. Indicatorul de focus are o dimensiune și un contrast minime.
• 3.3.9 Autentificare accesibilă (îmbunătățit). Variantă mai strictă a criteriului 3.3.8.

Ce a fost eliminat

Criteriul 4.1.1 Parsare a fost marcat ca învechit și eliminat din 2.2, pentru că browserele și tehnologiile asistive moderne gestionează bine erorile simple de marcaj. Asta nu înseamnă că HTML-ul poate fi scris oricum: o structură curată rămâne o bună practică și ajută criteriile despre nume, rol și valoare.

Cum arată un site care urmează WCAG 2.2 AA

Ca să nu rămână totul abstract, iată cum ar arăta o pagină de produs a unui magazin:

1. Titlul principal este un singur h1, iar subtitlurile urmează o ordine logică.
2. Poza produsului are un text alternativ ca „Rucsac gri din poliester, cu două buzunare laterale".
3. Culoarea de pe buton are contrast bun față de textul din interior.
4. Poți ajunge la butonul „Adaugă în coș" apăsând Tab, iar focusul este evident.
5. Bannerul fix de jos nu acoperă butonul când tastatura îl selectează.
6. Filtrul de preț are un glisor, dar și două câmpuri în care poți scrie valori.
7. Link-ul „Ajutor" se află în același loc pe fiecare pagină.
8. La finalizare, adresa de facturare se poate prelua din cea de livrare.

Cum începi să aplici WCAG

Nu trebuie să citești tot documentul oficial. Un parcurs rezonabil:

• Alege nivelul țintă. În lipsa altei cerințe, AA.
• Fă o verificare rapidă a paginilor-cheie. Folosește tastatura, mărește pagina la 200% și verifică contrastul.
• Notează problemele pe criterii. Astfel știi ce corectezi și poți comunica clar cu un dezvoltator sau o agenție.
• Corectează în ordinea impactului. Ce blochează complet o acțiune este înaintea celor estetice.
• Reia testul după fiecare schimbare majoră. Pentru metodele concrete vezi ghidul de testare cu tastatura și cititor de ecran.

Greșeli frecvente

• Confuzia dintre „WCAG" și „lege". WCAG sunt recomandări tehnice. Legile pot face trimitere la ele, dar nu sunt același lucru.
• Ținta AAA pentru tot site-ul. Este rareori realistă și nu este recomandată ca obiectiv general.
• Verificarea doar a paginii de start. Problemele se ascund în formulare, coș, pagini cu filtre și ferestre pop-up.
• Folosirea doar a testelor automate. Instrumentele automate pot detecta doar o parte dintre probleme; restul cer judecată umană.
• Ignorarea mobilului. Dimensiunea țintelor și mișcările de tragere se văd cel mai bine pe telefon.
• Remedierea cosmetică. Un contrast corectat dar un buton fără nume în cod rămâne o barieră.

Întrebări frecvente

Care este diferența dintre WCAG 2.1 și 2.2?

Versiunea 2.2 păstrează criteriile din 2.1 (cu excepția parsării, eliminată) și adaugă nouă criterii noi, legate de focus, mișcări de tragere, dimensiunea țintei, ajutor consecvent, introducere redundantă și autentificare accesibilă.

Trebuie să ating nivelul AAA?

În general nu. Nivelul AA este ținta uzuală. Poți adopta criterii AAA în situații în care ele ajută publicul tău, dar W3C nu recomandă AAA ca politică generală pentru tot conținutul.

Ce înseamnă contrastul 4,5:1?

Este raportul minim de luminozitate între text și fundal pentru textul normal la nivelul AA. Pentru text mare, minimul este 3:1. Se măsoară cu un instrument de verificare a contrastului, pe baza culorilor exacte din CSS.

Dacă respect WCAG 2.2 AA, sunt conform legal?

Nu putem spune asta dintr-un articol. Respectarea WCAG este o bază tehnică utilă, dar conformitatea legală depinde de legea aplicabilă și de situația ta. Dacă ai nevoie de certitudine, consultă un specialist.

Cum te ajută Leono Accessibility

Leono Accessibility reunește pentru WordPress funcții care se leagă direct de criteriile discutate: opțiuni de contrast și lizibilitate, focus vizibil pentru tastatură, compatibilitate cu cititoarele de ecran și un audit al paginilor. Detalii despre partea vizuală găsești la contrast și lizibilitate, iar despre compatibilitatea cu cititoarele de ecran la compatibilitate screen reader. Ajută la îndeplinirea cerințelor, nu garantează conformitatea.

Concluzie

WCAG 2.2 poate fi rezumat prin patru cuvinte: perceptibil, operabil, ușor de înțeles și robust. Nivelurile A, AA și AAA indică cât de departe mergi, iar AA este ținta cel mai des întâlnită. Noile criterii din 2.2 se opresc asupra a ceea ce îi încurcă cel mai tare pe oameni în viața reală: focus ascuns de bannere, ținte mici pe telefon, trageri imposibile, formulare care cer aceleași date de două ori și autentificări greu de trecut. Începe cu drumul principal al clientului, corectează ce blochează și revino periodic.