Controllo del testo alternativo delle immagini
Ogni immagine, giudicata a parole

Il ruolo del testo alternativo

Il testo alternativo è la frase che sostituisce un’immagine quando non si può vedere.

Lo screen reader lo pronuncia per chi non vede l’immagine. Un browser lo mostra quando il file non si carica. Inoltre lo leggono i motori di ricerca, perché è la descrizione più chiara di ciò che mostra un’immagine.

Quindi la domanda non è mai solo se un’immagine ha il testo alternativo. Invece, la domanda è se quelle parole avrebbero senso per chi non può vedere l’immagine.

È la domanda che questo strumento pone a ogni immagine e a ogni tag alt della pagina, e risponde con parole chiare invece di un semplice superato o non superato.

Alt mancante e alt vuoto sono diversi

Se manca l’alt, è un errore. Non avendo nulla da leggere, molti screen reader ripiegano sul nome del file e leggono qualcosa come "IMG trattino basso 4031 punto jpg".

Un alt vuoto, scritto alt="", è invece una scelta. Dice alle tecnologie assistive di saltare l’immagine, cosa che le linee guida del W3C sulle immagini decorative consigliano per un separatore, una forma di sfondo o un’icona accanto a una parola che dice già la stessa cosa.

Per questo il controllo conta i due casi separatamente. Il primo va corretto, mentre il secondo quasi mai richiede qualcosa.

Perché un’immagine con link conta di più

Quando un’immagine è l’unica cosa dentro un link, il suo testo alternativo diventa il nome di quel link.

Senza, il link non ha nome, quindi uno screen reader annuncia l’indirizzo o semplicemente "link". Poi chi scorre la pagina con il tasto Tab trova una fila di fermate identiche e senza nome.

Per questo motivo queste righe compaiono per prime. Inoltre il testo alternativo di un’immagine con link deve descrivere dove porta il link, non com’è l’immagine.

Testo alternativo che passa e fallisce lo stesso

La maggior parte dei validatori si ferma a "l’attributo esiste". Di conseguenza alt="DSC00412.jpg", alt="image" e alt="banner" passano tutti, anche se nessuno dice qualcosa a chi ascolta.

Questo controllo legge le parole. Riconosce nomi di file e di fotocamera, singole parole generiche e inizi come "immagine di", che lo screen reader dice già prima del testo.

Nota anche lo stesso testo alternativo ripetuto su tre o più immagini diverse, perché di solito è un valore predefinito del tema e non una descrizione.

Copie dentro noscript

I plugin di lazy loading lasciano spesso una seconda copia di ogni immagine in un tag noscript per i crawler. Il controllo elenca queste copie e poi le esclude dai conteggi, così nessuna immagine viene giudicata due volte.

La lunghezza giusta per un testo alternativo

Nella maggior parte dei casi, una frase è sufficiente. Molti screen reader tagliano, o almeno diventano difficili da seguire, oltre i 125 caratteri circa.

Se un’immagine richiede più spiegazioni, come un grafico o uno schema, metti il dettaglio in una didascalia visibile o nel testo accanto. Poi tieni l’alt breve e lascia che rimandi lì.

Cosa il controllo non può vedere

Legge la pagina come la invia il server, che è anche ciò che un crawler legge per primo. Di conseguenza le immagini aggiunte dopo da uno script, e quelle impostate come sfondi CSS, qui non compaiono.

Comunque le immagini di sfondo CSS non possono avere testo alternativo. Perciò, se una di esse ha un significato, deve stare in un tag img.