Scrivi testo dei link descrittivo

Cosa controlla questo check

Ispeziona ogni <a href> della pagina e calcola il nome accessibile (testo visibile, aria-label o alt text di un <img> figlio). Il check fallisce quando:

• Il nome è vuoto (un <a><svg/></a> nudo senza testo né label).
• Il nome è una frase generica: “clicca qui”, “qui”, “leggi di più”, “scopri di più”, “altro”, “questo”.
• Lo stesso nome generico punta a URL diverse in punti diversi della pagina — un utente di screen reader che elenca tutti i link sente “clicca qui, clicca qui, clicca qui” senza alcun modo di distinguerli.

Perché è importante

Gli utenti di screen reader navigano elencando i link. In NVDA: Insert+F7. In VoiceOver: Ctrl+Option+U → Links. L’utente vede il testo del link fuori contesto, in ordine alfabetico, e ne sceglie uno. “Leggi di più” non gli dice niente.

• Anche gli utenti vedenti scorrono. Gli studi di eye-tracking (Nielsen Norman, ogni replica) mostrano che gli utenti scansionano prima il testo dei link e saltano la prosa attorno. I link descrittivi servono anche da segnaletica.
• Ranking di ricerca. L’anchor text dei link interni è uno dei pochi segnali testuali di cui Google si fida ancora. Un link “Clicca qui” alla tua pagina prezzi spreca lo spazio; “Prezzi MetricSpot” no.
• Citazione AI. ChatGPT, Perplexity e Google AI Overviews citano l’anchor text quando mostrano un link in una citazione. “Clicca qui” produce una citazione senza anteprima del contenuto.

Come risolvere

Fai sì che il testo di ogni link descriva la sua destinazione, anche letto fuori contesto.

Da evitare:

<p>To learn more about our pricing, <a href="/pricing/">click here</a>.</p>

Da fare:

<p>See our <a href="/pricing/">pricing tiers and free trial</a>.</p>

Link con sola icona — usa aria-label:

<a href="https://twitter.com/metricspot" aria-label="MetricSpot on X">
  <svg aria-hidden="true">…</svg>
</a>

L’aria-hidden="true" sull’SVG impedisce che il contenuto accessibile dell’icona trasudi; l’aria-label fornisce il nome. Senza questo, gli screen reader annunciano “link” con qualunque path data riescano a estrarre.

Card “Leggi di più” (elenchi di post di blog). La soluzione è estendere l’anchor a coprire l’intera card o includere il titolo del post:

<!-- Bad: every "Read more" is identical -->
<article>
  <h3>Why your CWV are tanking</h3>
  <p>Three patterns we see…</p>
  <a href="/blog/cwv/">Read more</a>
</article>

<!-- Better: title becomes the link -->
<article>
  <h3><a href="/blog/cwv/">Why your CWV are tanking</a></h3>
  <p>Three patterns we see…</p>
</article>

<!-- Or: visually-hidden context appended -->
<a href="/blog/cwv/">Read more<span class="sr-only"> about Core Web Vitals</span></a>

Più link identici verso destinazioni diverse. Se hai diversi pulsanti “Modifica” in una tabella, accoda invisibilmente il contesto della riga:

<a href="/users/42/edit">Edit<span class="sr-only"> Jane Patel</span></a>
<a href="/users/43/edit">Edit<span class="sr-only"> Alex Diaz</span></a>

Linter. eslint-plugin-jsx-a11y include una regola anchor-has-content. Aggiungi una regola custom che vieti i testi anchor “clicca qui” / “leggi di più” — sono red flag nel 100% dei casi.

Domande frequenti

”Leggi di più →” è accettabile se è associato visivamente a un titolo?

Gli utenti vedenti lo associano al titolo sopra; gli utenti di screen reader lo sentono isolato. O fai del titolo il link (meglio) o accoda <span class="sr-only"> su [titolo del post]</span> per mantenere il design visivo e aggiungere il contesto.

E le icone di link esterno?

L’icona è decorativa; nascondila con aria-hidden="true" oppure includi “(link esterno)” in testo nascosto visivamente. Non affidarti alla sola icona per gli utenti di screen reader.

Aprire un link in una nuova scheda conta come descrittivo?

No — target="_blank" è un comportamento, non un nome. Se vuoi che gli screen reader lo annuncino, includi “(si apre in una nuova scheda)” come testo visibile o sr-only. A molti utenti non piace il comportamento inatteso di nuova scheda; se devi usarlo, segnalalo.