Text de link care are sens în afara contextului

Cum navighează de fapt utilizatorii de cititoare de ecran

Înainte de a vorbi despre cum să scriem textul unui link, ajută să înțelegem cum folosesc de fapt oamenii linkurile atunci când nu pot vedea pagina.

Cititoarele de ecran oferă o scurtătură pe care majoritatea utilizatorilor văzători nu știu că există: apăsarea unei singure taste (de obicei litera L în majoritatea cititoarelor de ecran) parcurge toate linkurile de pe pagină, citindu-le unul câte unul, în afara contextului. Utilizatorii folosesc acest lucru pentru a scana rapid o pagină, așa cum ochiul unui utilizator văzător ar putea parcurge titlurile și butoanele de tip apel la acțiune.

Dacă pagina ta are douăsprezece linkuri care spun „Citește mai mult”, acea listă este lipsită de sens. Utilizatorul aude: „Citește mai mult. Citește mai mult. Citește mai mult. Citește mai mult…” Nu poate spune la ce duce vreunul dintre ele.

Aceasta este problema fundamentală pe care încearcă să o rezolve accesibilitatea textului de link: fiecare link trebuie să se descrie singur, deoarece contextul dispare atunci când navighezi prin linkuri.

Ce spune WCAG

2.4.4 Scopul linkului (în context) la Nivelul A impune ca scopul fiecărui link să poată fi determinat doar din textul linkului sau din textul linkului împreună cu contextul său înconjurător (paragraful, elementul de listă, celula de tabel sau titlul în care se află).

2.4.9 Scopul linkului (doar link) la Nivelul AAA merge mai departe, impunând ca scopul linkului să reiasă doar din textul linkului, fără a se baza pe context. Să țintești către acest lucru este o idee bună chiar dacă vizezi doar conformitatea AA.

2.5.3 Etichetă în nume (Nivel A) impune ca, atunci când un link sau un buton are o etichetă text vizibilă, numele accesibil să înceapă cu acel text. Un buton cu pictogramă etichetat „Află mai multe despre accesibilitate” cu un aria-label de „Dă clic aici” eșuează la acest criteriu.

Greșeli frecvente și ce să faci în schimb

„Dă clic aici” și „Citește mai mult”

Acestea sunt cele mai răspândite greșeli de accesibilitate a linkurilor de pe web.

<!-- Eșuează: niciun sens în afara contextului -->
<a href="/blog/wcag-compliance">Citește mai mult</a>

<!-- Trece: se descrie singur -->
<a href="/blog/wcag-compliance">Citește ghidul nostru de conformitate WCAG 2.2</a>

Remedierea este aproape întotdeauna simplă: înlocuiește expresia vagă cu un text care descrie destinația sau acțiunea.

Linkuri generice „aici”

„Dă clic aici pentru a descărca raportul” eșuează din același motiv — cuvântul-link în sine este doar „aici”.

<!-- Eșuează -->
<p>Pentru toate constatările, dă clic <a href="/report.pdf">aici</a>.</p>

<!-- Trece: textul linkului descrie ce este legat -->
<p>Descarcă <a href="/report.pdf">raportul de audit de accesibilitate 2025 (PDF)</a>.</p>

Observă indicatorul PDF din paranteze — aceasta este o bună practică pentru a informa utilizatorii că accesarea linkului va deschide un PDF, mai degrabă decât o pagină web.

Linkuri către aceeași destinație cu text diferit sau destinații diferite cu același text

Ambele creează confuzie. Dacă cinci linkuri de navigare spun toate „Află mai multe”, dar indică pagini de servicii diferite, utilizatorii nu pot anticipa unde vor ajunge. În schimb, două linkuri diferite care spun „ghid de conformitate WCAG”, dar duc la pagini diferite, sunt la fel de derutante.

Linkuri și butoane doar cu pictogramă

Un link sau un buton care conține doar o pictogramă — fără text vizibil — trebuie să aibă un nume accesibil furnizat prin aria-label sau aria-labelledby. Fără acesta, cititoarele de ecran anunță numele fișierului imaginii pictogramei sau nimic.

<!-- Eșuează: anunțat ca „link, grafică" sau numele fișierului SVG -->
<a href="/social/twitter">
  <svg><!-- pictogramă twitter --></svg>
</a>

<!-- Trece: aria-label furnizează numele accesibil -->
<a href="/social/twitter" aria-label="QualiBooth pe Twitter">
  <svg aria-hidden="true"><!-- pictogramă twitter --></svg>
</a>

Atributul aria-hidden="true" de pe SVG împiedică cititoarele de ecran să anunțe titlul sau conținutul SVG-ului — deoarece linkul în sine are deja o etichetă, conținutul pictogramei este redundant.

Folosirea aria-label pentru a completa textul vizibil

Când o pagină are mai multe linkuri „Descarcă” și nu poți schimba textul vizibil (o constrângere de design), aria-label poate extinde numele accesibil:

<!-- Textul vizibil este „Descarcă", dar numele accesibil este întregul șir -->
<a href="/report-2025.pdf" aria-label="Descarcă raportul de accesibilitate 2025 PDF">
  Descarcă
</a>

O precauție aici: WCAG 2.5.3 impune ca numele accesibil să înceapă cu textul vizibil. „Descarcă raportul de accesibilitate 2025 PDF” începe cu „Descarcă” — bine. „Raportul de accesibilitate 2025 — Descarcă PDF” nu începe — rău.

Linkuri care se deschid într-o filă nouă

Deschiderea unei file noi fără avertisment dezorientează utilizatorii, în special pe cei cu dizabilități cognitive sau pe utilizatorii de cititoare de ecran care s-ar putea să nu-și dea seama ce s-a întâmplat. Indică comportamentul de filă nouă în textul linkului sau printr-o notă ascunsă vizual.

<!-- Semnalează comportamentul de filă nouă vizual și tehnologiei asistive -->
<a href="https://example.com" target="_blank">
  Vezi raportul exemplu
  <span class="sr-only">(se deschide într-o filă nouă)</span>
</a>

Când textul de link funcționează fără a fi evident

Contextul poate furniza în mod legitim sensul lipsă conform WCAG 2.4.4. Un link „Descarcă” este acceptabil dacă se află într-o celulă de tabel al cărei antet de coloană spune „Raport anual” și al cărei antet de rând spune „2025”. Contextul face scopul clar.

Aceasta este diferit de un link „Citește mai mult” la sfârșitul unui paragraf de sine stătător. Paragraful oferă context, dar „Citește mai mult” tot eșuează, deoarece textul linkului s-ar putea aplica oricărui paragraf — nu identifică în mod unic destinația.

Linkuri de tip imagine

Când conținutul linkului este o imagine mai degrabă decât text, atributul alt al imaginii devine numele accesibil al linkului. Textul alternativ ar trebui să descrie destinația linkului, nu imaginea în sine.

<!-- Atributul alt descrie destinația linkului, nu aspectul imaginii -->
<a href="/services/audits">
  <img src="audit-icon.png" alt="Servicii de auditare a accesibilității">
</a>

Dacă imaginea este pur decorativă și însoțită de text vizibil în același link, imaginea ar trebui să aibă alt="" pentru a evita anunțarea aceluiași text de două ori.

Un audit rapid pe care îl poți rula singur

Deschide pagina și afișează lista de linkuri folosind cititorul tău de ecran (sau instalează extensia gratuită de browser HeadingsMap sau WAVE pentru a vedea linkurile extrase din context). Parcurge lista. Dacă nu poți spune unde duce fiecare link doar din text, are nevoie de lucru.

Cea mai frecventă remediere este adăugarea unui <span class="sr-only"> (ascuns vizual, accesibil cititoarelor de ecran) cu context suplimentar sau pur și simplu rescrierea completă a textului linkului. Rescrierea este întotdeauna preferată — deseori îmbunătățește utilizabilitatea pentru toată lumea, nu doar pentru utilizatorii de cititoare de ecran.

Pentru o evaluare amănunțită a linkurilor site-ului tău și a altor criterii WCAG, auditurile noastre manuale de accesibilitate acoperă scopul linkurilor ca parte a unei evaluări mai ample realizate de testeri care folosesc tehnologie asistivă în fiecare zi.