Testo alternativo per immagini nei link

Silktide individua i link che contengono un'immagine ma nessun testo leggibile di alcun tipo. Un link di questo tipo non ha un nome, quindi le persone che non possono vedere l'immagine non hanno modo di sapere dove conduce.

<!-- Problema: il link non ha un nome accessibile -->
<a href="/apple">
    <img src="apple.png">
</a>

<!-- Corretto: il testo alternativo identifica il link -->
<a href="/apple">
    <img src="apple.png" alt="Una mela rossa">
</a>

Perché è importante

Quando l'unico contenuto di un link è un'immagine, il dell'immagine diventa il nome del link. Senza di esso, uno annuncia qualcosa come "link" oppure prova a leggere l'URL di destinazione o il nome del file dell'immagine: nessuna di queste informazioni comunica all'ascoltatore dove conduce il link. La navigazione costruita con link contenenti immagini, come loghi e menu con icone, diventa un'operazione basata su supposizioni.

Anche le persone che usano la tastiera e i comandi vocali ne risentono: un link senza nome è difficile da selezionare con i comandi vocali e non ha alcun significato in un elenco di link.

Come risolvere il problema

Aggiungi un testo alternativo all'immagine che descriva lo scopo del link, ovvero dove conduce o cosa fa, anziché l'aspetto dell'immagine. Per un logo collegato, "Home" o il nome della tua organizzazione è preferibile a "logo".
In alternativa, aggiungi testo visibile all'interno del link, accanto all'immagine; in questo caso l'immagine può avere un alt="" vuoto.
Correggi i template nel tuo in cui lo stesso link con icona senza etichetta viene ripetuto in più pagine.

Come Silktide esegue questo controllo

Individua ogni immagine contenuta in un link, ignorando i link nascosti agli screen reader.
Legge tutto il testo che il link espone alle , compreso il testo alternativo di tutti gli elementi che contiene.
Segnala l'immagine quando il testo combinato non contiene lettere o numeri, lasciando il link senza un nome utilizzabile.

A differenza degli altri controlli sul testo alternativo, un alt="" vuoto non supera questo controllo: se l'immagine è l'unico contenuto del link, contrassegnarla come decorativa lascia il link senza nome.

Risoluzione dei problemi

L'immagine è decorativa

All'interno di un link senza altro testo, un'immagine non può essere trattata come puramente : qualcosa deve identificare il link. Aggiungi all'immagine un testo alternativo che descriva la destinazione oppure aggiungi testo visibile al link.

Il link è etichettato in un altro modo

Questo controllo legge il testo e il testo alternativo presenti nel link. Se il link è denominato con altri mezzi e hai verificato che venga annunciato correttamente da uno screen reader, puoi il risultato.