Quando si parla di accessibilità web, poche regole sono conosciute quanto quella del testo alternativo delle immagini. Chiunque abbia utilizzato WordPress, un CMS o un page builder si sarà imbattuto almeno una volta nel campo dedicato all’alt text.
Eppure, proprio perché è una regola tanto nota, è anche una delle più fraintese.
C’è chi inserisce sempre un testo alternativo, qualunque sia l’immagine. C’è chi, al contrario, lo ignora completamente. Altri ancora lo usano pensando soprattutto alla SEO, dimenticando che il suo vero scopo è tutt’altro.
La realtà è che non tutte le immagini devono avere un testo alternativo descrittivo.
In alcuni casi è fondamentale. In altri è addirittura un errore inserirlo.
In questa guida vedremo:
- cos’è davvero l’alt text;
- quando è obbligatorio;
- quando invece deve essere lasciato vuoto;
- gli errori più comuni;
- tre esempi pratici che ti aiuteranno a prendere sempre la decisione giusta.
Preferisci ascoltare?
Questo articolo è disponibile anche come episodio del podcast Switch on: Accessibilità Web.
Ascolta l’episodio “Alt text: quando inserirlo, quando non inserirlo e cosa scrivere” su Spotify.
Cos’è l’alt text?
L’alt text (alternative text) è il testo alternativo associato a un’immagine.
Il suo compito è trasmettere, sotto forma di testo, le informazioni che l’immagine comunica visivamente.
Viene utilizzato principalmente dagli screen reader, cioè quei software che leggono il contenuto delle pagine web alle persone cieche o ipovedenti.
Esiste però anche un secondo caso in cui entra in gioco: quando l’immagine non riesce a caricarsi per problemi di connessione o di rete. In quella situazione il browser può mostrare il testo alternativo al posto dell’immagine.
Dal punto di vista tecnico viene inserito tramite l’attributo alt del tag HTML:
<img src=”camera.jpg” alt=”Fotocamera professionale su treppiede”>
Sembra semplice.
In realtà, è un po’ più complesso di come sembra
Come scrivere alt text
Prima ancora di capire cosa scrivere, è importante chiarire due aspetti tecnici.
L’attributo alt deve essere sempre presente
Molti pensano che, se un’immagine è decorativa, si debba eliminare completamente l’attributo.
Ma questo è sbagliatissimo!
Non rimuovere l’alt completamente, scrivendo qualcosa come:
<img src="colosseo.jpg">Lascialo vuoto, come in questo esempio:
<img src="colosseo.jpg" alt="">Il secondo esempio è l’uso corretto del tag alt e ora ti spiego cosa succede se non lo fai.
Quando uno screen reader trova un’immagine senza attributo alt, non può sapere se l’autore del sito si sia semplicemente dimenticato di descriverla oppure se l’immagine sia davvero decorativa, qundi prova comunque ad annunciarla, leggendo il nome del file o informazioni poco utili come:
“Immagine… colosseo-01-final-definitivo.jpg”
Non particolarmente utile, no?
Al contrario, un attributo alt vuoto rappresenta una dichiarazione esplicita:
“Questa immagine non aggiunge informazioni. Puoi tranquillamente ignorarla.”
Lo screen reader, infatti, la salterà completamente ed è esattamente ciò che devi fare per le immagini decorative.
Altre regole da tenere a mente:
- Evita descrivere “Foto di…”, “Immagine di…”
- Scrivi un testo breve, il più possibile
- se l’immagine si trova in un link o un bottone, descrivi la funzione dell’elemento e non l’aspetto dell’immagine
- scrivi sempre il testo alternativo nel caso di immagini che rappresentano grafici, tabelle e dati
- se l’immagine è decorativa, lascia l’alt vuoto.
L’alt text vale solo per il tag <img>
Un altro equivoco molto diffuso riguarda le immagini di sfondo.
Se un’immagine viene inserita tramite CSS con background-image, non esiste alcun attributo alt.
.hero{
background-image:url(hero.jpg);
}Questo significa che gli screen reader non hanno alcun modo per accedere a quell’immagine.
Ecco perché, in linea generale, tutte le immagini che comunicano informazioni importanti dovrebbero essere inserite nel markup HTML tramite <img> e non come semplice sfondo CSS.
Le immagini di background dovrebbero essere utilizzate esclusivamente quando hanno una funzione estetica o decorativa.
Cosa dicono le WCAG
L’argomento è disciplinato dal criterio di successo WCAG 2.2 – 1.1.1 Non-text Content, livello A, cioè il livello di conformità più basilare previsto dalle linee guida.
La regola, semplificando molto, afferma che:
Tutti i contenuti non testuali devono avere un’alternativa testuale equivalente.
Detta così sembra facile ma c’è una frasetta finale che mi ha sempre mandato in paranoia:
…tranne quando il contenuto è puramente decorativo.
Ed è proprio la parola decorativo che genera la maggior parte degli errori: quando un’immagine è da considerarsi decorativa?
Cosa significa davvero “immagine decorativa”?
Molti pensano che una fotografia sia automaticamente importante e che un’icona o un’illustrazione siano automaticamente decorative.
In realtà non devi ragionare sul tipo di immagine, ma sul ruolo che quell’immagine svolge nella pagina.
Una fotografia può essere completamente decorativa.
Un’icona minuscola può essere significativa.
Una semplice illustrazione può contenere un’informazione decisiva.
La domanda corretta, quindi, non è: “Che tipo di immagine è?” ma piuttosto:
“Se eliminassi questa immagine dalla pagina, perderei un’informazione che non è presente altrove?”
Questa è la domanda che dovrebbe guidare ogni decisione relativa all’alt text.
Ed è anche il principio che utilizzo ogni volta che progetto un’interfaccia.
Cosa scrivere nell’alt text
Quando si scopre l’esistenza dell’alt text, viene naturale pensare che serva a descrivere fedelmente tutto ciò che compare nell’immagine.
In realtà questo approccio è quasi sempre sbagliato.
L’obiettivo non è raccontare ogni dettaglio visibile ma piuttosto trasmettere il messaggio che quell’immagine comunica.
Pensiamo a una fotografia di una famiglia seduta a tavola.
Una descrizione puramente visiva potrebbe essere:
“Quattro persone sedute attorno a un tavolo con pane, succhi di frutta, tazze e tovaglia bianca.”
Dal punto di vista dell’accessibilità, però, potrebbe essere completamente inutile.
Magari il vero messaggio dell’immagine è che quel ristorante è attrezzato per accogliere bambini piccoli grazie alla presenza dei seggioloni.
Quella è l’informazione che deve arrivare, non il colore della tovaglia o il numero di bicchieri appoggiati sul tavolo.
L’alt text deve aiutare chi non vede l’immagine a comprendere ciò che quella fotografia sta comunicando all’interno del contesto della pagina.
Ed è proprio il contesto che cambia completamente il modo in cui un testo alternativo dovrebbe essere scritto.
Esempi pratici: quando l’alt text serve davvero (e quando no)
Capire la teoria è importante, ma il modo migliore per imparare a usare correttamente gli alt text è ragionare sul contesto.
La domanda da porsi non è:
“Che cosa rappresenta questa immagine?”
ma:
“Se una persona non potesse vedere questa immagine, perderebbe un’informazione utile per comprendere la pagina?”
Perché l’obiettivo dell’alt text non è descrivere ogni singolo elemento visibile, ma trasferire il significato che quell’immagine aggiunge al contenuto.
Vediamo tre casi concreti partendo da un ipotetico sito web di un bed & breakfast a Roma. Analizzeremo la hero section, cioè la prima sezione della pagina che compare subito dopo la navbar.
Esempio 1: foto ridondante
Immaginiamo una hero composta da:
- Titolo: “Bed and breakfast a Roma”
- Headline principale: “Le tue vacanze romane, a due passi dal Colosseo”
Accanto al testo troviamo una bella fotografia del Colosseo.
La domanda è: questa immagine ha bisogno di un alt text descrittivo?
La risposta è no.
Può sembrare strano, perché l’immagine è sicuramente significativa: il Colosseo è un elemento importante per comunicare la posizione della struttura.
Ma in questo caso l’informazione è già completamente disponibile attraverso il testo.
Uno screen reader, arrivando nella sezione, leggerà già:
“(…) a due passi dal Colosseo”
Aggiungere un alt text come “Foto del Colosseo a Roma” non aggiungerebbe nulla di nuovo. Sarebbe semplicemente una ripetizione della stessa informazione, con il rischio di rallentare inutilmente la navigazione di chi utilizza uno screen reader.
E ti garantisco che navigare una pagina con screen reader è un’operazione molto lunga!
La scelta corretta quindi è utilizzare un alt text vuoto:
<img src="colosseo.jpg" alt="">Esempio 2: descrivere servizi e posizionamento
Ora immaginiamo la stessa hero section, ma al posto della foto del Colosseo inseriamo un’immagine della sala comune del bed & breakfast.
Nella foto c’è una famiglia che sta facendo colazione, composta da mamma e papà e due bambini, uno più grande seduto al tavolo e una bambina più piccola in un seggiolone fornito dalla struttura.
In questo caso l’alt text è necessario.
Perché?
Perché l’immagine comunica un’informazione che non troviamo scritta altrove, ovvero che la struttura è attrezzata per accogliere famiglie con bambini piccoli.
Per una persona vedente è un messaggio immediato. Bastano pochi secondi per notare il seggiolone e capire che il B&B ha pensato anche alle esigenze delle famiglie.
Questa informazione può anche essere decisiva nella scelta della struttura, in quanto na famiglia con un neonato potrebbe preferire questo bed & breakfast proprio perché sa che troverà servizi adeguati.
Se invece lasciassimo l’immagine senza alt text, una persona che utilizza uno screen reader perderebbe completamente questo contenuto.
Anche un alt text troppo generico sarebbe inefficace.
Ad esempio “Famiglia a colazione” non comunica il vero valore dell’immagine.
Un testo alternativo più efficace potrebbe essere:
“Famiglia con due bambini fa colazione nella sala comune del B&B; la bambina più piccola è seduta in un seggiolone fornito dalla struttura.”
L’obiettivo non è descrivere ogni dettaglio visibile, ma trasferire il messaggio principale.
Non serve specificare il colore dei vestiti, il tipo di piatti sul tavolo o ogni elemento presente nella stanza.
Un buon alt text seleziona le informazioni importanti, proprio come farebbe un copywriter.
Esempio 3: comunicare contesto e atmosfera
Questo è probabilmente l’esempio più difficile, perché riguarda immagini che spesso vengono considerate erroneamente decorative.
Immaginiamo una fotografia dell’interno della sala comune del B&B:
- pareti con mattoni a vista;
- travi in legno sul soffitto;
- pavimento in cotto;
- arredamento antico e atmosfera rustica.
A prima vista potremmo pensare che è solo una foto dell’ambiente e quindi l’alt non serve.
Ma anche questa scelta potrebbe essere sbagliata perché la foto sta comunicando un’informazione importante: lo stile della struttura.
Il carattere degli ambienti può essere un elemento decisivo nella scelta di un alloggio.
C’è chi cerca proprio un’atmosfera rustica, tradizionale e accogliente, mentre altre persone potrebbero preferire un ambiente moderno e minimalista.
Se questa informazione esiste solamente nell’immagine, deve essere resa disponibile anche a chi non può vederla.
Un possibile alt text potrebbe essere:
“Sala comune in stile rustico con mattoni e travi a vista, pavimento in cotto e arredamento antico.”
Anche in questo caso non stiamo descrivendo semplicemente dei pixel.
Stiamo raccontando il significato dell’immagine all’interno della pagina.
Ed è proprio questo il concetto più importante da ricordare:
L’alt text non serve solo per descrivere persone, oggetti o azioni.
Serve anche per comunicare atmosfera, caratteristiche e informazioni che contribuiscono alla comprensione del contenuto.
La domanda da farsi prima di scrivere un alt text
Quando hai un’immagine davanti, prima di iniziare a descriverla, chiediti questo:
“Se togliessi questa immagine dalla pagina, perderei un’informazione utile che non è presente in nessun altro elemento testuale?”
Se la risposta è sì, allora l’immagine ha bisogno di un alt text.
Se la risposta è no, probabilmente l’immagine è decorativa e un alt text vuoto è la scelta migliore.
Alt text e SEO
Il testo alternativo ha delle implicazioni importanti nell’ottimizzazione per i motori di ricerca.
Prima di tutto, aggiunge contenuto alla pagina, per cui includere immagini con un alt text in linea con il search intent per cui si vuole ottimizzare la pagina è utilissimo.
in secondo luogo, le immagini possono essere trovate tramite la ricerca per immagini di Google o Bing.
L’argomento meriterebbe un approfondimento a parte, ma spesso l’ottimizzazione SEO del testo alternativo rischia di peggiorare l’esperienza utente e l’accessibilità.
Per il momento ti invito a ragionare sul fatto che il testo alternativo nelle immagini deve servire due scopi essenziali:
- Comunicare informazioni utili a chi usa screen reader
- aiutare il contenuto ad essere trovato dalle persone giuste al momento giusto tramite i motori di ricerca.
Evita dunque di riempire gli alt text di keyword e di scrivere descrizioni che ripetono informazioni già presenti nella pagina, ma al tempo stesso scrivi informazioni che possono essere utili per chi ti sta cercando online.
Conclusioni
L’alt text è una delle regole di accessibilità più conosciute, ma anche una delle più fraintese.
L’errore più comune è pensare che ogni immagine debba avere una descrizione oppure, al contrario, che tutte le immagini decorative possano essere ignorate senza fare valutazioni.
La realtà è più semplice: non bisogna chiedersi cosa rappresenta un’immagine, ma quale ruolo svolge all’interno della pagina.
Un buon alt text non è una didascalia automatica e non è una descrizione fotografica dettagliata.
È un modo per garantire che lo stesso messaggio arrivi a tutte le persone, indipendentemente dal modo in cui utilizzano il web.
L’accessibilità non significa aggiungere informazioni extra per alcune persone.
Significa evitare che qualcuno perda informazioni che per altri sono immediatamente disponibili.
Ed è proprio questo il principio alla base di un buon web design inclusivo: progettare contenuti che funzionino per persone diverse, in contesti diversi e con strumenti diversi.
Perché un’immagine accessibile non è semplicemente un’immagine descritta.
È un’immagine che comunica davvero a tutti, senza far perdere tempo e peggiorare la user experience.
FAQ sull’alt text
L’alt text, detto anche testo alternativo, è un attributo HTML che si aggiunge al tag <img> e che serve a descrivere l’immagine alle tecnologie assistive, come screen reader, e ai bot dei motori di ricerca.
In ottica di accessibilità, il testo alternativo di un’immagine deve essere breve e spiegare il messaggio che l’immagine porta, non limitarsi a descrivere l’immagine. Evita di scrivere “immagine di”, “foto di”.
L’attributo alt va scritto sempre, ma quando l’immagine è decorativa non bisogna inserire alcun testo fra i doppi apici, ovvero bisogna lasciare l’alt vuoto, in questo modo: alt=””
Il testo alternativo viene letto dai bot dei motori di ricerca, che possono indicizzare le immagini basandosi proprio sul testo presente nell’attributo alt. È importante che il testo alternativo sia coerente con l’immagine reale e contenga le parole chiave e le query per cui si vuole essere trovati.
L’attributo va inserito sempre, ma non sempre è necessario scrivere un testo all’interno dell’attributo. Nel caso di immagini decorative, l’alt deve essere presente ma vuoto, in questo modo: alt=””.