Testo dei link che ha senso fuori dal contesto

Prima di parlare di come scrivere il testo dei link, è utile capire come le persone usano davvero i link quando non possono vedere la pagina.

Gli screen reader offrono una scorciatoia che la maggior parte degli utenti vedenti non sa che esista: premendo un solo tasto (di solito la lettera L nella maggior parte degli screen reader) si scorrono tutti i link della pagina, leggendoli uno per uno, fuori dal contesto. Gli utenti la usano per esaminare rapidamente una pagina, così come l’occhio di un utente vedente potrebbe scorrere i titoli e i pulsanti di invito all’azione.

Se la tua pagina ha dodici link che dicono “Leggi di più”, quell’elenco è privo di significato. L’utente sente: “Leggi di più. Leggi di più. Leggi di più. Leggi di più…”. Non può capire dove portino.

Questo è il problema fondamentale che l’accessibilità del testo dei link cerca di risolvere: ogni link deve essere autoesplicativo, perché il contesto scompare quando si naviga per link.

Cosa dice la WCAG

Il criterio 2.4.4 Scopo del collegamento (nel contesto) di Livello A richiede che lo scopo di ogni link possa essere determinato dal solo testo del link, o dal testo del link insieme al contesto circostante (il paragrafo, l’elemento dell’elenco, la cella della tabella o il titolo in cui si trova).

Il criterio 2.4.9 Scopo del collegamento (solo collegamento) di Livello AAA va oltre, richiedendo che lo scopo del link sia determinabile dal solo testo del link senza affidarsi al contesto. Puntare a questo è una buona idea anche se stai mirando solo alla conformità AA.

Il criterio 2.5.3 Etichetta nel nome (Livello A) richiede che quando un link o un pulsante ha un’etichetta di testo visibile, il nome accessibile inizi con quel testo. Un pulsante icona etichettato “Scopri di più sull’accessibilità” con un aria-label di “Clicca qui” non soddisfa questo criterio.

Errori comuni e cosa fare invece

”Clicca qui” e “Leggi di più”

Questi sono gli errori di accessibilità dei link più diffusi sul web.

<!-- Non supera: nessun significato fuori dal contesto -->
<a href="/blog/wcag-compliance">Leggi di più</a>

<!-- Supera: autoesplicativo -->
<a href="/blog/wcag-compliance">Leggi la nostra guida alla conformità WCAG 2.2</a>

La soluzione è quasi sempre semplice: sostituisci la frase vaga con un testo che descriva la destinazione o l’azione.

Link generici “qui”

“Clicca qui per scaricare il report” non funziona per lo stesso motivo — la parola del link stessa è solo “qui”.

<!-- Non supera -->
<p>Per i risultati completi, clicca <a href="/report.pdf">qui</a>.</p>

<!-- Supera: il testo del link descrive ciò a cui si collega -->
<p>Scarica il <a href="/report.pdf">report dell'audit di accessibilità 2025 (PDF)</a>.</p>

Nota l’indicatore PDF tra parentesi — è una buona pratica per informare gli utenti che seguendo il link si aprirà un PDF anziché una pagina web.

Link alla stessa destinazione con testo diverso, o a destinazioni diverse con lo stesso testo

Entrambi creano confusione. Se cinque link di navigazione dicono tutti “Scopri di più” ma puntano a pagine di servizi diverse, gli utenti non possono prevedere dove atterreranno. Al contrario, due link diversi che dicono “Guida alla conformità WCAG” ma portano a pagine diverse sono altrettanto fonte di confusione.

Link e pulsanti composti solo da un’icona

Un link o un pulsante che contiene solo un’icona — senza testo visibile — deve avere un nome accessibile fornito tramite aria-label o aria-labelledby. Senza di esso, gli screen reader annunciano il nome del file dell’immagine dell’icona o nulla del tutto.

<!-- Non supera: annunciato come "link, immagine" o come il nome del file SVG -->
<a href="/social/twitter">
  <svg><!-- icona twitter --></svg>
</a>

<!-- Supera: aria-label fornisce il nome accessibile -->
<a href="/social/twitter" aria-label="QualiBooth su Twitter">
  <svg aria-hidden="true"><!-- icona twitter --></svg>
</a>

L’attributo aria-hidden="true" sull’SVG impedisce agli screen reader di annunciare il titolo o il contenuto dell’SVG — poiché il link stesso ha già un’etichetta, il contenuto dell’icona è ridondante.

Usare aria-label per integrare il testo visibile

Quando una pagina ha più link “Scarica” e non puoi cambiare il testo visibile (un vincolo di design), aria-label può estendere il nome accessibile:

<!-- Il testo visibile è "Scarica" ma il nome accessibile è la stringa completa -->
<a href="/report-2025.pdf" aria-label="Scarica il report di accessibilità 2025 PDF">
  Scarica
</a>

Un’avvertenza: il criterio WCAG 2.5.3 richiede che il nome accessibile inizi con il testo visibile. “Scarica il report di accessibilità 2025 PDF” inizia con “Scarica” — bene. “Report di accessibilità 2025 — Scarica PDF” no — male.

Link che si aprono in una nuova scheda

Aprire una nuova scheda senza preavviso disorienta gli utenti, in particolare quelli con disabilità cognitive o gli utenti di screen reader che potrebbero non rendersi conto di cosa sia successo. Indica il comportamento di apertura in una nuova scheda nel testo del link o con una nota nascosta visivamente.

<!-- Segnala il comportamento di nuova scheda visivamente e alla tecnologia assistiva -->
<a href="https://example.com" target="_blank">
  Visualizza il report di esempio
  <span class="sr-only">(si apre in una nuova scheda)</span>
</a>

Quando il testo del link funziona senza essere ovvio

Il contesto può legittimamente fornire il significato mancante ai sensi del criterio WCAG 2.4.4. Un link “Scarica” è accettabile se si trova in una cella di tabella la cui intestazione di colonna dice “Report annuale” e la cui intestazione di riga dice “2025”. Il contesto rende chiaro lo scopo.

Questo è diverso da un link “Leggi di più” alla fine di un paragrafo autonomo. Il paragrafo fornisce il contesto, ma “Leggi di più” non funziona comunque perché il testo del link potrebbe applicarsi a qualsiasi paragrafo — non identifica in modo univoco la destinazione.

Link immagine

Quando il contenuto del link è un’immagine anziché un testo, l’attributo alt dell’immagine diventa il nome accessibile del link. Il testo alternativo dovrebbe descrivere la destinazione del link, non l’immagine stessa.

<!-- L'alt descrive la destinazione del link, non l'aspetto dell'immagine -->
<a href="/services/audits">
  <img src="audit-icon.png" alt="Servizi di audit di accessibilità">
</a>

Se l’immagine è puramente decorativa ed è accompagnata da testo visibile nello stesso link, l’immagine dovrebbe avere alt="" per evitare di annunciare due volte lo stesso testo.

Un audit rapido che puoi eseguire da solo

Apri la tua pagina e richiama l’elenco dei link usando il tuo screen reader (oppure installa l’estensione gratuita per browser HeadingsMap o WAVE per vedere i link estratti dal contesto). Leggi l’elenco. Se non riesci a capire dove porta ciascun link dal solo testo, allora va migliorato.

La correzione più comune è aggiungere un <span class="sr-only"> (nascosto visivamente, accessibile agli screen reader) con contesto aggiuntivo, o semplicemente riscrivere del tutto il testo del link. Riscrivere è sempre preferibile — spesso migliora l’usabilità per tutti, non solo per gli utenti di screen reader.

Per una revisione approfondita dei link del tuo sito e degli altri criteri WCAG, i nostri audit di accessibilità manuali coprono lo scopo dei link come parte di una revisione più ampia condotta da tester che usano la tecnologia assistiva ogni giorno.

Come navigano realmente gli utenti di screen reader