Pe scurt
- Accesibilitatea web se joacă în detalii: un atribut
alt, o etichetă, un contur de focus. - Primele 4 exemple sunt interactive — rulați simularea sau navigați cu Tab.
- Celelalte 8 arată varianta greșită și cea corectă, cu codul evidențiat.
1–4. Exemple interactive: ARIA, tabindex, ordinea focusului, contrastul focusului
Aceste patru erori afectează direct persoanele care folosesc tastatura sau un cititor de ecran. Comparați cele două variante: în stânga, simularea arată ce se întâmplă; în dreapta, componentele sunt reale — încercaț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.
5. Imagini fără text alternativ
Criteriu: 1.1.1 Conținut non-text (A)
Cititorul de ecran citește numele fișierului sau sare peste imagine. Pentru un afiș de eveniment, informația se pierde complet.
Se citește: „imagine, afis_final_v3 punct jpg”
<img src="afis_final_v3.jpg">
Se citește: „Târgul de Crăciun, 1–24 decembrie, Piața Mare, intrare liberă”
<img src="afis.jpg" alt="Târgul de Crăciun, 1–24 decembrie, Piața Mare, intrare liberă">
6. Linkuri „click aici”
Criteriu: 2.4.4 Scopul linkului (A)
Utilizatorii de cititoare de ecran parcurg adesea lista tuturor linkurilor din pagină. Zece linkuri „aici” nu spun nimic.
Descărcați <a href="…">formularul de cerere pentru certificatul de urbanism (PDF, 120 KB)</a>.
7. Câmpuri fără etichetă (doar placeholder)
Criteriu: 1.3.1 · 3.3.2 Etichete (A)
Textul din placeholder dispare când începeți să scrieți și nu este anunțat sigur de toate cititoarele de ecran. Utilizatorul uită ce trebuia completat.
<input placeholder="E-mail">
<label for="email">Adresa de e-mail</label> <input id="email" type="email" autocomplete="email">
8. Text cu contrast slab
Criteriu: 1.4.3 Contrast minim (AA)
Textul gri deschis pe alb arată „elegant”, dar devine greu de citit pentru persoanele cu vedere slabă, pe ecrane ieftine sau în lumină puternică.
p { color: #a8a8b3; } /* 2,3:1 pe alb */
Programul de lucru cu publicul: luni–vineri, 8:00–16:00.
p { color: #494a5a; } /* 8,7:1 pe alb */
9. Titluri false (text îngroșat în loc de H2)
Criteriu: 1.3.1 Info și relații (A) · 2.4.6 (AA)
Majoritatea utilizatorilor de cititoare de ecran navighează prin titluri. Un text doar mărit și îngroșat nu apare în lista de titluri.
Servicii online
<div class="titlu-mare">Servicii online</div>
Servicii online
(marcat ca titlu de nivel 2)
<h2>Servicii online</h2>
10. Erori semnalate doar prin culoare
Criteriu: 1.4.1 Utilizarea culorii (A) · 3.3.1 (A)
O bordură roșie nu spune nimic unei persoane daltoniste sau nevăzătoare. Eroarea trebuie explicată în text și legată de câmp.
<input class="input-rosu">
✕ CNP-ul trebuie să aibă 13 cifre.
<input id="cnp" aria-invalid="true" aria-describedby="cnp-err"> <p id="cnp-err">CNP-ul trebuie să aibă 13 cifre.</p>
11. Limba paginii nedeclarată
Criteriu: 3.1.1 Limba paginii (A)
Fără atributul lang, sintetizatorul vocal poate citi textul românesc cu pronunție englezească — de neînțeles.
Se aude: „Primaria” pronunțat ca în engleză
<html>Se aude: „Primăria”, cu pronunție românească
<html lang="ro">
12. Video fără subtitrări
Criteriu: 1.2.2 Subtitrări (A)
Înregistrarea ședinței de consiliu sau clipul de prezentare sunt inutile pentru persoanele surde — și pentru oricine le urmărește fără sunet.
Video fără subtitrări și fără transcriere.
<video src="sedinta.mp4" controls></video>
Video cu subtitrări în română și transcriere disponibilă sub player.
<video src="sedinta.mp4" controls> <track kind="captions" srclang="ro" src="sedinta.ro.vtt" default> </video>
Ce faceți după ce ați recunoscut erorile
Cele mai multe dintre aceste probleme se rezolvă o singură dată, în șablonul site-ului, și dispar de pe sute de pagini. Altele — textul alternativ, linkurile, subtitrările — țin de felul în care echipa publică zilnic conținut și cer o scurtă instruire. Pentru o imagine completă a site-ului dvs., folosiți checklistul WCAG sau cereți un audit de accesibilitate. Fundamentele le găsiți în ghidul complet de accesibilitate web.
Întrebări frecvente
Contrastul insuficient al textului, imaginile fără text alternativ, câmpurile de formular fără etichete, linkurile fără text descriptiv, butoanele fără nume accesibil și lipsa atributului lang sunt, an de an, cele mai frecvente erori găsite pe site-uri.
Multe da: textul alternativ, linkurile descriptive și titlurile țin de editarea conținutului. Problemele de cod (focus, ARIA, formulare, contrast) se rezolvă de dezvoltatorul site-ului, ideal pe baza unui raport de audit.
ARIA (Accessible Rich Internet Applications) este un set de atribute HTML care descriu rolul, numele și starea componentelor pentru tehnologiile asistive, de exemplu aria-label sau aria-expanded. Regula de bază: folosiți întâi elemente HTML native și ARIA doar acolo unde acestea nu ajung.
Exemplele sunt demonstrative și simplificate. Rapoartele de contrast sunt calculate după formula WCAG pentru fundal alb.