L’attributo alt nelle immagini: accessibilità, SEO e IA

L’attributo alt per le immagini nel web è tanto importante quanto dimenticato o, laddove usato, usato erroneamente. In questo articolo proverò a spiegarti perché l’attributo alt è importante, come viene realmente gestito dai motori di ricerca e come scriverli in maniera veramente efficace.

Indice dei contenuti

Cos’è l’attributo alt

Viene quasi spontaneo pensare che l’attributo alt sia nato appositamente per soddisfare i requisiti di accessibilità per come la intendiamo ai giorni nostri, ovvero “regole” per venire incontro alle tecnologie assistive e/o alle strategie di adattamento degli utenti con necessità particolari.

Partiamo dal fatto che l’accessibilità non è dedicata esclusivamente ad una categoria di utenti con “necessità particolari”, come in molti credono. Infatti come ho scritto anche in altri post, la disabilità è un concetto più ampio e che va visto dal punto di vista della possibilità di una persona di compiere un’azione indipendentemente dalla strategia che applicherà per compierla. Accessibilità e usabilità sono quindi sinonimi, e questo caso lo dimostra.

La prima descrizione dell’attributo alt è contenuta nella specifica di HTML versione 1.2 del 1993 (link al testo originale). L’attributo nasce con lo scopo di fornire una descrizione alternativa di una immagine per quei browser che supportavano solo il testo (eravamo al albori di internet). In seguito è nato anche l’attributo longdesc per poter fornire un link ad una descrizione più accurata dell’immagine ma, pur facendo parte dello standard HTML attuale, non è supportato da nessun browser.

Purtroppo a causa di alcuni browser (come, a titolo esemplificativo, Internet Explorer) che hanno introdotto il tooltip per mostrare il contenuto di alt su una immagine (ecco un articolo di Robert Nyman a riguardo), i sviluppatori del tempo avevano preso l’abitudine di usarlo per inserire testi più corposi e che poco o nulla c’entravano con il vero scopo: fornire un testo alternati quando l’immagine non viene visualizzata.

Come impatta la SEO

Saltando a piè pari tutte le indicazioni che si trovano dei blog di guru della SEO, andiamo ad informarci direttamente alla fonte, ossia Google. Questo è l’URL della pagina su cui troviamo le indicazioni: https://developers.google.com/search/docs/appearance/google-images?hl=it.

Sostanzialmente ci sono due aspetti da tenere conto per l’indicizzazione delle immagini su Google:

1. Il nome dell’immagine. Importare un immagine con nome “IMG00002.jpeg” o “WhatsApp Image ….” non aiuta il crawler ad estrarre informazioni dall’immagine.
2. Il contenuto dell’attributo alt. Usare testi alternativi formulati correttamente aiuta sia l’utente che il crawler a comprendere e catalogare l’immagine. Ma se dovessimo scambiare l’alt per un contenitore di keyword in grado di indicizzarsi ai primi posti, il risultato sarebbe che l’intero sito verrebbe catalogato come spam.

Quando Google “cattura” l’immagine utilizza infatti l’attributo alt insieme ad algoritmi di visione artificiale e ai contenuti della pagina da dove l’immagine è estratta per capire cosa rappresenta l’immagine. La mancanza dell’attributo alt o la formulazione errata di testi alternativi può quindi portare ad una penalizzazione del contenuto.

Per completezza vediamo cosa ne pensa Bing, uno dei motori di ricerca più utilizzati dopo Google. Bing raccomanda di utilizzare i testi alternativi per fornire informazioni importanti sul contesto delle immagini e cosa rappresentano. Nonostante la raccomandazione molto concisa nella docs per webmaster (https://www.bing.com/webmasters/help/webmaster-guidelines-30fba23a), non ci sono particolari approfondimenti riguardanti il contesto dell’immagine. Anzi in questo documento sull’uso dei testi alternativi (link alla pagina) si parla anche di compliance normativa e di come la SEO ne benefici dal riuscire a riconoscere il contenuto visivo di un’immagine.

Come formulare un attributo alt corretto

La prima regola da osservare quando di decide di inserire un tag alt è definire lo scopo dell’immagine. Ossia capire se la sua presenza è fondamentale per comprendere e/o interagire con il contenuto, oppure se è puramente una immagine decorativa.

Vediamo un esempio: come potrai notare, le copertine dei miei post sono privi di testo alternativo. O meglio, hanno un attributo alt vuoto. Questo perché usando alt="" sto volontariamente comunicando ad uno screen reader che c’è sì un’immagine, ma il suo scopo è puramente decorativo e non va’ annunciata all’utente. Questo passaggio sembra banale ma è importante: se non inserissi l’attributo alt lo screen reader potrebbe annunciarla all’utente che dovrebbe da solo capire se l’immagine è significativa o no.

Ecco perché è importante riconoscere le immagini decorative.

Cosa sono e come riconoscere le immagini decorative?

Il W3C ha pubblicato un utilissimo decision tree per comprendere se una immagine è decorativa oppure informativa, e in tal caso come scrivere un testo alternativo in maniera corretta. Puoi trovarlo in questa pagina: https://www.w3.org/WAI/tutorials/images/decision-tree/. Per semplificarti la vita, ho fatto una tabella riepilogativa.

Come avrai intuito le immagini decorative altro non sono che immagini inserite in un contesto puramente per scopi estetici e che non contribuiscono in alcun modo ad arricchire le informazioni date ad un utente. Per tutte queste immagini la soluzione è fornire un attributo vuoto in questo modo:

<img  alt=""
      src="./image.jpg"
      width="100"
      height="100"
      />

Per tutte le altre immagini, che assumono quindi un carattere informativo, bisogno generare un attributo fatto bene.

Creazione di un attributo alt corretto

Quando si decide di fornire un testo alternativo per una immagine e importante in primo luogo il contesto. Fornire una spiegazione dell’immagine è importante tanto quanto, se non di più, di descrivere cosa rappresenta l’immagine. Facciamo un esempio.

Prendiamo la seguente immagine, scattata da Phil Nijhuis/EPA e pubblicata sul Guardian nella galleria delle foto della settimana del 3 maggio 2024.

L’alt text più corretto è questo:

Fan di Star Wars vestiti da stormtroopers seduti tra gli spettatori al cinema Pathé dell’Aia, nei Paesi Bassi, assistono alla maratona di 24 ore dedicata a tutti e 9 i film della serie.

Avremmo potuto dire:

• Persone vestite da stormtrooper sedute in un cinema affollato
• Fan vestiti da personaggi di star wars seduti in un cinema con altri spettatori
• Due persone in costume da personaggi di Star Wars seduti su sedie rosse in un cinema affollato

ma in nessuna delle tre versioni stiamo dando le informazioni corrette per capire l’immagine. E l’ultimo punto è effettivamente l’alt fornito dal Guardian, mentre l’alt corretto viene usato come didascalia. Certamente un errore, che però evidenzia ancora una volta come l’uso scorretto del testo alternativo sia diffuso un po’ ovunque e come sia in capo agli editor tanto quanto agli sviluppatori.

Fornendo il contesto l’utente che non riesce a vedere l’immagine può comunque comprenderne il messaggio che vuole comunicare, e questo è lo scopo ultimo del testo alternativo. Spiegando che i due fan non si sono semplicemente seduti in un cinema a caso, in un luogo ignoto, per vedere un film qualsiasi, abbiamo dato la possibilità di “leggere” correttamente l’immagine anche a chi non la può visualizzare per un qualsiasi motivo.

Nel caso vogliate approfondire, vi consiglio l’articolo del W3C in inglese Good Alt Text, Bad Alt Text — Making Your Content Perceivable in cui ci sono interessanti spunti anche per i CAPTCHA e dei consigli sulla stesura del testo (ad esempio evitare di iniziare con “Immagine di …”).

Bonus: usare le IA per generare gli alt

La tentazione dei giorni nostri è quella di googlare se esistono IA in grado di facilitarci la vita. Beh, si da il caso che esistano e se usate in maniera corretta possono aiutare a semplificare il lavoro. Se è vero che qualcosa è meglio di niente, il qualcosa che si può generare con le IA può comunque non aver gran valore senza il contesto.

Questo è il motivo per cui i servizi di generazione di alt text con IA offrono la possibilità di aggiungere delle descrizioni che servono apposta a fornire il contesto. Il resto dell’analisi dell’immagine è affidato all’IA vera e propria che metterà insieme immagine e descrizione fornita.

Saranno capaci di fare un buon lavoro? Scopriamolo prendendo sempre la stessa immagine di prima e vediamo come si comportano i tool a disposizione.

Free AI text generator – Ahrefs

Ecco lo strumento gratuito di Ahrefs (https://ahrefs.com/writing-tools/img-alt-text-generator) all’opera:

Un bonus è sicuramente dato dalla possibilità di cambiare lingua e selezionare il tono di voce da utilizzare. L’input che ho fornito:

“cinema presso l’Aia, Paesi Bassi, maratona Star Wars di 24 ore, tutti e 9 i film”

è decisamente messa a casaccio senza un particolare sforzo mentale di organizzazione descrittiva. Ciononostante l’IA è riuscita a generare 3 opzioni tutte quante molto valide:

1. Fan di Star Wars vestiti da stormtrooper seduti in sala al cinema presso l’Aia, Paesi Bassi, durante la maratona di 24 ore dei 9 film.
2. Appassionati di Star Wars travestiti da stormtrooper seduti in sala al cinema all’Aia, Paesi Bassi, per la maratona di 24 ore dei 9 film.
3. Fan di Star Wars vestiti da stormtrooper seduti in sala al cinema all’Aia, Paesi Bassi, durante la maratona di 24 ore dei 9 film della saga.

Alttext.ai – AI Alt Text Generator

Questo strumento (disponibile a questo indirizzo https://alttext.ai) è molto popolare e offre varie integrazioni come componente in Chrome, plugin per WordPress, accesso diretto da web ecc.. Al contrario del precedente, al posto del testo descrittivo ci da’ la possibilità di fornire delle “keyword SEO”.

A mio avviso è un comportamento sbagliato, perché le keyword dovrebbero riguardare il contesto, l’aspetto SEO viene da sé. Infatti, chiedendo keyword SEO all’utente è più facile che l’input ricevuto rispecchi strategie comunicative e di business che poco possono interessare l’immagine in se. Continuiamo ad esplorare lo strumento.

Mentre il generatore presente nella home del sito lascia un po’ a desiderare, le cose si fanno interessanti registrandosi al servizio e iniziando a generare gli alt text. Si inizia dall’elenco delle immagini già inserite e inserendone una nuova si possono selezionare alcune setting curiose come:

• la validazione umana, ossia un operatore verificherà ed eventualmente correggerà il testo;
• l’aggiunta di un brand nel testo;
• l’aggiunta di keyword SEO specifiche;
• l’aggiunta dei propri prompt di ChatGPT.

Ho provato a fare due generazioni di testi alternativi, con e senza “keywords”. Il risultato è il seguente.

Senza keywords:

Due persone vestite da Stormtrooper sedute in un cinema, circondate da un pubblico impegnato, uno Stormtrooper gesticola come se parlasse con l’altro.

Con keywords “l’Aia, maratona Star Wars di 24 ore, tutti e 9 i film della saga”:

Due persone vestite con costumi da Stormtrooper sedute tra la folla in un cinema, apparentemente impegnate a guardare un film durante una maratona di Star Wars di 24 ore.

Il risultato è che il tool si è concentrato maggiormente a descrivere l’immagine (il fatto che i due Stormtrooper gesticolassero o che sembrino apparentemente impegnate a guardare il film) e molto meno a parlare del contesto dell’immagine. Ovviamente non stupisce perché Alttext.ai sembra maggiormente focalizzato sugli aspetti di marketing dell’immagine.

Al netto dell’analisi sul funzionamento e sui risultati, c’è la parte di costi da considerare. Questo tool ha, nel momento in cui scrivo questo post, una trial con 25 crediti a disposizione che corrispondo ad altrettanti testi alternativi generati. Dopodiché bisognerà scegliere una delle licenze a disposizione.

Quattr – AI Content Optimization Tools

Quattr è una suite che raccoglie diversi tool basati su IA per aiutare la generazione di contenuti. Tra i tanti messi a disposizione c’è anche lo strumento per i testi alternativi, che è gratuito e disponibile a questo link https://www.quattr.com/free-tools/image-alt-text-generator.

Il problema, se così vogliamo chiamarlo, è che non c’è nessun uploader di immagine. L’utente deve solo inserire le famose “keyword”, il testo descrittivo e selezionare il numero testi alternativi da generare. Niente lingua italiana.

Va’ da se che inserendo tutte queste informazioni lo “spazio di manovra” per il generatore è veramente stretto: abbiamo già dato tutte le informazioni!

Infatti le mie keyword sono:

“Stormtrooper, The Hague cinema, star wars 24-hour marathon, all 9 movies”

mentre la descrizione che ho offerto:

“two people dressed as Stormtroopers are sitting in the cinema watching the movies”

Il risultato ottenuto è

1. Two fans dressed as Stormtroopers seated in The Hague cinema attending a Star Wars 24-hour marathon showcasing all 9 movies.
2. Stormtrooper-clad enthusiasts immersed in the Star Wars saga during a 24-hour movie marathon at a cinema in The Hague.
3. Star Wars fans in Stormtrooper costumes experience all 9 movies at a special 24-hour marathon event in The Hague cinema.

Non esattamente un gran lavoro di generazione, più che altro il tool ha riordinato semanticamente le keywords all’interno della descrizione fornendo un’interpretazione propria.

Altri tool online

Esistono altri tool online? Sì!

Sono efficaci? No!

Mi dispiace essere così secco e deciso nella risposta. Ho fatto più di una ricerca online sui tool messi a disposizione da sviluppatori più o meno noti. Il risultato è che nella gran parte dei casi l’immagine viene data in pasto a IA che interpretano il contenuto senza richiedere all’utente nessuna informazione sul contesto.

Testi alternativi di questo tipo, come già ripetuto in questo articolo, non aiutano efficacemente l’utente a comprendere l’immagine. Tuttavia si deve riconoscere e premiare lo sforzo da parte degli editori di iniziare a fornire queste informazioni, cercando soluzioni che coniugano un certo livello di qualità con la rapidità e facilità di implementazione nel processo di editing.