WCAG 2.4.4 Scopul linkului (în context)

Criteriul de succes 2.4.4 îi ajută pe utilizatori să decidă dacă urmează un link fără să ghicească. Utilizatorii de cititoare de ecran afișează adesea lista tuturor linkurilor de pe o pagină, iar utilizatorii de tastatură trec de la un link la altul; o listă cu zece linkuri „Faceți clic aici” nu le spune nimic. Este de nivelul A și face parte din EN 301 549 (clauza 9.2.4.4). Legea 232/2022 se bazează pe standardul armonizat EN 301 549.

Ce cere criteriul

Scopul fiecărui link poate fi determinat din:

• doar textul linkului sau
• textul linkului împreună cu contextul linkului determinat programatic —

cu excepția cazurilor în care scopul linkului ar fi ambiguu pentru utilizatori în general.

Contextul linkului înseamnă informațiile pe care tehnologia asistivă le poate asocia linkului: aceeași propoziție, același paragraf, element de listă sau celulă de tabel, antetul de tabel al acelei celule sau textul referit cu aria-describedby. Contează și numele accesibil al linkului — pentru un link-imagine, acesta este textul alternativ al imaginii.

Excepția acoperă linkurile al căror scop nu poate fi dedus din pagină de nimeni, de exemplu un link dintr-un joc de tip puzzle; atunci nu este necesar context suplimentar.

Greșeli tipice într-un magazin online

• linkuri doar cu pictogramă (coș, cont, listă de dorințe, rețele sociale), fără text și fără aria-label;
• linkuri pe imagini de produs în care imaginea nu are text alternativ, așa că linkul nu are deloc nume;
• mai multe linkuri „Citiți mai mult”, „Cumpărați acum” sau „Detalii” într-o grilă, fără legătură cu numele produsului;
• o zonă a unei hărți de imagine cu link (<area>) fără alt;
• linkuri al căror text este un URL simplu sau un cod de urmărire.

Cum se verifică

Automat: verificatorul nostru raportează linkurile fără text perceptibil (regula pentru numele linkului) și zonele hărților de imagine fără text alternativ. Nu poate aprecia dacă un nume precum „Mai mult” este clar în context, așa că textele de link ambigue necesită o verificare manuală.

Manual: folosiți lista de linkuri a unui cititor de ecran (sau o extensie de browser care listează linkurile) și citiți fiecare link scos din context. Dacă un link nu este clar, verificați dacă propoziția, elementul de listă, celula de tabel sau titlul în care se află îl clarifică. Verificați mai ales linkurile-pictogramă și linkurile-imagine.

Cum se remediază

• Scrieți texte de link care spun unde duc: „Vedeți costurile de livrare” în loc de „Faceți clic aici”.
• În cardurile de produs, faceți din numele produsului linkul sau adăugați context linkurilor repetate: Cumpărați acum<span class="visually-hidden"> – Cămașă din in</span>.
• Dați linkurilor-pictogramă un nume accesibil prin text vizibil, text ascuns vizual sau aria-label.
• Scrieți pentru imaginile cu link un text alternativ care descrie destinația, nu doar imaginea.
• Adăugați alt fiecărui <area> dintr-o hartă de imagine.

Criterii conexe

• 2.5.3 Eticheta în nume — numele accesibil trebuie să conțină textul vizibil.
• 2.4.6 Titluri și etichete — titlurile și etichetele trebuie să fie descriptive.
• 1.1.1 Conținut non-text — imaginile au nevoie de alternative text.

Întrebări frecvente

Sunt permise linkurile „Citiți mai mult” conform WCAG 2.4.4?

Da, dacă scopul lor reiese din contextul determinat programatic, de exemplu din aceeași propoziție, paragraf, element de listă sau celulă de tabel ori din titlul sub care se află linkul. Totuși, un text de link care are sens de unul singur este mai bun.

Ce este contextul linkului determinat programatic?

Informațiile pe care tehnologia asistivă le poate asocia linkului, cum ar fi propoziția, paragraful, elementul de listă sau celula de tabel din jur ori textul legat de link prin aria-describedby sau aria-labelledby.

Linkurile-pictogramă încalcă criteriul 2.4.4?

Un link-pictogramă fără nume accesibil, cum ar fi o pictogramă de coș sau de rețea socială fără text sau aria-label, nu are un scop care să poată fi determinat. Dați-i un nume precum „Coș” sau „Instagram”.