Ghid de accesibilizare site-uri

În cele ce urmează sunt prezentate câteva informații utile celor care dezvoltă sau administrează site-uri, aplicații web și interfețe digitale și doresc ca acestea să fie accesibile persoanelor cu dizabilități, în special celor care utilizează cititoare de ecran și navigare din tastatură.
Acest ghid este realizat din perspectivă practică, inclusiv pe baza experienței utilizatorilor nevăzători de internet, iar recomandările sunt alese astfel încât să îmbunătățească accesibilitatea fără a afecta negativ designul vizual al site-ului.
În prezent, accesibilitatea nu mai înseamnă doar text alternativ pentru imagini sau câteva artificii HTML, ci o structură clară, formulare corecte, interacțiuni previzibile, repere semantice și un comportament coerent pentru tehnologiile asistive.
Ne ocupăm de consultanță și implementare pentru accesibilizarea site-urilor, interfețelor web, aplicațiilor software și aplicațiilor mobile Android și iOS, astfel încât experiența să fie cât mai bună atât pentru utilizatorii fără dizabilități, cât și pentru cei care folosesc cititoare de ecran, tastatura sau alte tehnologii asistive.
Pentru analiză, recomandări, intervenții punctuale sau dezvoltare de soluții accesibile, ne puteți contacta prin secțiunea Contact.

Acest ghid a fost revizuit și actualizat în 2026.

Mai jos sunt secțiuni pe elemente și tehnici importante pentru accesibilitatea modernă a unei interfețe digitale.
Tag-urile și atributele sunt scrise de-a lungul ghidului în caractere italice pentru a fi deosebite de restul textului.

Heading-urile

Unul dintre cele mai importante elemente pentru accesibilitatea unei pagini este structura corectă a heading-urilor. Acestea ajută utilizatorii de cititoare de ecran să înțeleagă rapid organizarea conținutului și să navigheze eficient în interiorul paginii.
Este recomandat ca fiecare pagină să aibă un heading principal care identifică limpede conținutul central, urmat de heading-uri secundare și terțiare pentru subsecțiuni. În felul acesta, utilizatorul poate sări direct între zonele importante ale paginii, fără să parcurgă inutil meniuri, bannere sau alte elemente repetitive.
În mod ideal, heading-ul care marchează începutul conținutului paginii curente sau al articolului curent ar trebui să fie primul element relevant din interiorul zonei <main>. Astfel, utilizatorul poate ajunge repede fie la regiunea principală a paginii, fie direct la primul heading din conținut. Cele două tehnici se completează foarte bine, așa cum este explicat și în secțiunea următoare, dedicată landmark-urilor și structurii semantice.
Nu este suficient ca un text să fie afișat vizual mai mare sau mai îngroșat; el trebuie marcat în mod semantic ca heading, folosind tag-urile corespunzătoare. Ordinea lor ar trebui să reflecte structura logică a paginii.

Codul HTML:
<MAIN>
<H1>TITLUL SECȚIUNII SAU AL ARTICOLULUI</H1>
... conținutul principal ...
</MAIN>
Heading-ul de nivel 1 este, de regulă, cel mai potrivit pentru începutul conținutului principal. În loc de 1 se poate folosi 2, 3, 4, 5 sau 6, în funcție de nivelul secțiunii.
Folosirea acestor tag-uri permite cititoarelor de ecran să anunțe nivelul heading-ului și textul său, iar utilizatorii pot naviga rapid între ele prin comenzi specifice ale tehnologiei asistive.
Este recomandabil ca formatarea heading-urilor să se facă în CSS, fără a afecta structura semantică a paginii.
<H1 CLASS=”titlu”>TITLUL SECȚIUNII SAU AL ARTICOLULUI</H1>

În practică, o persoană care folosește un cititor de ecran poate ajunge la conținutul principal fie navigând la regiunea main, fie sărind direct la primul heading relevant din acea zonă. De exemplu, în JAWS for Windows se poate ajunge rapid la zona principală prin comenzi dedicate pentru regiuni, inclusiv direct la main, fără a mai parcurge meniul, bannerele și alte elemente repetitive. Din acest motiv, este foarte util ca primul heading din main să fie chiar titlul conținutului curent.

Începutul paginii

Landmark-urile – structură semantică și repere ARIA

O pagină accesibilă ar trebui să aibă zone principale ușor de identificat: antet, navigație, conținut principal, eventual zone secundare și subsol. În dezvoltarea modernă, cea mai bună soluție este folosirea elementelor HTML semantice dedicate, precum <header>, <nav>, <main>, <aside> și <footer>.
Acestea oferă din start repere utile pentru cititoarele de ecran și pentru alte tehnologii asistive, fără să mai fie nevoie, în multe cazuri, de artificii suplimentare.

Dintre toate aceste regiuni, cea mai importantă este de obicei zona <main>, deoarece ea marchează începutul conținutului principal al paginii: articolul, secțiunea deschisă din meniu sau informația centrală pentru care utilizatorul a ajuns acolo. Pentru o persoană care utilizează un cititor de ecran, regiunea main este unul dintre cele mai rapide moduri de a ajunge la conținutul util, evitând trecerea repetată peste meniu, logo, elemente de navigație sau alte zone secundare.
Acest lucru este important atât pe desktop, unde se poate naviga rapid între regiuni, cât și pe telefon, unde altfel utilizatorul ar putea fi nevoit să gliseze de multe ori peste elemente repetitive până să ajungă la conținutul principal. De aceea, folosirea corectă a regiunii main, împreună cu un heading clar la începutul ei, economisește timp și face experiența mult mai plăcută.

Atunci când nu pot fi folosite elementele semantice native, se pot utiliza roluri ARIA precum ROLE=”banner”, ROLE=”navigation”, ROLE=”main”, ROLE=”complementary” sau ROLE=”contentinfo”. Totuși, regula generală este: mai întâi HTML semantic, apoi ARIA doar unde este necesar.

Codul HTML recomandat:
<HEADER>Antetul site-ului</HEADER>
<NAV ARIA-LABEL="Navigație principală">Meniul principal</NAV>
<MAIN>
<H1>Conținutul principal</H1>
...
</MAIN>
<ASIDE>Informații suplimentare</ASIDE>
<FOOTER>Subsolul paginii</FOOTER>

Alternativă, când nu se pot folosi elemente semantice native:
<DIV ROLE="navigation" ARIA-LABEL="Navigație principală">Meniul principal</DIV>
<DIV ROLE="main">Conținutul principal</DIV>
Important este ca reperele să fie puține, clare și folosite consecvent, nu în exces.

Începutul paginii

ARIA și „designul audio” al interfeței

Pe lângă structura semantică de bază, interfețele moderne au adesea meniuri expandabile, butoane care deschid dialoguri, file, acordeoane, notificări sau zone care se actualizează dinamic. Pentru utilizatorii de cititoare de ecran, aceste elemente trebuie să comunice clar nu doar ce sunt, ci și ce fac, ce controlează și în ce stare se află.
Aici intervine partea care poate fi văzută ca „design audio”: o interfață bine construită nu este doar frumoasă vizual, ci și clară la ascultare.

Câteva exemple utile:

  • aria-expanded arată dacă un buton deschide sau închide o zonă extensibilă.
  • aria-controls indică elementul controlat de un buton sau de un alt control.
  • aria-haspopup poate anunța că un element deschide un meniu, dialog sau alt popup.
  • aria-live poate fi util pentru anunțarea modificărilor dinamice, de exemplu rezultate, mesaje de stare sau confirmări.

Codul HTML:

<BUTTON
ARIA-EXPANDED="false"
ARIA-CONTROLS="sectiune-filtre">Arată filtrele</BUTTON>

<DIV ID="sectiune-filtre" HIDDEN>
  Conținutul filtrului
</DIV>

Alt exemplu:

<BUTTON ARIA-HASPOPUP="dialog" ARIA-CONTROLS="dialog-contact">Deschide formularul de contact</BUTTON>

Aceste atribute trebuie folosite corect și doar atunci când comportamentul interfeței chiar justifică folosirea lor. ARIA nu trebuie să compenseze o structură HTML greșită, ci să completeze o interfață deja bine construită.

Începutul paginii

Tag-ul LABEL în formulare

Formularele sunt printre cele mai sensibile zone ale unui site din punctul de vedere al accesibilității. Fiecare câmp trebuie să aibă o etichetă clară și asociată corect, astfel încât utilizatorul să știe ce informație trebuie introdusă.
Textul plasat doar ca placeholder nu este suficient. Placeholder-ul poate fi util ca exemplu, dar nu trebuie să înlocuiască eticheta propriu-zisă.

Codul HTML:

<LABEL FOR="id-camp">Numele dvs.</LABEL>
<INPUT ID="id-camp" TYPE="text">

Pe primul rând este definită eticheta pentru câmpul de editare cu ID-ul indicat. Astfel, cititorul de ecran va putea anunța corect rolul și scopul câmpului.
Atunci când este nevoie de instrucțiuni suplimentare, acestea pot fi legate de câmp prin aria-describedby. Când există validare și erori, acestea trebuie comunicate clar, nu doar vizual.

<LABEL FOR="email">Adresa de e-mail</LABEL>
<INPUT ID="email" TYPE="email" ARIA-DESCRIBEDBY="email-help" REQUIRED>
<P ID="email-help">Introduceți o adresă validă, de exemplu nume@exemplu.ro</P>

În cazul erorilor de completare se poate folosi și aria-invalid=”true”, dar numai atunci când câmpul este într-adevăr invalid și există o explicație clară a problemei.

Începutul paginii

ALT-ul pentru imagini

Imaginile trebuie tratate în funcție de rolul lor real în pagină. Dacă imaginea transmite informație sau funcționează ca link ori buton, ea trebuie să aibă un text alternativ relevant. Dacă este doar decorativă, este de preferat să nu încarce inutil experiența utilizatorului de cititor de ecran.
O imagine de meniu, un logo care duce la pagina principală, o iconiță cu semnificație sau o imagine care conține text trebuie să aibă un ALT util. În schimb, elementele pur decorative nu au nevoie de descrieri inutile.

Codul HTML:
<IMG SRC="imagine.jpg" ALT="Descriere relevantă">
Pentru o imagine decorativă se poate folosi ALT="", astfel încât cititorul de ecran să nu o anunțe inutil.
Textul alternativ nu trebuie să repete excesiv ceea ce este deja evident din context și nici să înceapă cu formulări de tipul „imagine cu…”, dacă acest lucru nu aduce informație utilă.

Începutul paginii

Salt direct la o secvență

Link-urile de salt sunt utile pentru a permite utilizatorului să treacă rapid peste elementele repetitive, cum ar fi meniul principal, și să ajungă direct la conținutul principal al paginii. Ele sunt deosebit de utile pe site-urile cu structură complexă sau cu multe link-uri plasate înaintea conținutului.
Aceste link-uri nu înlocuiesc heading-urile, ci completează accesibilitatea generală.

Codul HTML:
<A HREF="#continut">Salt la conținut</A>
Acest link este de obicei plasat cât mai aproape de începutul paginii și poate fi afișat doar la focalizare sau poate fi ascuns vizual, dacă implementarea este făcută corect.

Definirea țintei:
<MAIN ID="continut">… conținutul principal …</MAIN>
Se poate folosi și un alt element, important fiind ca ținta să fie clară și logică pentru structură.

Începutul paginii

Text ajutător ascuns

În multe situații este util să existe texte care nu sunt afișate vizual, dar care pot fi citite de tehnologiile asistive. Acestea pot clarifica rolul unui buton, pot marca începutul unei zone importante, pot completa un link ambiguu sau pot oferi instrucțiuni suplimentare pentru formulare și controale interactive.
Un astfel de text ascuns face parte din ceea ce se poate numi și „design audio” al unei interfețe: ceea ce nu se vede, dar se aude și ajută utilizatorul să înțeleagă mai bine structura și scopul elementelor.

Codul HTML și CSS:
<SPAN CLASS="visually-hidden">Informația ascunsă</SPAN>
Secvența de mai sus poate fi inserată în locul dorit pe pagină, iar în CSS se definește o clasă care ascunde vizual textul, dar îl păstrează disponibil pentru cititoare de ecran.


.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

Cu această clasă, textul rămâne în pagină și poate fi folosit pentru instrucțiuni suplimentare, explicații, indicarea începutului unei zone sau completarea denumirii unor controale care, vizual, sunt suficient de clare, dar auditiv ar putea fi ambigue.

Începutul paginii

Detectarea limbii de către cititoarele de ecran

Cititoarele de ecran și alte tehnologii asistive pot interpreta mai bine conținutul atunci când limba paginii sau a unei porțiuni de text este marcată corect. Acest lucru este important în special pentru pronunție, schimbarea vocii sau a regulilor de citire, acolo unde tehnologia folosită suportă aceste funcții.
Este recomandat ca limba principală a documentului să fie declarată în elementul <HTML>, iar fragmentele în altă limbă să fie marcate punctual.

Codul HTML
<HTML LANG="ro"> – pentru a marca pagina ca fiind în limba română;
<SPAN LANG="en">Accessibility</SPAN> – pentru a marca o secvență în limba engleză.
Este important ca aceste marcaje să fie corecte și să nu fie inserate automat greșit de anumite editoare sau teme.

Începutul paginii

Access Key – scurtături la link-uri

AccessKey este un atribut care poate crea scurtături de taste pentru anumite elemente interactive. Deși în trecut era văzut ca o facilitate interesantă, în prezent trebuie folosit cu mare prudență, deoarece poate intra în conflict cu scurtăturile browserului, ale sistemului de operare sau ale tehnologiilor asistive.
Din acest motiv, pentru site-urile publice, accesskey nu mai este în general o recomandare principală. Poate fi luat în calcul doar în contexte speciale, bine controlate, în care combinațiile de taste sunt documentate clar și testate în prealabil.

Codul HTML
<A HREF="fisier.php" ACCESSKEY="x">Click aici</A>
În practică, înainte de a folosi această tehnică, este recomandat să analizați dacă nu există soluții mai sigure și mai previzibile, precum o structură bună de heading-uri, landmark-uri, skip links și focalizare coerentă din tastatură.

Începutul paginii

Ghid actualizat în 2026 de Emanuel Boboiu

Pentru consultanță, verificare, accesibilizare de site-uri și aplicații sau dezvoltare de software accesibil, ne puteți contacta prin secțiunea Contact.