Introduzione

Aggiungere un testo alternativo alle immagini è il primo principio dell'accessibilità del web, ed è anche uno dei più difficili da implementare correttamente.
Il web è pieno d’immagini con un testo alternativo mancante, errato o scarso. Come molti altri elementi legati all'accessibilità del web, la determinazione di un testo appropriato, equivalente e/o alternativo, è spesso una questione di interpretazione personale.
Attraverso l'uso di esempi, questo articolo presenterà la nostra esperienza di interpretazione dell'uso appropriato del testo alternativo.

Importante
Guarda anche I'articolo sulle immagini (inglese) per ulteriori informazioni sull'accessibilità delle immagini.

 

Gli elementi base del testo alternativo

Il testo alternativo fornisce un'alternativa testuale a contenuti non testuali nelle pagine web.
In questo articolo discuteremo solo del testo alternativo per le immagini anche se gli stessi principi possono essere applicati a media, applet o altri contenuti web non testuali.

Il testo alternativo è utilizzato per diverse funzioni:

  • E’ gestito dai lettori di schermo al posto delle immagini, rendendo accessibile il contenuto, o la funzionalità, dell'immagine ad utenti con disabilità visive o alcune disabilità cognitive.
  • E’ visualizzato al posto dell'immagine nei browser se la stessa non è caricata o quando l'utente ha scelto di non visualizzare le immagini.
  • Fornisce un significato e una descrizione semantica alle immagini, un significato che può essere letto dai motori di ricerca o essere utilizzato per determinare il contenuto dell'immagine nel contesto di pagina.

Il principio chiave è molto semplice.
I computer ed i lettori di schermo non sono in grado di analizzare un'immagine e determinare ciò che l'immagine rappresenta.

Come sviluppatori (o creatori di contenuti) è nostro compito, quindi, fornire all'utente un testo che presenti il contenuto e/o la funzione delle immagini all'interno della pagina web.

Il testo alternativo può essere presentato in due modi:

  • Associato all'attributo alt dell'elemento img.
  • All'interno del contesto o dell'ambiente dell'immagine stessa.

Ciò significa che l'attributo alt  (a volte detto il tag alt anche se tecnicamente non è corretto) non è l'unico meccanismo per fornire il contenuto e/o la funzione dell'immagine.
Queste informazioni possono essere fornite anche in un testo adiacente all'immagine o all'interno della pagina contenente l'immagine.
Nel caso in cui il testo alternativo o equivalente non può essere presentato in modo sintetico, può essere fornito un attributo link o longdesc che fa riferimento a una pagina separata che contiene il testo più dettagliato.

Importante
Il termine testo alternativo, come utilizzato in questo articolo, si riferisce al testo equivalente ad un'immagine, indipendentemente da dove risiede il testo. Non si riferisce esclusivamente all'attributo alt del tag immagine.
L'attributo Alt verrà utilizzato quando si fa riferimento all'attributo stesso, che spesso, ma non esclusivamente, contiene il testo alternativo.

Ogni immagine deve avere un attributo Alt. Questo è un requisito dello standard HTML (con forse alcune eccezioni in HTML5).
Le immagini senza attributo Alt sono probabilmente inaccessibili.
In alcuni casi, le immagini possono essere fornite di un attributo Alt vuoto o null (alt = "").

 

Il contesto è tutto

Quando si determina il testo appropriato per le immagini, il contesto è tutto.
Il testo alternativo per un'immagine può essere notevolmente diverso in base al contesto e all'ambiente dell'immagine stessa.
Prendi ad esempio la seguente immagine di George Washington:

Immagine di esempio

Il testo alternativo per questa immagine potrebbe cambiare notevolmente in base al contesto, come dimostrato di seguito.

Nota
Per meglio presentare questi principi di testo alternativo, la maggior parte delle immagini all'interno di questo articolo è stato dato testo alternativo di "immagine di esempio". Tuttavia, il contenuto delle immagini viene generalmente presentato all'interno del contesto di pagina.

Esempio 1

Immagine di esempio

 

A causa del suo ruolo di comandante in capo delle forze americane nella guerra rivoluzionaria e, più tardi, del primo presidente degli Stati Uniti, George Washington è spesso chiamato "padre del suo paese".

 

Qual è il testo alternativo appropriato per l'immagine nell'esempio 1?

  1. "Immagine di George Washington"
  2. "George Washington, primo presidente degli Stati Uniti"
  3. Un attributo alt vuoto (alt="") sarà sufficiente.
  4. "George Washington"

Il primo passo per individuare un testo alternativo appropriato per un'immagine è decidere se l'immagine fornisce dei contenuti o se l'immagine è associata ad una funzione.

Un'immagine ha associata una funzione se è contenuta all'interno di un collegamento, un link (oppure è un hotspot di mappa immagine o un pulsante). Determinare, invece, se l'immagine fornisce dei contenuti e quali contenuti può essere molto più difficile.
Se il contenuto che l'immagine trasmette è presentato all'interno del testo o nel contesto circostante dell'immagine, può essere sufficiente un attributo alt vuoto (alt="").

Nell'esempio precedente, il contenuto presentato dall'immagine è quello di informare l'utente che si tratta di George Washington.
L'immagine non ha alcuna funzione perché non è un collegamento e non è cliccabile.

Vediamo alcune regole importanti riguardanti l'attributo Alt.

L'attributo Alt dovrebbe tipicamente:

  • Essere preciso ed equivalente nel presentare lo stesso contenuto e la funzione dell'immagine.
  • Essere succinto. Ciò significa che il contenuto corretto (se esiste il contenuto) e la funzione (se esiste una funzione) dell'immagine dovrebbero essere brevi. In genere non sono necessarie più di qualche parola, anche se, raramente, possono essere appropriate una o due brevi frasi.
  • Non essere ridondante o fornire le stesse informazioni del testo all'interno del contesto dell'immagine.
  • Non utilizzare le frasi "immagine di ..." o "grafica di ..." per descrivere l'immagine. Di solito è evidente all'utente che è un'immagine. Se il fatto che un'immagine sia una fotografia, un dipinto o un'illustrazione, ..., è un contenuto importante allora può essere utile includerlo in un testo alternativo.

Sulla base di queste regole, l'opzione d. (alt="George Washington") sarebbe probabilmente il miglior testo alternativo in questa istanza.
L'opzione a. descrive in modo inutile l'immagine come un'immagine.
L'opzione b. fornisce informazioni aggiuntive che non vengono presentate direttamente nell'immagine che sono anche ridondanti rispetto ai contenuti presentati all'interno del testo.
L'opzione c. (nessun attributo alt) non è appropriata perché l'immagine trasmette contenuti non direttamente presentati nel contesto circostante. Anche se il testo circostante indica che si riferisce a George Washington, gli utenti visivi possono capirlo direttamente dal contenuto dell'immagine, quindi se l'immagine trasmette il contenuto, dovrebbe essere dato testo alternativo.

 

Esempio 2

Immagine di esempio

 

George Washington
A causa del suo ruolo di comandante in capo delle forze americane nella guerra rivoluzionaria e, più tardi, del primo presidente degli Stati Uniti, George Washington è spesso chiamato "padre del suo paese".

 

Qual è l'attributo alt appropriato per l'immagine nell'esempio 2?

  1. "George Washington"
  2. Un attributo vuoto alt (alt = "") sarà sufficiente.
  3. "Immagine"
  4. L'immagine non necessita di un attributo alt.

In questo caso, il contenuto dell'immagine viene presentato all'interno del contenuto circostante, quindi l'opzione b. (alt = "") è la scelta migliore.
L'opzione a. sarebbe ridondante.
L'opzione c. fornisce informazioni estranee e inutili.
L'opzione d. (nessun attributo alt) non è mai la scelta giusta - ogni immagine deve avere un attributo alt.

 

Esempio 3

Immagine di esempio George Washington

Nota: L'immagine è parte di un collegamewnto

Qual è l'attributo alt appropriato per l'immagine nell'esempio 3?

  1. Un attributo alt vuoto (alt = "") sarà sufficiente.
  2. "Entrata Wikipedia per George Washington"
  3. "Leggi di più"
  4. "George Washington"

In questo caso l'immagine è anche un collegamento, quindi ha una funzione.
Ogni volta che un'immagine è all'interno di un collegamento, la funzione dell'immagine deve essere presentata nel testo alternativo che è anche all'interno del link. In questo caso, non esiste un testo adiacente all'interno del collegamento che descrive la funzione, quindi deve essere presentato nell'elemento alt.

Di conseguenza, l'opzione d. ("George Washington") è probabilmente la scelta migliore.
Le parole "George Washington" nell'attributo alt risultano comunque ridondanti con il testo che segue ma, in questo caso, la ridondanza è necessaria per descrivere adeguatamente la funzione.
L'opzione a. non è adeguata. Un'immagine che è l'unico elemento all'interno di un collegamento non deve mai avere un attributo alt mancante o null.
Questo perché i lettori di schermo deve leggere "qualcosa" per identificare il collegamento. Potrebbero leggere il nome del file immagine o l'URL della pagina a cui è collegato, che può essere utile o meno. Ricorda sempre che i collegamenti possono essere letti fuori dal contesto del testo circostante, ad esempio quando l'utente naviga tra i collegamenti all'interno della pagina.
L'opzione b. fornisce contenuti che non sono disponibili solo attraverso l'immagine (vale a dire, non è possibile individuare l'immagine collegata a Wikipedia semplicemente guardandola).
L'opzione c. non fornisce una descrizione adeguata della funzione, in particolare fuori dal contesto.

L'intero esempio potrebbe anche essere migliorato posizionando sia l'immagine che la didascalia in un unico collegamento:

In questo caso, sia il contenuto che la funzione del link e dell'immagine vengono presentati all'interno del link, in modo che all'immagine possa essere associato alt="" per evitare qualsiasi ridondanza.
Quando possibile, evitare di utilizzare "collegamento a ..." oppure "fare clic su questa immagine ..." o in una formulazione simile nell'attibito alt.
I collegamenti sono identificati come collegamenti dai lettori dello schermo e devono essere visivi agli utenti vedenti.

Esempio 4

gw2

In questo dipinto, l'artista Emanuel Leutze ha usato luce, colore, forma, prospettiva, proporzione e movimento per creare la composizione.

Qual è l'attributo alt più appropriato per l'immagine nell'esempio 4?

  1. "George Washington"
  2. "Dipinto di George Washington"
  3. "Dipinto di George Washington che attraversa il fiume Delaware"
  4. "Un dipinto classico che dimostra l'uso della luce e del colore per creare composizione".
  5. "Dipinto di George Washington che attraversa il fiume Delaware. Onde ondulate circondano la barca dove il maestoso George Washington guarda avanti dalla tempesta e nei raggi di luce attraverso il fiume, mentre conduce le sue troppe truppe a combattere".

Come in precedenza, dovremmo determinare se il contenuto dell'immagine è presentato nel contesto circostante.
In questo caso, non lo è (almeno non interamente).
L'immagine non è all'interno di un collegamento, quindi non esiste alcuna funzione. Ma questa immagine fornisce un esame molto più complesso e la migliore risposta potrebbe non essere adeguatamente determinata dal contesto limitato che ci è stato dato.

Indipendentemente, esaminiamo le possibili opzioni.
L'opzione a. ("George Washington") probabilmente non descrive adeguatamente il contenuto dell'immagine. Il fatto che sia George Washington nel dipinto potrebbe non essere necessariamente rilevante in questo contesto.
L'opzione b. ("Dipinto di George Washington") può essere adeguata, ma non fornisce molti contenuti aggiuntivi. Tuttavia, potrebbe essere opportuno descrivere l'immagine come un dipinto, in contrasto con una fotografia o un altro tipo di immagine.
L'opzione c. fornisce ulteriori informazioni che possono aiutare l'utente a identificare il contenuto stesso. Ricorda che il testo alternativo non è solo per i non vedenti. Molti utenti sarebbero, data questa descrizione, in grado di identificare la pittura specifica mentre "George Washington" da sola non sarebbe abbastanza descrittivo.
L'opzione d. potrebbe essere appropriata se lo scopo dell'immagine è quello di presentare una tecnica artistica specifica e il contenuto dell'immagine stessa non è importante.
L'opzione e. può anche essere un'alternativa appropriata se un esame approfondito del quadro è l'obiettivo, ma è troppo lunga e prolissa per essere di grande utilità; tale testo sarebbe fornito in modo più corretto come testo all'interno della pagina web.

Come potete vedere, non esiste una risposta giusta. Il miglior testo alternativo dipenderà dal contesto e dal contenuto previsto dell'immagine.

 

Immagini funzionali

Le immagini vengono spesso utilizzate non solo per fornire contenuti, ma per fornire funzioni importanti, come la navigazione.

Esempio 5

products

L'immagine "Prodotti" fa parte di una barra di navigazione.

Qual è l'attributo alt più appropriato per l'immagine di navigazione "Prodotti" nell'esempio 5?

  1. "Prodotti"
  2. "Link a prodotti"
  3. L'immagine non trasmette contenuti, quindi (alt = "") basta.

In questo caso, l'opzione a. è la risposta migliore. Fornisce sia il contenuto che la funzione dell'immagine. L'immagine visualizza la parola "Prodotti" ed è anche un collegamento alla pagina dei prodotti sul sito. L'immagine sarà identificata come all'interno di un collegamento, quindi non è necessario "Collegare a", rendendo l'opzione b. una scelta scadente.
Poiché l'immagine è l'unico oggetto all'interno di un collegamento, il testo alt="" non è mai appropriato.
Quando un'immagine contiene solo testo, il testo visualizzato è generalmente utilizzato come testo alternativo.

 

Esempio 6

Continua alla pagina successiva per leggere in merito sulla presidenza di George Washington.

Qual è l'attributo Alt più appropriato per l'immagine rossa della freccia nell'esempio 6?

  1. "successiva"
  2. "pagina successiva"
  3. "Presidenza di George Washington"
  4. "Continua alla Presidenza di George Washington"

Ancora, questo è un esempio che non ha una risposta chiara. Infatti, qualunque delle opzioni potrebbe essere appropriata in questo esempio.
L'opzione a. e b. saranno probabilmente sufficienti nella maggior parte dei casi, a patto che sia chiaro all'utente che ci sono più pagine all'interno dell'articolo.
L'opzione c. presenta molto chiaramente la funzione del collegamento, ma non presenta che il collegamento passa alla pagina successiva di una serie.
L'opzione d. può essere la soluzione migliore in quanto presenta la funzione del collegamento e trasmette che fa parte di una serie di pagine.

Come detto in precedenza, la determinazione del testo alternativo più appropriato è all'interpretazione personale basata sul più ampio contesto dell'immagine in questione.
L'utilizzo della sola immagine ("freccia") probabilmente non è la più appropriata.
Forse una soluzione migliore sarebbe quella di avere il testo "Pagina successiva" (o simile) adiacente all'immagine e all'interno del link. In questo caso all'immagine potrebbe avere l'attributo alt="".

 

Esempio 7

Qual è l'attributo alt più appropriato per l'immagine dell'icona nell'Esempio 7? Si noti che l'icona è all'interno del collegamento.

  1. Modulo Richiesta d'assunzione
  2. File PDF
  3. Icona PDF
  4. Il contenuto dell'immagine è fornito nel contesto. Quindi alt="" è appropriato

Notare che l'immagine è all'interno del collegamento. Se non fosse all'interno del link, il testo alt potrebbe essere diverso.
In questo caso, poiché l'immagine fornisce ulteriori informazioni sulla funzione del collegamento, è importante che sia all'interno del collegamento stesso in modo da essere valutata con il collegamento. Questo è fondamentale in quanto i collegamenti sono spesso analizzati fuori dal contesto della pagina.

L'opzione a. ("Modulo Richiesta d'assunzione") è ridondante, l'informazione è già fornita nel contenuto, quindi non è la scelta migliore.
L'opzione b. è la scelta migliore (anche se forse solo il più "succinto" PDF sarebbe sufficiente) - fornisce chiaramente il contenuto che viene presentato dall'immagine (il collegamento è ad un file PDF). La funzione ("Scarica Modulo Richiesta d'assunzione") viene presentata all'interno del testo del link, quindi non deve essere nuovamente incluso nell'elemento alt.
L'opzione c. ("l'icona PDF") descrive l'immagine stessa, quindi non è più appropriata per questo contesto. In un altro contesto, può essere importante che l'utente sa che questa immagine è in realtà un'icona.
L'opzione d. (null o empty text alt) non fornirà le informazioni importanti che l'immagine presenta.

È importante notare che se l'icona stessa è il collegamento al documento, il testo alternativo dovrebbe fornire un'alternativa completa del contenuto e della funzione nella combinazione link/immagine.
Un testo del tipo "Scarica il modulo per la richiesta d'assunzione in formato PDF" sarebbe l'ottimale.
Il solo testo "PDF" non sarebbe sufficiente, soprattutto se sono presenti più collegamenti a documenti di questa natura. In quest'ultimo caso, ad un utente che utilizza un lettore di schermo, navigando attraverso i collegamenti di una pagina verrebbe fornito in formto audio sempre "formato PDF, formato PDF, formato PDF ...".

La regola generale è che se la stessa immagine viene utilizzata più volte in una pagina per diversi collegamenti, il testo alternativo all'interno del collegamento dovrebbe essere sempre diverso.

 

Immagini decorative

Le immagini decorative non presentano contenuti importanti, vengono utilizzati per il layout o per scopi non informativi e non appaiono all'interno di un collegamento.
In quasi tutti i casi, il distanziatore e le immagini decorative dovrebbero avere il testo alt nullo (alt = "").

Esempio 8

Testo del contenuto.
 example image
Testo del footer.

Qual è l'attributo alt appropriato per l'immagine separatrice orizzontale nell'esempio 8?

  1. "Linea decorativa"
  2. "Inizio del piè di pagina"
  3. "Separatore"
  4. alt="" sarà sufficiente

Poiché l'immagine non trasmette contenuti e non è all'interno di un collegamento, l'opzione d. è la scelta più appropriata. Una descrizione associata all'immagine non sarebbe appropriata.

Nota
Quando un'immagine viene utilizzata spesso solo per scopi decorativi, è meglio rimuovere l'immagine dal contenuto della pagina e aggiungerla come immagine di sfondo utilizzando CSS. Ciò elimina la necessità di un testo alternativo ed elimina l'immagine dal flusso semantico e strutturale della pagina.

Esempio 9

Immagine di esempio

La nostra attività fornisce il miglior servizio che troverai sul pianeta. Il nostro team è professionalmente addestrato per offrire un eccellente servizio clienti durante tutto il processo di negoziazione dei contratti.

La soddisfazione del cliente è la nostra priorità ed è garantita, o sarete rimborsati.

Qual è l'attributo alt appropriato per l'immagine nell'esempio 9?

  1. "Stretta di mano"
  2. "Gli uomini d'affari si stringono le mani per completare un contratto"
  3. alt="" sarà sufficiente
  4. "Garantiamo i nostri servizi professionali"

Analizzando questo esempio e determiniamo inizialmente se l'immagine presenta un contenuto importante. In questo caso no.
E' uso comune sul web fornire di di testo alternativo descrittivo molte di queste tipologie di immagini anche se non sembrano fornire contenuti utili.

L'opzione c. (alt = "") sarebbe probabilmente più appropriata perché l'immagine non trasmette contenuti rilevanti o importanti.
Le opzioni a. e b. sono descrittive dell'immagine, ma non trasmettono un equivalente di ciò che l'immagine stessa sta trasmettendo (che in questo caso è nulla), o forse solo un sentimento emotivo o sensazione. In altre parole l'immagine è per lo più decorativa.
L'opzione d. non è chiaramente corretta, anche se è opportuno notare che spesso informazioni aggiuntive vengono "iniettate" nel testo alternativo per fornire ulteriori informazioni o fornire parole chiave ai motori di ricerca. Tali pratiche non sono un uso appropriato di un testo alternativo.

Nota
In molti casi per determinare il testo alternativo appropriato puoi farti la domanda:
"Se non potrei usare questa immagine, cosa posso mettere al suo posto?" .
Nell'esempio precedente, non è probabile che la foto di una stretta di mano sia sostituita con testo, quindi alt="" è probabilmente sufficiente.

 

Immagini avanzate

Ci sono alcuni casi in cui determinare il testo alternativo può essere più complesso.
Per tutte le immagini il metodo più appropriato per l'implementazione del testo alternativo e verificarne il contenuto attraverso i test effettuati con gli utenti, con i lettori di schermo più comuni oppure utilizzando browser di solo testo.

Immagini di pulsanti

Le immagini di pulsanti devono avere un attributo Alt che descrive la funzione del pulsante.
Le immagini di pulsanti vengono spesso utilizzati per fornire una versione più "attraente", una versione più piccola o più grande, o comunque diversa, dei pulsanti standard del form.
Il testo alternativo deve descrivere quello che il pulsante fà quando viene selezionato, ad esempio "Ricerca", "Invia", "Registra", "Inserisci il tuo ordine", ecc.

Ad esempio, <input type = "image" alt = "Invia ricerca "> potrebbe essere appropriato per un pulsante di immagine in un modulo di ricerca del sito.

Immagine di mappe

Quando si utilizzano mappe di immagine, l'immagine principale deve avere un attributo Alt.
L'attributo Alt dovrebbe presentare qualsiasi contenuto che viene presentato con l'immagine, ma che non viene presentato con i punti hotspot della mappa immagine.

Ad esempio, supponiamo di avere una mappa dello Stato di New York con una serie di "hotspot" per ogni regione, l'immagine potrebbe avere un attributo alt "Regioni di New York". Se l'immagine principale non trasmette contenuti, ma è principalmente solo un contenitore di "hotspot" (ad esempio una barra di navigazione), alt="" è appropriato.

Ogni "hotspot" della mappa immagine (area elementi) deve avere un attributo equivalente Alt.
Poiché gli hotspot sono cliccabili, ognuno deve disporre di un testo alternativo che descrive la funzione di tale hotspot.
Gli hotspot per mappe immagine sul lato server non possono essere forniti di testo alternativo perché non sono accessibili alla tastiera, quindi, non devono essere utilizzati.

Slices di immagine

A volte grandi immagini vengono tagliate in più immagini in un sito web per scopi di design.
Quando le "fette" di immagine trasmettono il contenuto, tale contenuto deve essere presentato all'utente.

In genere, questo viene fatto fornendo il testo alternativo nell'attributo Alt della fetta di immagine più grande o più importante.
Non è opportuno ripetere inutilmente il testo alternativo. Anche rompere il testo alternativo su più attributi non è una buona alternativa.

Se una fetta di immagine è all'interno di un collegamento, un testo alternativo che descrive la funzione del collegamento deve essere fornito nell'immagine Alt, nell'attributo Alt di un'altra immagine all'interno dello stesso collegamento o all'interno di un testo all'interno dello stesso collegamento.

Ogni collegamento deve contenere il testo funzionale che descrive la funzione dei collegamenti.

Immagini di sfondo

Non è possibile aggiungere testo alternativo direttamente a CSS o ad altre immagini di sfondo.
Le immagini che trasmettono i contenuti non devono essere generalmente posizionate negli sfondi di una pagina o di un elemento.

Le immagini di sfondo possono essere utilizzate per immagini decorative, eliminando così l'immagine dal flusso di contenuto della pagina e rimuovendo la necessità di un attributo di alt vuoto.
A volte vengono utilizzati degli "sprites" dell'immagine o altre immagini di sfondo per presentare il contenuto.
Questi dovrebbero essere generalmente evitati, se vengono utilizzati, qualsiasi contenuto trasmesso attraverso l'immagine di sfondo deve essere reso accessibile all'interno del markup di pagina.

Se l'immagine dell'icona PDF nell'esempio 7 veniva presentata tramite un'immagine di sfondo CSS, è possibile utilizzare una tecnica di sostituzione del testo per presentare il contenuto all'interno del link:
<a href="/application.pdf"> Scarica modulo Richiesta d'assunzione <span class = "pdficon"> (PDF) </ span> </a>

Utilizzare quindi il CSS per posizionare il testo "(PDF)" (l'elemento di span class = "pdficon") fuori linea.
Vedere CSS in azione: Contenuto invisibile solo per gli utenti di lettori dello schermo per ulteriori dettagli.
Gli utenti vedrebbero l'immagine di sfondo in formato PDF e gli utenti di lettori dello schermo sentiranno il testo "(PDF)" sullo schermo.

Loghi

È pratica comune sul web avere il logo del sito principale ed anche per collegarsi alla home page del sito.
Poiché questa è una pratica abbastanza standard, è sufficiente fornire testo alternativo per l'immagine come, ad esempio, il nome della società (alt = "Acme Company"). Identificare il logo come "un logo" (es. alt="Acme Company Logo") non è in genere è necessario.
Il contenuto e la funzione non sono il "logo".

Alcuni sviluppatori spesso identificano il logo come la home page (alt = "home page di Acme Company").
Anche se l'immagine è costantemente all'inizio della pagina e il testo alternativo è appropriato, queste informazioni aggiuntive non dovrebbero essere necessarie.

Immagini complesse

Quando un'alternativa equivalente per un'immagine complessa, ad esempio un diagramma, un grafico o una mappa, non può essere limitata ad un attributo Alt sintetico e questo non è presente nel contesto della pagina (ad esempio in una tabella di dati adiacente), allora l'alternativa dovrebbe essere fornita altrove.

Ciò avviene tipicamente collegandosi ad una pagina web separata che fornisce la descrizione più lunga.
Il collegamento può essere adiacente all'immagine o l'immagine stessa potrebbe essere collegata alla pagina di descrizione.
Il testo alternativo per l'immagine dovrebbe ancora descrivere il contenuto generale dell'immagine.

L'attributo longdesc può essere utilizzato anche sull'immagine. Il valore dell'attributo longdesc dell'elemento img contiene l'URL della pagina che fornisce la descrizione più lunga e non deve contenere la descrizione lunga.

<Img src = "sales.jpg" alt = "Diagramma delle vendite annuali" longdesc = "salesdata.htm"> <br>
<a href="/salesdata.htm"> Visualizza dati commerciali </a>

Nota
L'attributo longdesc attualmente fornisce solo accesso alla pagina di descrizione lunga per gli utenti che utilizzano i lettori dello schermo. Gli utenti non saranno generalmente consapevoli del fatto che la descrizione è disponibile, anche se potrebbero trarre grande beneficio da essa.
L'attributo longdesc non è attualmente parte di HTML5. Per questi motivi, se è ultilizzata longdesc, si consiglia di utilizzare anche un collegamento standard alla pagina di descrizione lunga.

Figure e Figcaption

HTML5 introduce l'elemento di "figure", definito come:

L'elemento figure rappresenta un'unità di contenuto, eventualmente con una didascalia (figcaption), che è autonoma.
Tipicamente indica una singola unità del documento che può essere allontanata dal flusso principale dello stesso senza che il significato del documento ne sia influenzato.

"figure" e "figcaption" consentono un'associazione semantica tra un'immagine e la didascalia dell'immagine.
Tuttavia, l'immagine deve sempre avere un attributo alt che presenta il testo alternativo dell'immagine, a meno che non sia disponibile un'altra alternativa testuale.

Conclusione

Nonostante sia il più grande problema che riguarda l'accessibilità del web, esistono metodi divergenti ed errati per l'implementazione di un testo alternativo.
Seguendo i principi di base descritti qui, gli sviluppatori web possono rendere il loro contenuto web più accessibile agli individui con disabilità.

  • L'aggiunta di un testo alternativo alle immagini è uno dei principi di accessibilità più facili da imparare e uno dei più difficili da padroneggiare.
  • Il testo alternativo può essere fornito nell'attributo Alt o nel contesto circostante dell'immagine.
  • Ogni immagine deve avere un attributo Alt.
  • Il testo alternativo dovrebbe:
    • presentare il CONTENUTO e la FUNZIONE dell'immagine;
    • essere succinto.
  • Il testo alternativo non dovrebbe:
    • essere ridondante (essere uguale al testo adiacente o al corpo);
    • utilizzare le frasi "immagine di ..." o "grafica di ...".
  • Il testo alternativo appropriato dipende fortemente dal contesto dell'immagine.
  • Il testo alternativo di un'immagine funzionale (ad esempio, un'immagine all'interno di un collegamento) dovrebbe descrivere la funzione e il contenuto.
  • Le immagini decorative non necessitano di un attributo alt ma dovrebbe essere definito nullo (alt = "")

L'accessibilità del web in generale aumenterebbe drasticamente se il testo alternativo è fornito ed implementato correttamente.

 

Libera traduzione del testo originale Alternative Text pubblicato da WebAIM.