Compatibilità:

WebSite X5 Evo e Pro dalla v2025.1

Il primissimo criterio delle linee guida WCAG richiede l'utilizzo di testi alternativi per i contenuti non testuali come le immagini. A prima vista può sembrare un compito semplice da risolvere ma non è sempre così: come vedremo, occorre considerare con attenzione ogni singolo caso per riuscire a trovare la soluzione migliore.


In questa guida parleremo di:


Testo alternativo: cosa si intende e perché è importante 

Il testo alternativo è un sostituto testuale per un qualsiasi tipo di contenuto non testuale presente in una pagina web. Esempio classico di "contenuto non testuale" sono le  immagini ma, in realtà, rientrano nella stessa categoria anche i video, le animazioni o gli audio: insomma, tutti gli altri tipi di contenuti multimediali.


Ciò che spiegheremo è valido per tutti i tipi di contenuto non testuale ma, per maggior semplicità, in questa guida parleremo di immagini.


All'interno del codice di una pagina web, il testo alternativo viene generalmente inserito attraverso l'attributo alt dell'elemento <img> e non è visibile per tutti gli utenti. In effetti, il testo alternativo serve solo quando le immagini non possono essere visualizzate in modo corretto. I casi sono essenzialmente 2:

  • Accesso attraverso tecnologie assistive - Alcuni utenti accedono al web attraverso tecnologie che trasformano i contenuti non testuali in forme per loro più accessibili: per esempio, le persone non vedenti utilizzano Screen Reader che "leggono" il contenuto delle pagine fornendone una versione vocale, o la Barra Braille che fornisce loro una versione tattile. In questi casi è proprio la descrizione impostata attraverso l'alt text ad essere letta dal dispositivo per dire agli utenti con disabilità visiva cosa compare sulla pagina.
  • Blocco o difficoltà di caricamento - Per chi si connette in zone dove la connessione è scarsa o attraverso dispositivi obsoleti può risultare difficile caricare le risorse grafiche, soprattutto se molto pesanti. Alcuni, poi, potrebbero aver scelto di disattivare intenzionalmente la visualizzazione delle immagini nel browser web. Anche in questi casi, il testo alternativo viene visualizzato al posto dello spazio vuoto lasciato dall'immagine che non viene caricata. 


Oltre a quelle appena citate, il testo alternativo ha un'altra funzione importante: fornisce descrizioni e informazioni contestuali ai crawler dei Motori di Ricerca, aiutandoli a indicizzare e classificare correttamente le immagini.


Sintetizzando, dunque, l'alt text è importante perché:

  • Migliora l'accessibilità.
  • Rimedia alle difficoltà tecniche di caricamento.
  • Contribuisce all'ottimizzazione SEO delle pagine.


Linea Guida WCAG 1.1

Nell'ambito delle Linee Guida del WCAG che stabiliscono i criteri da seguire per realizzare pagine web accessibili, quella inerente il testo alternativo è la 1.1 ed è molto precisa: 


Linea Guida 1.1 - Fornire alternative testuali per qualsiasi contenuto non testuale in modo che possa essere modificato in altre forme di cui le persone hanno bisogno, come caratteri grandi, braille, parlato, simboli o un linguaggio più semplice.


Per ogni immagine presente in una pagina, dunque, è necessario fornire un’alternativa testuale. In altre parole, ogni immagine dovrebbe avere un attributo alt, anche se, come vedremo, questo attributo potrebbe correttamente rimanere vuoto (alt="" o nullo).


Come scrivere un testo alternativo efficace

Stabilito che ogni immagini dovrebbe avere il suo testo alternativo, dobbiamo capire come deve essere scritto per assolvere correttamente ai suoi compiti.


Partiamo con una precisazione: un testo alternativo NON è una semplice descrizione dell'immagine a cui è associato ma, piuttosto, una sua alternativa testuale. Questo significa che il testo alternativo deve riuscire a trasmettere un contenuto equivalente e assolvere la stessa funzione dell'immagine: per questo deve essere scritto prendendo in considerazione il contesto in cui l'immagine stessa è inserita. In base al contesto, infatti, l'alt text di una stessa immagine potrebbe essere molto diverso.


Prendiamo, per esempio, la foto di una tazza fumante appoggiata su una scrivania: potrebbe essere una semplice immagine decorativa di un articolo del blog che non aggiunge nulla al testo; oppure potrebbe essere la foto prodotto di una tazza messa in vendita in uno store; oppure il prodotto ad essere venduto potrebbe essere la scrivania e non la tazza. Solo il contesto può chiarire qual è il contenuto che deve essere ripreso e quale funzione l'immagine svolge nell'economia della pagina: una volta identificati questi elementi, sapremo come utilizzarli per comporre un testo alternativo efficace ed utile. 


In linea generale un buon testo alternativo deve essere:

  • Preciso ed equivalente nel rappresentare contenuto e funzione.
  • Conciso. Contenuto e funzione devono essere espressi nella forma più sintetica possibile, senza sacrificare l'accuratezza. Testi alternativi troppo lunghi possono infastidire i lettori di Screen Reader: idealmente non si dovrebbe andare oltre i 125 caratteri per essere sicuri che vengano letti per intero, senza tagli.
  • Non ridondante né fornire le stesse informazioni già presenti nel testo accanto all'immagine. Tra l'altro, gli Screen Reader sono in grado di riconosce che una risorsa è un'immagine e, nel caso, annunciano "immagine" insieme all'alt text: non c’è quindi bisogno di scrivere “immagine di” o “foto di” nel testo alternativo.  


Proviamo a mettere in pratica quanto spiegato con un esempio:


Caso 1Caso 2Caso 3Caso 4

Amelia Earhart è stata la prima donna a volare da sola attraverso l'Atlantico e una pioniera dell'aviazione. È considerata un'icona di coraggio e determinazione.
Amelia Earhart, aviatrice

Amelia Earhart è stata la prima donna a volare da sola attraverso l'Atlantico e una pioniera dell'aviazione. È considerata un'icona di coraggio e determinazione.
Amelia Earhart, aviatrice

Amelia Earhart è stata la prima donna a volare da sola attraverso l'Atlantico e una pioniera dell'aviazione. È considerata un'icona di coraggio e determinazione.
Amelia Earhart è stata la prima donna a volare da sola attraverso l'Atlantico e una pioniera dell'aviazione. È considerata un'icona di coraggio e determinazione.

 

In tutti e quattro i casi abbiamo la stessa immagine e lo stesso testo ma, nei casi 2, 3 e 4 si aggiunge una didascalia. Nei casi 3 e 4, inoltre, è presente un link: nel 3 solo sull'immagine, nel 4 sull'immagine e sulla didascalia insieme. Come varia il testo alternativo?


Iniziamo con il considerare il contenuto e la funzione dell'immagine. Il contenuto informa l'utente che si tratta di Amelia Earhart, mentre il suo modo di vestire e la presenza dell'aereo alle sue spalle comunica che è stata un'aviatrice. 


Sulla base di questo, un buona soluzione per l'immagine del Caso 1 potrebbe essere: alt="Amelia Earhart, aviatrice".


Una formulazione come "Immagine dell'aviatrice Amelia Earhart" sarebbe ridondante. Uno Screen Reader, infatti, leggerebbe: "Immagine, Immagine dell'aviatrice Amelia Earhart".


Anche un alt text come "Amelia Earhart, pioniera dell'aviazione e prima donna ad attraversare da sola l'Atlantico" non sarebbe corretto perché include informazioni che non fanno parte dell'immagine e che sono ridondanti rispetto al testo che segue.


Passiano al Caso 2: se mantenessimo lo stesso alt text composto per il caso 1 "Amelia Earhart, aviatrice", duplicheremmo esattamente il testo della didascalia creando ridondanza. In questo caso, quindi, dato che il contenuto viene già presentato nel testo adiacente, lasciare il testo alternativo vuoto alt="" potrebbe essere la scelta migliore.    


Nel Caso 3 l'immagine è un collegamento e quindi ha anche una funzione oltre che un contenuto. Poiché nessun testo adiacente descrive la funzione del collegamento, questa deve essere trasmessa all'interno dell'alt text. Qui la scelta migliore potrebbe essere alt="Amelia Earhart, aviatrice" perché la ridondanza è necessaria a spiegare correttamente la funzione dell'immagine.   


In questo caso "La voce di Wikipedia su Amelia Earhart, aviatrice" non è un contenuto alternativo corretto perché fornisce un contenuto diverso da quello dell'immagine.


Anche "Leggi di più" non va bene perché non fornisce informazioni sufficienti ed è fuori contesto.


Rispetto al Caso 3, il Caso 4 è più accessibile perché immagine e didascalia sono all'interno di un unico collegamento. In questo caso è possibile evitare qualunque ridondanza e lasciare l'alt="" cosicché gli Screen Reader leggano "Link, Immagine, Amelia Earhart, aviatrice".  


Casi particolari: immagini decorative, pulsanti, loghi e immagini complesse 

Nel considerare come scrivere correttamente i testi alternativi delle immagini ci sono dei casi particolari che è utile menzionare. Iniziamo con le immagini decorative.


Un'immagine decorativa è un'immagine che non presenta contenuti importanti, non ha una funzione (per esempio, non è un collegamento) e che viene utilizzata per scopi legati unicamente al layout della pagina. Poiché un'immagine di questo tipo non trasmette contenuti rilevanti, la scelta migliore è utilizzare un testo alternativo vuoto alt="". 


#tip - Sei indeciso se un'immagine deve essere considerata "decorativa"? Prova a chiederti cosa succederebbe se l'immagine venisse eliminata dalla pagina. Se la risposta è che non accadrebbe nulla perché non andrebbe perso alcun contenuto, allora puoi essere ragionevolmente sicuro che si tratta proprio di un'immagine decorativa.


Un altro tipo di immagini che potresti dover gestire sono le immagini utilizzate per i pulsanti. Se un pulsante presenta un testo, la soluzione migliore sarebbe che questo venisse trattato come testo "vero" non come immagine. Nei casi in cui non è possibile fare a meno di ricorrere a un'immagine, è necessario predisporre un alt text che descriva cosa farà il pulsante quando viene attivato: per esempio, "Cerca", "Invia", "Registrati", "Effettua il tuo ordine", ecc.


Molti siti web presentano nell'header delle pagine il logo e lo sfruttano non solo per ricordare il brand ma anche per posizionare il collegamento che permette di tornare alla Home Page. Come va gestito l'alt text di questo logo? In genere è sufficiente riportare il nome della compagnia: alt="Acme Company". Di solito, non è necessario aggiungere al testo alternativo la parola "logo" o l'indicazione che è collegata alla home page, perché questa è una convenzione ormai comune. Sentire lo Screen Reader leggere "Link, Immagine, Acme Company" all'inizio di una pagina web è sufficiente per comprendere che si tratta di un logo collegato alla home page.


Infine una pagina web potrebbe contenere un'immagine complessa: pensiamo a un grafico, un diagramma, una mappa, ecc. In questi casi è impossibile riuscire a creare un testo alternativo che sia breve e accurato: la soluzione migliore potrebbe essere fornire l'alternativa non attraverso l'attributo alt ma usando il testo affiancato all'immagine o una pagina web collegata. 


Alt Text e SEO

Come abbiamo già detto, scrivere un buon contenuto testuale alternativo è necessario non solo per l'accessibilità di un sito web ma anche per l'ottimizzazione SEO delle immagini. Google è perfettamente capace di riconoscere che una risorsa è un'immagine ma un buon testo alternativo fornisce ai suoi crowler descrizioni e informazioni di contesto che li aiutano a indicizzare e classificare in maniera migliore le immagini. 


Per questo ogni buona guida SEO considera un errore NON inserire l'alt text delle immagini. 


Capito questo, molti si fanno prendere la mano e infarciscono l'alt text di parole chiave per le quali vogliono posizionare la pagina. Anche questa procedura non è corretta. L'alt text NON è uno spazio dove fare keyword stuffing, ovvero dove ripetere fino all'esasperazione una serie di parole chiave: questa tecnica, tra l'altro, è ormai malvista dai motori di ricerca stessi. L'alt text è piuttosto uno strumento per spiegare l'immagine a chi non può visualizzarla. È importante seguire le indicazioni che abbiamo visto in precedenza e, se possibile, inserire nell'alt text parole chiave in modo naturale e solo se effettivamente rilevanti.      


Il Title Text

Sia ai fini dell'accessibilità che dell'ottimizzazione SEO, l'alt text non è l'unico attributo a cui prestare attenzione: dobbiamo considerare anche il title text.


Il title text ha un ruolo decisamente più limitato sia per l'accessibilità di una pagina che per l'ottimizzazione di un'immagine: la maggior parte degli screen reader, infatti, lo ignora e a livello di ranking di ricerca non serve. Nonostante ciò, il titolo testuale può arricchire l'esperienza dell'utente, fornendo informazioni aggiuntive sull'elemento. Generalmente queste informazioni vengono visualizzate come tooltip quando l'utente passa con il mouse sull'elemento. 


In linea generale il title text dovrebbe integrare ma mai sostituire il testo alternativo e, di conseguenza, non dovrebbe essere mai l'unico mezzo per trasmettere contenuti importanti. Le best practices per scrivere un titolo efficace consigliano di scegliere una frase breve, diretta e accattivante, che integri ciò che è già stato inserito nel testo alternativo.


Gestire il testo alternativo in WebSite X5

Come abbiamo visto la Linea Guida che si occupa della gestione delle alternative testuali è la 1.1 che si articola in un unico criterio di successo: il criterio 1.1.1 Contenuti non testuali.


Questo è uno dei criteri integrati in WebSite X5 ed è risolto in modalità assistita (vedi: Criteri di accessibilità implementati in WebSite X5).


In pratica WebSite X5 inserisce in automatico nel codice delle pagine le alternative testuali di tutti i contenuti grafici che genera autonomamente:  è il caso, per esempio, dei pulsanti di navigazione delle gallerie, oppure delle icone e dei pulsanti delle card di articoli del blog e prodotti dell’e-commerce.


Per tutti gli elementi non testuali (immagini, animazioni, video, audio) che puoi inserire attraverso i relativi Oggetti o le diverse personalizzazioni grafiche, invece, WebSite X5 ti richiede di digitare un'alternativa testuale: è tua responsabilità, in questi casi, decidere se devono essere considerati dei semplici elementi decorativi o, in caso contrario, scrivere un testo equivalente che risolva la stessa funzione del contenuto originale (vedi: Accessibilità delle immagini: l'importanza del testo alternativo). 



È bene specificare che, come richiesto dalle Linee Guida, WebSite X5 prevede che per le immagini puramente decorative venga inserito un alt text nullo.


#tip - Il criterio di successo 1.1.1 considera anche il Captcha. Al momento il Captcha di WebSite X5 non è ancora stato reso accessibile; si consiglia quindi l'utilizzo di Google reCaptcha. Vedi: Come si sceglie il CAPTCHA da impiegare nel sito?