Collegamenti vuoti

Silktide trova i collegamenti che non contengono alcun testo: nulla di visibile e nessuna alternativa testuale. Una persona che usa uno screen reader sente solo «collegamento», senza alcun modo per sapere dove porta.

<!-- Vuoto: un collegamento con icona senza alternativa testuale -->
<a href="/search"><svg>...</svg></a>

<!-- Corretto: il testo alternativo dell'immagine indica la destinazione -->
<a href="/"><img src="logo.png" alt="Home di Example Corp"></a>

<!-- Corretto: un aria-label indica la destinazione -->
<a href="/search" aria-label="Cerca"><svg>...</svg></a>

Perché è importante

I collegamenti sono il modo in cui le persone si spostano all'interno del sito web, ma non tutti possono vederli. Uno annuncia ogni collegamento usando il testo; quando il testo manca, l'utente sente soltanto «collegamento» e deve indovinare dove porta o saltarlo. Molte persone non vedenti navigano anche aprendo un elenco di tutti i collegamenti presenti nella pagina: un elenco di voci senza nome è inutile.

I collegamenti vuoti di solito vengono creati accidentalmente: un'icona sostituisce il testo, un'immagine perde il proprio oppure un tag <a> rimasto isolato viene lasciato da un editor. Anche i motori di ricerca non sono in grado di capire dove porta un collegamento vuoto.

Come correggerli

Se il collegamento deve contenere testo visibile, aggiungilo.
Se il collegamento è un'immagine, assegna all'immagine un testo alternativo che indichi la destinazione, ad esempio alt="Home di Example Corp" per un logo che rimanda alla home page, non una descrizione dell'immagine.
Se il collegamento è un'icona, aggiungi un che indichi la destinazione oppure includi del testo nascosto visivamente ma disponibile agli screen reader.
Se il collegamento è un residuo senza contenuto né scopo, eliminalo.

Come Silktide esegue il controllo

Individua ogni collegamento in ciascuna pagina, comprese le aree delle mappe immagine.
Ignora gli elementi privi di una destinazione funzionante del collegamento.
Legge il testo del collegamento, compresi il testo alternativo e le alternative testuali come aria-label e title presenti sul collegamento e qualsiasi contenuto al suo interno.
Segnala il collegamento se non viene trovato alcun testo.

Risoluzione dei problemi

Il collegamento appare corretto nella pagina

Un collegamento può apparire corretto pur essendo vuoto, perché il suo aspetto deriva da un'icona o da un'immagine di sfondo , nessuna delle quali gli assegna un nome. Controlla il codice sottostante per verificare la presenza di un'alternativa testuale.

Il significato dell'icona è ovvio

Solo per chi può vederla. Visivamente, una lente d'ingrandimento indica «cerca», ma uno screen reader non può descrivere le immagini prive di un'alternativa testuale: l'etichetta deve essere presente nel markup.