Pe scurt
- Un site public WCAG respectă toate criteriile de nivel A și AA din WCAG 2.1 din WCAG 2.1, grupate pe principiile POUR.
- Obligația vine din OUG 112/2018, prin standardul european EN 301 549.
- Cele mai multe probleme reale țin de tastatură, focus, formulare, contrast și ARIA — le puteți vedea în acțiune în laboratorul de mai jos.
Ce înseamnă „site public conform WCAG”
WCAG (Web Content Accessibility Guidelines) este setul internațional de criterii publicat de W3C. Un site este „conform WCAG 2.1 AA” atunci când fiecare pagină completă și fiecare proces complet (de exemplu, o cerere online cu toți pașii ei) îndeplinesc toate criteriile de nivel A și AA. Conformitatea parțială — „pagina principală e bună” — nu este conformitate.
Pentru site-urile publice din UE, WCAG 2.1 AA este aplicat prin EN 301 549, standardul armonizat la care fac trimitere directiva europeană și obligațiile instituțiilor din România.
Cele 12 criterii care contează cel mai mult pe un site public
| Criteriu | Nivel | Pe un site public înseamnă… |
|---|---|---|
| 1.1.1 Text alternativ | A | Sigla, fotografiile evenimentelor, graficele bugetului au descriere; PDF-urile nu sunt imagini scanate. |
| 1.2.2 Subtitrări | A | Înregistrările ședințelor și clipurile informative au subtitrări. |
| 1.3.1 Info și relații | A | Titluri reale (H1–H3), liste, tabele cu antete, etichete legate de câmpuri. |
| 1.4.3 Contrast | AA | Text de cel puțin 4,5:1 față de fundal — inclusiv peste bannere foto. |
| 1.4.10 Reflow | AA | Pe telefon (320 px) nu apare derulare orizontală; tabelele se adaptează. |
| 1.4.11 Contrast non-text | AA | Bordura câmpurilor și indicatorul de focus au cel puțin 3:1. |
| 2.1.1 Tastatură | A | Meniul, plata, programarea funcționează doar cu tastatura. |
| 2.4.3 Ordinea focusului | A | Focusul urmează ordinea vizuală; nu sare în subsol. |
| 2.4.7 Focus vizibil | AA | Utilizatorul vede mereu unde se află. |
| 3.1.1 Limba paginii | A | <html lang="ro"> — altfel sintetizatorul citește cu accent englezesc. |
| 3.3.1 / 3.3.2 Formulare | A | Etichete vizibile și erori explicate în text. |
| 4.1.2 Nume, rol, valoare | A | Butoane-iconiță cu nume, meniuri cu aria-expanded. |
Laborator: greșit vs. corect
Patru erori extrem de frecvente pe site-urile publice, reproduse pe un site demonstrativ. Rulați simularea din varianta greșită, apoi încercați cu tasta Tab varianta corectă.
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.
Documentele PDF: jumătate din problemă
Pe un site public, documentele descărcabile — hotărâri, anunțuri, formulare — sunt adesea majoritatea conținutului. Și ele trebuie să respecte WCAG. Regulile de bază:
- Generați PDF-ul din documentul editabil (Word, LibreOffice) folosind stiluri de titlu, nu fonturi mărite manual.
- Activați opțiunea de export „PDF etichetat” (tagged PDF).
- Adăugați text alternativ imaginilor înainte de export.
- Evitați scanările; dacă nu se poate, aplicați OCR și verificați textul rezultat.
- Când e posibil, publicați informația direct ca pagină HTML.
Și WCAG 2.2?
WCAG 2.2 (octombrie 2023) adaugă criterii precum dimensiunea minimă a țintelor (24×24 px), focusul neascuns de antete fixe și autentificarea fără teste de memorie. În septembrie 2026 a fost publicat EN 301 549 v4.1.1, care adoptă WCAG 2.2 AA; după citarea sa în Jurnalul Oficial al UE, va deveni referința pentru conformitate. Un site public construit sau refăcut acum ar trebui să țintească direct WCAG 2.2 AA. Pentru perspectiva pe termen lung, vedeți ce știm despre WCAG 3.0.
Testul rapid de 5 minute
- Tastatura: lăsați mouse-ul. Apăsați Tab de la începutul paginii. Vedeți mereu unde e focusul? Ajungeți la meniu, căutare, formular?
- Zoom 200%: Ctrl + + de câteva ori. Textul se suprapune? Apare derulare orizontală?
- Contrast: text gri deschis, text peste imagini? Verificați cu un instrument de contrast.
- Imagini: sigla și imaginile informative au text alternativ?
- Titluri: există un singur H1 și o ierarhie logică?
Dacă ați găsit probleme la oricare punct, următorul pas este un audit complet.
Întrebări frecvente
Nivelul AA al WCAG 2.1 (care include și toate criteriile de nivel A), prin standardul european EN 301 549 la care face trimitere OUG 112/2018.
Obligația legală actuală se raportează la WCAG 2.1 AA. WCAG 2.2 este compatibil retroactiv și adaugă criterii utile (dimensiunea țintelor, aspectul focusului); adoptarea lui acum vă pregătește pentru viitoarele versiuni ale standardului european.
Un test de 5 minute (tastatură, zoom 200%, contrast, text alternativ, titluri) vă arată problemele evidente. Pentru o concluzie de conformitate aveți nevoie de un audit care combină scanarea automată cu testarea manuală a fluxurilor.