Ti sei mai chiesto come faccia un non vedente che naviga in internet a sapere che a un certo punto della pagina ci sia un’immagine, e come faccia soprattutto a sapere cosa raffigura tale immagine? Questa è la funzione del cosiddetto alt text, o testo alternativo.
Il testo alternativo è una breve descrizione dell’immagine e si tratta semplicemente di un piccolo codice. Puoi ben capire che, se le immagini del tuo sito non contengono questo codice, le tue pagine saranno molto difficili da navigare da parte di chi utilizza uno screen reader.
Lo screen reader, infatti, è una voce che legge tutto il testo mostrato a schermo e indica la funzione degli elementi presenti. Indicazione che darà anche ogni volta che incontra un’immagine. Se però noi proprietari del sito web non usiamo l’alt text, la voce dirà semplicemente “Grafico”, senza alcuna informazione aggiuntiva. Chi naviga il sito con questi strumenti, quindi, non saprà assolutamente cosa essa rappresenti.
Alt text: il codice
Ora ti porto dietro le quinte e ti mostro esattamente come si inserisce un’immagine su un sito web a livello di codice. Non è difficile!
La logica è questa:
- Per prima cosa, bisogna dare l’istruzione “inserisci un’immagine”;
- Poi, bisognerà dire quale immagine inserire.
Già questo è sufficiente per raggiungere lo scopo, ma non è di certo completo. L’ultimo passaggio è:
- Dire cosa l’immagine raffigura.
Il codice finale sarà questo:
<img src=”https://evyweb.it/cagnolino.jpg” alt=”cagnolino bianco in mezzo all’erba”>
Sembra complicato? In realtà non lo è affatto. Osserva:
- img: sta per image, indica che verrà inserita un’immagine
- src=”…”: sta per search, ovvero: cerca l’immagine a questo URL, a questo indirizzo. L’immagine in questione si trova nel mio sito e questo è il suo URL: “https://evyweb.it/cagnolino.jpg”.
- alt=”…”: questo è il testo alternativo. In gergo tecnico, si dice che sia un attributo del tag img. Qui inseriamo una breve descrizione dell’immagine: “cagnolino bianco in mezzo all’erba”
Il risultato del codice che hai visto sopra è esattamente questo:
Ti starai chiedendo dove sia finito il testo alternativo che descrive l’immagine. Beh, si trova “dietro le quinte”. Chi guarda il monitor, non si accorge nemmeno che quel testo esiste. Chi invece usa lo screen reader, sentirà “Grafico – cagnolino bianco in mezzo all’erba”.
Come si inserisce un alt text
Abbiamo parlato tanto di codice. Ma quindi, per inserire l’alt text, bisogna lavorare con il codice di programmazione?
In realtà no, ormai non è necessario saper programmare per realizzare un sito web. Prendiamo come esempio WordPress, il sistema di creazione di siti web che utilizziamo noi di Evyweb.
Per inserire un’immagine su WordPress, basta premere sul pulsante “+”, selezionare il blocco “Immagine” e caricare l’immagine dal proprio computer.
Quando l’immagine è selezionata, compaiono dei campi da compilare. Uno di questi è proprio il testo alternativo. Basterà inserire qui la descrizione e il gioco è fatto.
Cosa scrivere nel testo alternativo
Inserire un testo alternativo, come hai visto, è molto semplice dal punto di vista tecnico. Forse è più complicato decidere cosa inserire come descrizione dell’immagine.
Ci sono di solito tre errori:
- Scrivere troppo poco;
- Scrivere troppo;
- Scrivere qualcosa che non c’entra nulla.
Se scrivi solo una o due parole, non fornirai sufficienti informazioni per far capire cosa rappresenta l’immagine inserita. Torniamo al nostro simpatico cagnolino. Se avessi scritto semplicemente “cane”, sarei stata troppo generica. Che tipo di cane? Cosa fa questo cane? Dove si trova?
Se scrivi invece una descrizione degna di Honoré De Balzac, potrebbe essere totalmente fuori luogo. “cucciolo di cane dal pelo molto chiaro, quasi bianco-crema, sdraiato tranquillamente su un prato verde. Il cagnolino è ripreso da vicino e all’altezza dei suoi occhi, ha un manto soffice e vaporoso, particolarmente folto sul corpo. Le orecchie sono morbide e pendenti, di una tonalità leggermente più calda rispetto al resto del pelo. Il muso è rivolto direttamente verso l’obiettivo…” Ci siamo capiti. Sono tutti dettagli che arricchiscono la descrizione, certo, ma valutiamo volta per volta qual è il livello di precisione che davvero serve.
E poi c’è il caso in cui viene scritto un alt text che non descrive affatto l’immagine. Questo può dipendere da due fattori:
- Per guadagnare posizioni sui motori di ricerca;
- Per distrazione o negligenza.
Il primo caso è molto comune. Google e i motori di ricerca utilizzano l’alt text per capire cosa rappresentano le immagini e, quindi, per posizionare un sito più in alto o più in basso nella pagina dei risultati di ricerca. Supponiamo che, per il nostro cagnolino, io avessi usato l’alt “Testo alternativo immagini”. Avrei cioè inserito la parola chiave importante per questo articolo, cercando di “ingannare” Google e forzandolo a mettere il mio sito più in alto rispetto ad altri risultati. Non descriverei affatto la mia immagine, andando quindi a discapito di chi ha davvero bisogno di quel testo.
L’ultimo caso è quello dei “distratti”. Alcuni sistemi di creazione di siti web inseriscono automaticamente l’alt text delle immagini, spesso utilizzando il nome del file. Il mio file si chiama cagnolino.jpg, quindi il testo alternativo poteva essere inserito automaticamente come “cagnolino”. In questo esempio, il danno non è poi così grave, la descrizione sarebbe semplicemente incompleta. Ma cosa mi dici se il tuo file si chiamasse “WhatsApp Image 2026-08-06 at 13.19.04 (1).jpeg”? Puoi ben capire che non sarebbe affatto un segno di attenzione all’accessibilità!
Errore bonus! Inserire la parola “immagine” nell’alt text. Non c’è bisogno di scrivere “immagine che raffigura…”, la voce del lettore di schermo annuncia già che si tratta di un’immagine. Sarebbe una ripetizione piuttosto noiosa e inutile.
Cosa succede se l’alt è vuoto?
Se il testo alternativo non viene inserito, l’immagine funziona lo stesso, cioè compare effettivamente a schermo, ma chi usa uno screen reader non saprà cosa essa raffigura. La voce dirà semplicemente “Grafico” (e anche Google a quel punto non saprebbe cosa essa rappresenta).
Per avere un sito accessibile, è sempre meglio utilizzare l’alt text su tutte le immagini, anche se ci sono casi in cui non è obbligatorio. Si tratta delle immagini puramente decorative. Un separatore, una riga, un ghirigoro usato per decorare un bordo possono anche avere un alt vuoto, secondo le linee guida WCAG. Noi, a volte, preferiamo inserirlo anche in queste situazioni, anche se ogni caso merita una valutazione a sé.
Lo screen reader, infatti, rileva la presenza dell’immagine. Lasciare che il visitatore del sito non sappia cosa essa rappresenta potrebbe confonderlo: sarà effettivamente un’immagine decorativa, oppure si sono dimenticati di metterci l’alt?
Conclusione
Il testo alternativo delle immagini su una pagina web è un piccolo dettaglio, semplicissimo da inserire, che però rappresenta un importantissimo elemento di accessibilità. Ricorda di utilizzarlo su tutte le immagini del tuo sito, in particolare quelle non decorative, e fai attenzione a essere sufficientemente descrittivo ma senza esagerare.