Immagini e testo alternativo

Magari hai già sentito parlare di alt text o testo alternativo quando si parla di immagini. In questo articolo ti spiego che cos’è, perché è così importante impostarlo per ogni immagine significativa del tuo sito, blog o e-commerce e come fare.

Che cosè l’alt text o testo alternativo

L’alt text è un attributo HTML che serve per specificare il cosiddetto testo alternativo.

Il testo alternativo è quella frase che deve descrivere a parole il contenuto di un’immagine posta in una pagina web: specificare una descrizione per ciascuna immagine serve essenzialmente per chi non può vedere il contenuto dell’immagine, e per navigare fra i contenuti online usa un software speciale che si chiama screenreader.

Lo screeenreader legge a voce alta tutto ciò che è contenuto a monitor, dall’alto verso il basso, da sinistra a destra (o al contrario, nelle lingue RTL), come farebbe qualsiasi persona. Uno screenreader legge quindi essenzialmente testo. Quando lo screenreader incontra nel flusso un’immagine, può comportarsi in due modi:

• se impostato l’attributo HTML alt-text, lo screenreader leggerà il testo alternativo, che descrive l’immagine.
• viceversa, se l’alt text NON è stato impostato, lo screenreader passerà oltre, precludendo di fatto ad un ipovedente una parte del contenuto presente sulla pagina.

Un immagine vale più di mille parole, si dice, e a proposito di immagini, ti ho già raccomandato di caricare immagini ottimizzate. Lo step ulteriore nell’ottimizzazione consiste proprio nell’aggiungere l’alt text all’immagine, una volta che l’hai caricata.

L’alt text non è importante solo per i non vedenti: anche a Google piacciono di più le pagine con immagini in cui l’alt text è stato compilato.

Sebbene la tecnologia si è molto evoluta negli ultimi anni ed esistono software potenti in grado di leggere ed interpretare con precisione le immagini grazie a sistemi ad intelligenza artificiale, scrivere l’alt text è, tuttavia, una buona prassi da acquisire e mantenere, anche per riuscire a posizionare su Google le nostre immagini.

Come e dove si compila l’alt text su WordPress?

È molto semplice: tutte le volte che carichi un’immagine, hai la possibilità di farlo.

Una volta caricata l’immagine nel corpo del testo dell’articolo o della pagina, occorre compilare opportunamente l’apposito spazio nelle opzioni del blocco immagine, sulla colonna di destra.

Il testo alternativo è talmente importante che perfino WordPress ci spiega il motivo sotto al campo da compilare: “Il testo alternativo descrive la tua immagine per le persone che non la possono vedere. Aggiungi una breve descrizione con i dettagli fondamentali.”

Se, facendo un rapido “esame di coscienza” ti renti conto che non hai mai impostato un alt text per nessuna delle immagini del tuo sito/ blog, puoi rimediare così.

Vai alla sezione Media > Libreria, seleziona il layout a griglia e inizia dalla prima foto che trovi. Clicca sopra l’immagine.

Ti si apre davanti agli occhi una finestra a due colonne. Sulla sinistra hai l’anteprima dell’immagine, sulla colonna di destra invece, trovi i dettagli del file. Inizia a compilare su questa colonna i campi vuoti, tenendo presente che:

• testo alternativo è la descrizione di ciò che l’immagine raffigura per essere letta dagli screenreader agli ipovedenti;
• titolo è un attributo molto simile al titolo pagina di cui ti ho parlato qui, compilalo con alcune parole chiave. Ciò che scrivi in questo campo ti apparirà come frase in sovraimpressione al passaggio del mouse.
• didascalia è il commento da rendere visibile sotto all’immagine stessa. Tipicamente contiene riferimenti al testo oppure i crediti della foto
• descrizione è più un testo per uso interno.

Pensi che il testo alternativo non sia importante?

Il testo alternativo è uno degli aspetti dell’accessibilità di un sito che sono esclusiva responsabilità di chi ne gestisce direttamente i contenuti. Ed è così importante ché perfino Instagram, da un po’ di tempo a questa parte, ha aggiunto la possibilità di scrivere il testo alternativa sulle foto che postiamo nel nostro feed. Leggi qui per approfondire.

Quindi corri ad aggiungere il testo alternativo a tutte le immagini del tuo sito/ blog 😉