Come aggiungere il testo alternativo (alt text) a un'immagine

Che cos'è l'attributo alt?

Il testo alternativo (attributo alt) è un <img> tag e descrive a parole il contenuto dell'immagine: <img src="..." alt="...">. Quando l'immagine non può essere caricata (connessione lenta, percorso del file errato), viene visualizzato al suo posto nel browser, viene letto ad alta voce dagli screen reader per gli utenti non vedenti e permette ai motori di ricerca di capire di cosa si tratta, poiché Google non “vede” l’immagine a livello di pixel, ma si affida principalmente al testo circostante e all’attributo alt.

Il testo alternativo ha uno scopo completamente diverso dal nome del file dell’immagine (ad es. IMG_2031.jpg): il nome del file serve al server o al file system, mentre il testo alternativo serve a trasmettere significato. I due non devono essere confusi.

Anche il testo alternativo e la didascalia (caption) che appare sotto l’immagine sono due cose diverse: la didascalia è un testo visibile a tutti sulla pagina, mentre il testo alternativo, in condizioni normali, non è visibile e viene visualizzato solo quando l’immagine non può essere caricata o quando viene letta da uno screen reader. Questa distinzione viene spesso confusa.

Sebbene in alcuni ambienti di sviluppo lasciare vuoto l’attributo alt possa superare la validazione HTML, questa validità tecnica non significa che il testo alternativo sia effettivamente significativo; lo strumento di validazione controlla solo la presenza dell’attributo, non la qualità del suo contenuto.

Perché è importante?

Il testo alternativo è fondamentale sia per l’accessibilità che per la SEO delle immagini. Gli utenti non vedenti, mentre navigano nella pagina con i software di lettura dello schermo, apprendono il contenuto dell’immagine dal testo alternativo; se questo testo manca, il software di lettura dello schermo di solito legge solo «immagine» o il nome del file, il che comporta una perdita di informazioni. In alcuni paesi l’accessibilità può anche essere un obbligo di legge.

I motori di ricerca, invece, poiché non possono “vedere” direttamente il contenuto delle immagini, si basano sul testo alternativo per classificare la pagina nei risultati di ricerca per immagini (Google Immagini). Aggiungere il testo alternativo corretto alle immagini dei prodotti nei siti di e-commerce può aumentare il traffico aggiuntivo proveniente da Google Immagini. La mancanza del testo alternativo influisce negativamente sia sull’esperienza dell’utente che sul traffico proveniente dalla ricerca per immagini.

Quando un’immagine si carica lentamente con una connessione lenta o non si carica affatto, il testo alternativo è l’unica fonte di informazioni che permette all’utente di capire cosa aspettarsi in quella sezione; ciò rende il testo alternativo importante non solo per la SEO, ma anche per l’accessibilità generale.

Come risolvere il problema?

Scrivi un testo alternativo breve e descrittivo per ogni immagine significativa.
Solo per le immagini a scopo puramente decorativo (ad es. decorazioni di sfondo) utilizzate alt="" in modo che lo screen reader salti l’immagine; questo è diverso dal non aggiungere affatto l’attributo alt.
Utilizzate la parola chiave solo se descrive realmente l’immagine e in modo naturale.
Mantenete il testo alternativo breve e chiaro; evitate frasi inutilmente lunghe, di solito bastano poche parole.
Nelle immagini dei prodotti, specificate il nome del prodotto e le caratteristiche salienti (come colore, modello, angolazione).
Se si esegue un caricamento in blocco nel proprio sistema di gestione dei contenuti, invece di compilare automaticamente il testo alternativo, crearlo manualmente il più possibile o, almeno, utilizzando un modello significativo basato sul nome del prodotto.
Nel caso di immagini complesse, come infografiche o tabelle, valutate la possibilità di presentare i dettagli che non rientrano nel testo alternativo sotto l’immagine stessa, sotto forma di testo semplice.

Esempio

<img src="scarpa-sportiva-rossa.jpg" alt="Scarpa sportiva da uomo rossa, vista laterale">

Esempio negativo: <img src="IMG_2031.jpg" alt="resim"> — né il nome del file né il testo alternativo forniscono alcuna informazione sul contenuto dell’immagine. Un altro esempio negativo: alt="scarpe scarpe scarpe sportive scarpe economiche scarpe in saldo compra ora" — questo, invece di descrivere una singola immagine, ha lo scopo di riempire di parole chiave e crea un’esperienza insignificante e noiosa per l’utente di uno screen reader.

Errori comuni

Lasciare completamente vuoto l’attributo alt (nelle immagini non decorative).
Utilizzare come testo alternativo nomi di file privi di significato, come "immagine1.jpg" o "IMG_2023".
Riempire il testo alternativo con una serie consecutiva di parole chiave (ad es. «scarpe, scarpe da ginnastica, scarpe economiche, scarpe in saldo»).
Ripetere lo stesso testo alternativo generico in tutte le immagini.
Il rapporto di Seoraporu.co elenca uno per uno tutti i testi "alt" mancanti; nei siti di grandi dimensioni questo è in genere un problema che deve essere risolto in blocco nel modello di gestione dei prodotti/immagini.