Come usare il tag alt per le immagini

Sono in molti a non sapere quanto in realtà sia diventato fondamentale per chi possiede un sito web aggiungere il tag Alt ad ogni immagine che compare. Una procedura piuttosto semplice se si è soliti utilizzare HTML visto che altro non è che una stringa di testo da inserire nel codice che fornisce informazioni descrittive su ciò che è visualizzabile sullo schermo. Per convenzione viene chiamato tag anche se volendo essere precisi, per definizione è un attributo del tag img che permette di inserire informazioni aggiuntive sull’immagine in determinate circostanze come:

• guida per persone non vedenti che utilizzano appositi browser con software di screen reader che riproducono in audio ciò che viene visualizzato sulle diverse pagine, quindi anche per le immagini.
• in caso di errore di caricamento viene visualizzato in automatico il testo alternativo per far capire comunque a cosa rimanda l’immagine, per questo motivo deve essere il più preciso e descrittivo possibile.
• in ottica SEO per i motori di ricerca che anche dal testo contenuto nell’alt riescono ad indicizzare i contenuti e a fornire le giuste risposte alle query degli utenti.

Come inserire gli alt e perché 

Come già accennato prima, nell’inserire un testo alternativo si deve cercare di essere il più descrittivi possibile per aiutare a capire quale sia il reale contenuto di un’immagine. La foto deve quindi poter essere visualizzata nell’immaginario del lettore anche non avendola direttamente davanti, prestando però sempre attenzione all’ottimizzazione SEO del testo che prevede:

• testi brevi ma allo stesso tempo completi;

• diversi tag alt per ogni immagine o contenuto visivo che compare sulla pagina;

• evitare Keyword usate solo per attirare l’attenzione dei crawler;

• usare keyword pertinenti e adatte alla circostanza, anche se non obbligatorie.

Una volta prese in considerazione queste accortezze può essere comodo mostrare come appare fisicamente il tag alt all’interno del codice, così da poterlo riprodurre all’evenienza in modo rapido:

<img src=”http://syrusindutry/logo.png” alt=”Logo ufficiale della pagina syrus industry e dell’azienda” />

Conclusioni

Come possiamo aver capito leggendo l’articolo, tutte le immagini dovrebbero avere un alternative text, a meno che non siano immagini con l’obiettivo di decorare e inutili ai fini contenutistici della pagina ( usare CSS in questo caso). Un piccolo sforzo che però come abbiamo visto risulta essere importante sia per l’esperienza utente che per i motori di ricerca. Investire poco tempo spesso porta a grandi risultati!