WCAG 2.1 – Ghid Complet
Înțelegeți standardul internațional de accesibilitate web: toate criteriile de succes explicate în română, cu exemple practice și pași de implementare.
Standardul care definește accesibilitatea web
Web Content Accessibility Guidelines 2.1 este publicat de W3C (World Wide Web Consortium) în 2018 și reprezintă standardul tehnic de referință adoptat de legislația europeană și românească pentru accesibilitatea digitală.
Respectarea nivelului AA este cerința legală minimă impusă de Legea 232/2022 și OUG 112/2018 în România. WCAG 2.1 extinde WCAG 2.0 cu 17 criterii noi, axate pe accesibilitate mobilă și low vision.
25 criterii de bază
Minim obligatoriu. Fără acestea, site-ul este inutilizabil pentru mulți utilizatori cu dizabilități.
38 criterii suplimentare
Standard impus de Legea 232/2022 și EAA. Acoperă marea majoritate a utilizatorilor cu dizabilități.
15 criterii avansate
Excelență. Nu este obligatoriu legal, dar demonstrează angajament maxim față de incluziune.
Cele 4 principii POUR
Toate criteriile WCAG 2.1 gravitează în jurul acestor patru principii. Dacă oricare lipsește, utilizatorii cu dizabilități nu pot accesa conținutul.
Perceptibil
Informațiile trebuie să poată fi percepute de toți utilizatorii, indiferent de simțurile disponibile.
- Text alternativ pentru imagini (1.1.1)
- Subtitrări video/audio (1.2.x)
- Contrast minim 4.5:1 (1.4.3)
- Text redimensionabil la 200% (1.4.4)
Operabil
Toate funcțiile trebuie să fie accesibile prin tastatură și să ofere timp suficient de utilizare.
- Navigare completă prin tastatură (2.1.1)
- Skip nav — omitere navigare (2.4.1)
- Focus vizibil (2.4.7)
- Fără conținut cu flash rapid (2.3.1)
Inteligibil
Informațiile și interfața trebuie să fie ușor de înțeles de toți utilizatorii.
- Limbă pagină specificată (3.1.1)
- Navigare consistentă (3.2.3)
- Etichete clare formulare (3.3.2)
- Mesaje de eroare descriptive (3.3.1)
Robust
Conținutul trebuie să fie robust și compatibil cu o varietate largă de tehnologii asistive.
- HTML valid și bine structurat (4.1.1)
- Atribute ARIA corecte (4.1.2)
- Compatibil cu screen readere
- Statusuri anunțate programatic (4.1.3)
Criteriile WCAG în practică: greșit vs. corect
Patru dintre cele mai frecvente erori găsite în audituri — ARIA lipsă, tabindex greșit, ordinea focusului și contrastul focusului. Rulați simularea sau navigați chiar dvs. cu Tab.
Butoane fără nume accesibil și fără stare
Iconițele „lupă” și „hamburger” arată clar pentru cine vede ecranul, dar un cititor de ecran anunță doar „buton”. Iar un meniu care se deschide fără aria-expanded nu spune nimănui că s-a deschis. Criteriu: 4.1.2 Nume, rol, valoare (A).
<!-- iconiță fără text alternativ --> <button><svg>…</svg></button> <button><svg>…</svg></button> <button onclick="toggle()">Servicii online</button>
<button aria-label="Caută"><svg aria-hidden="true"></button> <button aria-label="Meniu" aria-expanded="false" aria-controls="meniu">…</button> <button aria-expanded="false" aria-controls="servicii"> Servicii online</button>
Un div pe post de buton și un tabindex pozitiv
Un <div onclick> nu primește focus, deci utilizatorul de tastatură nu îl poate apăsa (2.1.1 Tastatură, A). Iar tabindex="1" pe un link din subsol îl face primul element din pagină, peste tot restul (2.4.3 Ordinea focusului, A).
<a href="/">Acasă</a> <div class="btn" onclick="trimite()">Trimite cererea</div> <a href="/contact">Contact</a> <!-- în subsol --> <a href="/cookies" tabindex="1">Politica cookies</a>
<a href="/">Acasă</a> <button type="button" onclick="trimite()">Trimite cererea</button> <a href="/contact">Contact</a> <!-- fără tabindex pozitiv: ordinea = ordinea din DOM --> <a href="/cookies">Politica cookies</a>
tabindex="0" adaugă un element personalizat în ordinea naturală, tabindex="-1" îl face focusabil doar prin script (ex. titlul unui modal), iar valorile pozitive (1, 2…) nu se folosesc niciodată.
Formular în care focusul sare haotic
Când ordinea din cod nu corespunde ordinii vizuale (câmpuri rearanjate din CSS sau cu tabindex), utilizatorul de tastatură ajunge din „Telefon” în „Prenume” și apoi pe „Trimite”, înainte să fi completat totul. Criteriu: 2.4.3 Ordinea focusului (A) și 1.3.2 Secvență semnificativă (A).
<!-- etichete fără legătură + ordine forțată --> <span>Prenume</span> <input tabindex="2"> <span>Nume</span> <input tabindex="4"> <span>Telefon</span> <input tabindex="1"> <button tabindex="3">Trimite</button>
<!-- ordinea din DOM = ordinea vizuală --> <label for="prenume">Prenume</label> <input id="prenume" autocomplete="given-name" required> <label for="nume">Nume</label> <input id="nume" autocomplete="family-name" required> … <button type="submit">Trimite</button>
Focus invizibil: outline: none sau un contur gri de 1px
Mulți designeri elimină conturul de focus pentru că „arată urât”. Rezultatul: utilizatorul de tastatură nu mai știe unde se află. Indicatorul trebuie să fie vizibil (2.4.7 Focus vizibil, AA) și să aibă un contrast de cel puțin 3:1 față de fundal (1.4.11 Contrast non-text, AA; WCAG 2.2 detaliază în 2.4.13).
button:focus { outline: none; } /* sau */ button:focus { outline: 1px dotted #d8d8de; }
:focus-visible {
outline: 3px solid #6f42bd; /* 6,6:1 pe alb */
outline-offset: 3px;
}
Alegeți fundalul și culoarea indicatorului. Raportul se calculează live, după formula WCAG.
Criterii esențiale WCAG 2.1 – Nivel AA
Cerințele minime pentru conformitate legală în România conform Legii 232/2022 și OUG 112/2018.
| Criteriu | Nivel | Principiu | Descriere |
|---|---|---|---|
| 1.1.1 Text alternativ | A | Perceptibil | Imagini cu atribut alt descriptiv |
| 1.3.1 Info și relații | A | Perceptibil | Structura semantică disponibilă programatic |
| 1.4.3 Contrast minim | AA | Perceptibil | Raport 4.5:1 text normal, 3:1 text mare |
| 1.4.4 Redimensionare text | AA | Perceptibil | Text lizibil la zoom 200% |
| 1.4.10 Reflow | AA | Perceptibil | Conținut accesibil la 320px lățime (nou în 2.1) |
| 1.4.11 Contrast non-text | AA | Perceptibil | Componente UI și grafice au contrast 3:1 (nou în 2.1) |
| 1.4.12 Spațiere text | AA | Perceptibil | Fără pierdere la ajustare spațiere (nou în 2.1) |
| 2.1.1 Tastatură | A | Operabil | Toată funcționalitatea accesibilă prin tastatură |
| 2.4.3 Ordine focus | A | Operabil | Focus în ordine logică și previzibilă |
| 2.4.7 Focus vizibil | AA | Operabil | Indicator vizibil al elementului cu focus |
| 2.5.3 Etichetă în nume | A | Operabil | Eticheta vizibilă e parte din numele accesibil (nou în 2.1) |
| 3.1.1 Limbă pagină | A | Inteligibil | Atribut lang specificat corect (ex: lang="ro") |
| 3.3.1 Identificare erori | A | Inteligibil | Erorile de formular identificate și descrise în text |
| 4.1.1 Parsare | A | Robust | HTML valid: ID unice, elemente închise corect |
| 4.1.2 Nume, rol, valoare | A | Robust | Componente UI cu atribute ARIA corecte |
Criteriile WCAG 2.1 – Nivel AAA
Cele 28 de criterii AAA nu sunt cerute de lege și W3C nu recomandă impunerea lor ca cerință pentru site-uri întregi, deoarece unele conținuturi nu le pot îndeplini. Aplicate acolo unde este posibil, ele fac diferența pentru utilizatorii cu nevoi mai mari.
| Criteriu | Nivel | Principiu | Descriere |
|---|---|---|---|
| 1.2.6 Limbaj mimico-gestual (preînregistrat) | AAA | Perceptibil | Interpretare în limbaj mimico-gestual pentru conținutul audio preînregistrat |
| 1.2.7 Audiodescriere extinsă (preînregistrat) | AAA | Perceptibil | Video-ul se oprește pentru a permite descrieri audio mai lungi |
| 1.2.8 Alternativă media (preînregistrat) | AAA | Perceptibil | Transcriere completă pentru conținutul video și audio |
| 1.2.9 Doar audio (în direct) | AAA | Perceptibil | Alternativă text în timp real pentru audio transmis live |
| 1.3.6 Identificarea scopului | AAA | Perceptibil | Scopul componentelor și regiunilor poate fi determinat programatic (nou în 2.1) |
| 1.4.6 Contrast (îmbunătățit) | AAA | Perceptibil | Raport 7:1 text normal, 4.5:1 text mare |
| 1.4.7 Audio de fundal redus sau absent | AAA | Perceptibil | Vorbirea se distinge clar de sunetele de fundal |
| 1.4.8 Prezentare vizuală | AAA | Perceptibil | Culori alese de utilizator, lățime max. 80 de caractere, fără text justificat |
| 1.4.9 Imagini ale textului (fără excepție) | AAA | Perceptibil | Text în imagini doar decorativ sau esențial (ex. logo) |
| 2.1.3 Tastatură (fără excepție) | AAA | Operabil | Toată funcționalitatea prin tastatură, fără nicio excepție |
| 2.2.3 Fără temporizare | AAA | Operabil | Nicio limită de timp, cu excepția evenimentelor în timp real |
| 2.2.4 Întreruperi | AAA | Operabil | Utilizatorul poate amâna sau suprima întreruperile |
| 2.2.5 Reautentificare | AAA | Operabil | După expirarea sesiunii, datele introduse nu se pierd |
| 2.2.6 Expirări de timp | AAA | Operabil | Utilizatorul este avertizat dacă inactivitatea duce la pierderea datelor (nou în 2.1) |
| 2.3.2 Trei flash-uri | AAA | Operabil | Niciun element nu clipește de mai mult de trei ori pe secundă |
| 2.3.3 Animație din interacțiuni | AAA | Operabil | Animațiile declanșate de interacțiune pot fi dezactivate (nou în 2.1) |
| 2.4.8 Locație | AAA | Operabil | Utilizatorul știe unde se află în site (ex. breadcrumb) |
| 2.4.9 Scopul linkului (doar linkul) | AAA | Operabil | Textul linkului singur descrie destinația |
| 2.4.10 Titluri de secțiune | AAA | Operabil | Conținutul este organizat cu titluri de secțiune |
| 2.5.5 Dimensiunea țintei | AAA | Operabil | Ținte de atingere de cel puțin 44×44 px (nou în 2.1) |
| 2.5.6 Mecanisme de introducere concurente | AAA | Operabil | Se pot folosi alternativ tastatura, mouse-ul, atingerea, vocea (nou în 2.1) |
| 3.1.3 Cuvinte neobișnuite | AAA | Inteligibil | Explicații pentru jargon și expresii idiomatice |
| 3.1.4 Abrevieri | AAA | Inteligibil | Forma completă a abrevierilor este disponibilă |
| 3.1.5 Nivel de citire | AAA | Inteligibil | Versiune simplificată când textul cere studii peste nivelul gimnazial |
| 3.1.6 Pronunție | AAA | Inteligibil | Pronunția este disponibilă când sensul depinde de ea |
| 3.2.5 Schimbare la cerere | AAA | Inteligibil | Schimbările de context au loc doar la cererea utilizatorului |
| 3.3.5 Ajutor | AAA | Inteligibil | Ajutor contextual disponibil (instrucțiuni, exemple) |
| 3.3.6 Prevenirea erorilor (toate) | AAA | Inteligibil | Orice trimitere poate fi verificată, corectată sau anulată |
5 pași spre conformitate WCAG 2.1
Conformitatea WCAG nu trebuie să fie copleșitoare. Urmați acești pași în ordine pentru rezultate rapide și durabile.
-
Auditați starea actuală
Folosiți Wawsome Scanner sau axe DevTools pentru a vedea toate problemele existente. Prioritizați Nivelul A.
-
Remediați Nivelul A
Alt-text imagini, structură HTML semantică, navigare tastatură, etichete formulare. Baza de plecare.
-
Ajungeți la Nivelul AA
Contrast culori, reflow mobil, spațiere text, focus vizibil, non-text contrast — cerința legală.
-
Instalați un widget de accesibilitate
Wawsome Widget acoperă rapid criterii de ajustare vizuală și navigare, completând remedierea codului.
-
Monitorizați continuu
Accesibilitatea nu e un proiect cu termen — orice actualizare poate introduce probleme noi. Monitorizarea automată ajută.
WCAG 2.1 vs 2.2
WCAG 2.2 (octombrie 2023) adaugă 9 criterii noi față de versiunea 2.1. Iată ce este nou:
- Focus Appearance (vizibilitate focus)
- Drag Movements (alternative la drag)
- Target Size Minimum (24x24px minim)
- Consistent Help (ajutor consistent)
- Redundant Entry (nu cereți date de 2x)
Verificați conformitatea WCAG 2.1 a site-ului
Scannerul Wawsome analizează automat site-ul și oferă un raport cu toate problemele WCAG 2.1, prioritizate după impact.
Scanează site-ul gratuit