Accessibilità

Perché i link 'clicca qui' e 'scopri di più' sono un problema di accessibilità

Gli utenti di screen reader spesso sfogliano i link completamente fuori ordine — un testo di link vago rompe del tutto questo meccanismo.

Cos'è

Il testo di link è l'effettiva parola o frase cliccabile di un link — in "Clicca qui per vedere i nostri prezzi", le parole "clicca qui" sono il testo del link, anche se "prezzi" è la parola che porta effettivamente il significato in quella frase. Questo controllo cerca link con testo vago e generico come "clicca qui", "scopri di più", o "link", invece di un testo descrittivo che indichi dove porta effettivamente il link.

Molti screen reader includono una funzione che permette a un utente di richiamare un elenco di ogni link in una pagina, completamente fuori dal contesto della frase circostante, specificamente per spostarsi rapidamente in una pagina — che è esattamente la situazione in cui il testo di link generico smette di funzionare.

Perché è importante

Quando un utente di screen reader richiama quell'elenco di link fuori contesto, una pagina piena di link che dicono tutti "clicca qui" o "scopri di più" non dà loro modo di distinguere una destinazione dall'altra — si ritrovano con un elenco di voci identiche e prive di significato invece di un modo davvero utile per navigare il contenuto della pagina. Anche senza usare quella funzione specifica, sentire un link annunciato semplicemente come "clicca qui" a metà frase non dà alcuna indicazione anticipata di dove porti prima di decidere se seguirlo.

Questa è una correzione puramente scritta, senza codice — a differenza di molti problemi di accessibilità, non richiede alcun cambiamento tecnico, solo scegliere parole diverse per lo stesso link.

Come risolverlo

  1. Cerca nel contenuto della tua pagina frasi di link generiche come "clicca qui", "scopri di più", "leggi tutto", o "link" usate come intero testo cliccabile.
  2. Riscrivi ognuna così che il testo del link stesso descriva la destinazione — "Guarda i nostri piani tariffari" invece di "clicca qui per i prezzi", per esempio.
  3. Per un link "scopri di più" che segue il riassunto di un articolo, valuta di rendere cliccabile il titolo stesso dell'articolo invece di una frase generica separata.
  4. Per link con solo icona (come le icone dei social media), abbinali a un aria-label che descriva la destinazione, in modo simile alla correzione per i pulsanti con solo icona.
  5. Testa con la funzione elenco link di uno screen reader gratuito (disponibile in NVDA e VoiceOver) per confermare che ogni link ora si legga come distinto e significativo da solo.

Verifica se il tuo sito ha questo problema

Launch Readiness analizza il tuo sito alla ricerca di questo e altri ~50 problemi prima del lancio, in pochi secondi — gratis, senza registrazione.

Avvia un'analisi gratuita