Descrizioni e testi alternativi
Prima di pubblicare un’immagine sui social o sugli altri strumenti che usiamo per comunicare, per esempio Slack o Github, valuta l’opportunità di scrivere un testo alternativo che la descriva per chi non visualizza le immagini.
Le raccomandazioni su quando è necessario usare un testo alternativo sono le stesse che valgono per un sito web: l’unico caso in cui può essere omesso è quando l’immagine ha una funzione puramente decorativa.
Immagina di leggere il tuo post o il tuo messaggio senza poter visualizzare le immagini:
- Il tuo contenuto comunicherebbe le stesse informazioni?
- Sarebbe altrettanto usabile, altrettanto chiaro?
Se la risposta è no, hai bisogno di scrivere un testo alternativo.
Se hai dei dubbi, l’Alt Decision Tree del W3C può aiutarti a prendere la decisione più corretta possibile, soprattutto se non hai esperienza con i testi alternativi. Col tempo ti verranno in aiuto l’esercizio e la pratica già fatta.
Un’altra risorsa che ti suggeriamo di leggere è la pagina Images Tutorial sul sito della WAI (Iniziativa per l’accessibilità sul web), che è stata la fonte principale per la redazione di questo documento e che offre spiegazioni ed esempi pratici per ogni tipologia di immagine. Nel frattempo, ne abbiamo rielaborati alcuni che riportiamo qui di seguito.
Immagini informative
Immagini che comunicano informazioni, sostituendo il testo o integrandolo.
Testo alternativo da usare: il testo alternativo deve comunicare, nel modo più sintetico possibile, l’informazione rappresentata dall’immagine.
Esempi
Immagini che sostituiscono parole, etichette o porzioni di testo
Nell’esempio che segue vediamo due icone usate per distinguere le soluzioni corrette da quelle sbagliate: in questo caso il testo alternativo deve riflettere il significato, non l’aspetto, di ogni simbolo.
Opzione A
Opzione B
Descrizione alternativa appropriata:
alt="Risposta corretta: " per l’icona con la spunta e alt="Risposta sbagliata: " per l’icona con la X.
Uno screen reader potrebbe leggere: “Risposta corretta (immagine): Opzione A; Risposta sbagliata (immagine): Opzione B”.
Descrizione alternativa vuota (errore):
alt=""
Lo screen reader leggerebbe: “Opzione A, Opzione B” .
L’utente non avrebbe modo di sapere quale sia la risposta corretta.
Icone usate in questo esempio: Material Symbols / Material Icons di Google – Apache License 2.0
Immagini che comunicano emozioni, fatti o atmosfere
Una buona pratica è descrivere in modo conciso il senso dell’immagine, che potrebbe o non potrebbe corrispondere esattamente a quello che si vede nell’immagine stessa.
Un’altra cosa importante è omettere le specificazioni superflue come “foto di” , “immagine di”.
Ad esempio, l’alt text per questa foto potrebbe essere: “Partecipanti al WordCamp Europe 2024, Torino: una folla entusiasta di più di X persone”
Il livello di sintesi da usare dipende dal contesto di pubblicazione. Per esempio, se la foto fosse destinata ad apparire in un articolo dedicato esclusivamente al WordCamp Europe, ripetere il nome dell’evento nel testo alternativo potrebbe essere superfluo.
La filosofia di base è dare accesso alle stesse informazioni a tutte le persone che ci leggono, indipendentemente dalle tecnologie che stanno usando per farlo, senza rendere l’esperienza utente ripetitiva o ridondante.
Link alla fonte: Informative images (W3C©)
Immagini decorative
Immagini che servono solo a rendere il contenuto visivamente piacevole.
Testo alternativo da usare: vuoto (alt="").
Siccome queste immagini non servono a comprendere il contenuto, descriverle avrebbe un effetto controproducente sull’esperienza utente di chi usa uno screen reader.
Esempi
Segni grafici ornamentali
Un simbolo come quello che separa i due paragrafi dell’immagine sottostante può facilitare la lettura a schermo, ma non aggiunge nulla di utile per chi usa uno screen reader.
Immagini che servono a rendere la presentazione più gradevole ma sono prive di rilevanza rispetto al contenuto da comunicare.
Nell’immagine sottostante vediamo una foto usata come sfondo di una slide, a stento distinguibile sotto il pesante livello colorato che serve a far risaltare il testo.
Immagini con equivalente testuale adiacente
Nell’esempio che segue, abbiamo l’icona di un social immaginario, subito seguita dal classico link “Seguici su…”: aggiungere un testo alternativo sarebbe inutile perché il testo del link spiega già tutto.
Seguici su XYZ
Un altro caso tipico è quello delle immagini dotate di una didascalia o di un testo adiacente che renderebbe superflua la compilazione di un alt text identico.
Link alla fonte: Decorative Images (W3C®)
Immagini funzionali
Immagini che servono per navigare il contenuto e compiere azioni, ad esempio immagini usate come link o pulsanti.
Testo alternativo da usare: il testo alternativo deve descrivere la funzione, non l’aspetto, dell’immagine.
Esempi
Immagine senza testo adiacente che sostituisce un link nel menu o nel breadcrumb.
alt="Homepage"Icone senza testo adiacente che sostituiscono pulsanti
alt="Scarica il PDF"Icone: Material Symbols / Material Icons di Google – Apache License 2.0
Link alla fonte: Functional Images (W3C®)
Immagini di testo
Immagini che contengono del testo.
Questo tipo di immagine andrebbe evitato, ma nei casi in cui non è possibile farlo la soluzione più accessibile è inserire lo stesso testo che si può leggere sull’immagine nella parte testuale del proprio contenuto; in alternativa, puoi riportarlo nel campo per l’alt text messo a disposizione dalla piattaforma o dal social che stai usando.
Esempio 1
Se le parole che si possono leggere nell’immagine non compaiono anche nel testo adiacente, trascrivile tutte nel testo alternativo.
alt="Core Days Roma 2024 - The Core Days photo gallery is live!"
Esempio 2
Se le stesse parole che si possono leggere nell’immagine compaiono anche nel testo adiacente, puoi usare un alt text vuoto.
alt=""
Link alla fonte: Images of Text (W3C®)
Screenshot
Gli screenshot devono disporre di un’alternativa testuale che fornisca le stesse informazioni trasmesse dall’immagine.
Suggeriamo di gestirli come immagini di testo, sistemando l’alternativa testuale nel testo adiacente all’immagine nei casi in cui l’alt text sarebbe particolarmente lungo.
Esempio: testo alternativo nullo (alt=””) con equivalente testuale inserito subito dopo lo screenshot.
- Dalla dashboard di WordPress vai in “Impostazioni” e quindi in “Impostazioni di lettura”.
- Nella sezione “Visibilità ai motori di ricerca” spunta la casella “Scoraggia i motori di ricerca dall’effettuare l’indicizzazione di questo sito”.
- Fai clic sul pulsante “Salva le modifiche”.
Grafici e statistiche:
Immagini pensate per trasmettere sinteticamente dati e informazioni.
Alternativa testuale: metti a disposizione dell’utenza un testo che contenga le stesse informazioni trasmesse dal grafico. Il testo può essere trascritto o linkato immediatamente dopo all’immagine: l’importante è che sia esaustivo e facilmente raggiungibile.
Colori: non tutte le persone percepiscono il colore nello stesso modo. Nessuna informazione essenziale del grafico dovrebbe essere veicolata esclusivamente attraverso il colore.
Esempio 1: grafico con pattern, etichette e didascalia usati in aggiunta al colore
- Il grafico utilizza i pattern, oltre al colore, nella rappresentazione visiva dei dati;
- Il grafico mostra una legenda che chiarisce quale combinazione di pattern e colori rappresenta ciascuna delle tre risposte possibili;
- L’alt text riferisce il titolo (Risultati del sondaggio);
- La didascalia riassume i dati per chi usa uno screen reader.
Esempio 2: Grafico con link all’alternativa testuale accessibile
Subito sotto l’immagine compare un link (“leggi le statistiche”) che guida chi ne ha bisogno verso una sezione con la versione testuale delle informazioni.
Fonti
Alcune informazioni di questa sezione sono della Web Accessibility Initiative (WAI) del W3C, documento: Images Tutorial. Editor: Eric Eggert Shadi Abou-Zahra. Copyright © 2024 World Wide Web Consortium (W3C®). Data: aggiornato all’8 febbraio 2022. https://www.w3.org/WAI/tutorials/images/
Some information in this section is from the W3C Web Accessibility Initiative (WAI) document: Images Tutorial. Eric Eggert Shadi Abou-Zahra, eds. Copyright © 2024 World Wide Web Consortium (W3C®). Date: Updated 08 February 2022. https://www.w3.org/WAI/tutorials/images/
Per la sezione su grafici e statistiche: Data Visualizations, Charts, and Graphs – Harvard University