Criterio WCAG 2.4.4 · Livello A GRAVE
Link senza testo distinguibile
Un link deve dire dove porta. Freccine, icone senza testo e una fila di "clicca qui" identici lasciano chi naviga all'oscuro della destinazione.
Cos'è
Lo scopo di ogni collegamento deve essere comprensibile dal suo testo. Chi usa uno screen reader spesso naviga scorrendo la sola lista dei link della pagina: se dieci link dicono tutti "Visualizza dettagli" o sono solo una freccia, quella lista è inutilizzabile.
Chi ne è penalizzato
Quando questo requisito non è rispettato, una parte reale dei tuoi visitatori non riesce a usare il sito:
- Chi naviga per elenco di link con lo screen reader e trova voci identiche o vuote.
- Chi ha difficoltà cognitive e ha bisogno di sapere in anticipo dove porta un link.
- La tua SEO: Google usa il testo dei link per capire le pagine di destinazione.
- Criterio
- WCAG 2.1 — 2.4.4 Scopo del collegamento (nel contesto)
- Livello
- A
- Norma UE
- EN 301 549 §9.2.4.4
- Italia
- D.Lgs. 82/2022 (recepimento EAA)
Come appare l'errore
Qui il link è solo una freccia: non ha testo significativo, e da solo non dice nulla sulla destinazione.
<a href="/prodotto/42">→</a>
<!-- Oppure il classico, ripetuto in tutta la pagina: -->
<a href="/prodotto/42">Clicca qui</a>Come si corregge
Dai al link un testo che descriva la destinazione. Se il design impone la sola freccia, aggiungi un'etichetta accessibile.
<a href="/prodotto/42">Vedi le sneaker in pelle bianca</a>
<!-- Se serve la sola freccia: -->
<a href="/prodotto/42" aria-label="Vedi le sneaker in pelle bianca">→</a>Evita "clicca qui", "leggi di più" e "scopri" ripetuti: fuori contesto non distinguono una destinazione dall'altra. Meglio "Leggi la guida all'EAA" che dieci "leggi di più" identici.
Vuoi sapere se il tuo sito ha questo problema?
Scansiona il tuo sito gratis →Domande frequenti
"Clicca qui" è davvero un problema?
Sì, quando si ripete. Nella lista dei link letta da uno screen reader, venti "clicca qui" sono venti voci indistinguibili. Il testo del link deve avere senso anche estratto dal contesto.
Un link con sola icona come lo sistemo?
Aggiungi un nome accessibile con aria-label che descriva la destinazione, e nascondi l'icona alla tecnologia assistiva con aria-hidden="true".
Va bene ripetere lo stesso testo per link diversi?
Solo se portano alla stessa destinazione. Se vanno a pagine diverse ma hanno lo stesso testo, è una violazione: differenziali o aggiungi contesto.