A prima vista, le immagini accessibili possono sembrare un argomento semplice: basta aggiungere un po' di "testo alternativo" a un'immagine e il gioco è fatto. Tuttavia, l'argomento è più complesso di quanto alcuni pensino. In questa sezione esamineremo:
- Come aggiornare il codice per rendere le immagini accessibili.
- Quali informazioni devono essere condivise con gli utenti e dove condividerle.
- Altri modi per migliorare le immagini a supporto delle persone con disabilità.
Scopo e contesto dell'immagine
Prima di scrivere anche una sola riga di codice, pensa allo scopo dell'immagine, a dove verrà visualizzata e a come verrà utilizzata. Queste domande possono aiutarti a determinare il modo migliore per trasmettere le informazioni a una persona che utilizza una tecnologia per la disabilità (AT), come uno screen reader.
Potresti chiederti:
- L'immagine è essenziale per comprendere il contesto della funzionalità o della pagina?
- Che tipo di informazioni sta cercando di trasmettere l'immagine?
- L'immagine è semplice o complessa?
- L'immagine suscita emozioni o spinge l'utente ad agire?
- Oppure l'immagine è solo un "piacere per gli occhi" senza uno scopo reale?
Un diagramma di flusso visivo, ad esempio un albero decisionale delle immagini, può aiutarti a decidere a quale categoria appartiene la tua immagine.
Prova a nascondere le immagini sul tuo sito o nella tua app web utilizzando un'estensione del browser o altri metodi. Poi chiediti: "Capisco i contenuti rimanenti?" Se la risposta è sì, è molto probabile che si tratti di un'immagine decorativa. In caso contrario, l'immagine è informativa in qualche modo e necessaria a livello di contesto. Una volta determinato lo scopo dell'immagine, puoi determinare il modo più accurato per codificarla.
Immagini decorative
Un'immagine decorativa è un elemento visivo che non aggiunge contesto o informazioni aggiuntive che consentano all'utente di comprendere meglio il contesto. Le immagini decorative sono supplementari e possono fornire stile anziché sostanza.
Se decidi che un'immagine è decorativa, deve essere nascosta a livello di programmazione dalle AT. Quando programmi un'immagine in modo che sia nascosta, indichi alla AT che l'immagine non è necessaria per comprendere i contenuti, il contesto o l'azione della pagina. Esistono molti modi per nascondere le immagini, tra cui l'utilizzo di un testo alternativo vuoto o nullo, l'applicazione di ARIA o l'aggiunta dell'immagine come sfondo CSS. Ecco alcuni esempi di come nascondere un'immagine decorativa agli utenti.
alt vuoto o nullo
Un attributo di testo alternativo vuoto o nullo è diverso da un attributo di testo alternativo mancante. Se l'attributo di testo alternativo è mancante, la AT potrebbe leggere il nome del file o i contenuti circostanti per fornire all'utente ulteriori informazioni sull'immagine.
Ruolo impostato su presentation o none
Un ruolo impostato su
presentation o none
rimuove la semantica di un elemento dall'esposizione all'albero di accessibilità.
Nel frattempo, aria-hidden= "true"
rimuove l'intero elemento e tutti i relativi elementi secondari dall'
API di accessibilità.
<!-- All of these choices lead to the same result. -->
<img src=".../Ladybug.jpg" role="presentation">
<img src=".../Ladybug.jpg" role="none">
<img src=".../Ladybug.jpg" aria-hidden="true">
Utilizza aria-hidden con cautela, in quanto potrebbe nascondere elementi che non vuoi nascondere.
Immagini in CSS
Quando aggiungi un'immagine di sfondo con CSS, uno screen reader non può rilevare il file immagine. Assicurati di voler nascondere l'immagine prima di applicare questo metodo.
Immagini informative
Un'immagine informativa è un'immagine che trasmette un concetto, un'idea o un'emozione. Le immagini informative includono foto di oggetti del mondo reale, icone essenziali, disegni semplici e immagini di testo.
Se l'immagine è informativa, devi includere un testo alternativo programmatico che descriva lo scopo dell'immagine. Le descrizioni alternative delle immagini, spesso abbreviate come "testo alternativo", forniscono agli utenti di AT un contesto più ampio sull'immagine e li aiutano a comprendere meglio il messaggio o l'intento di un'immagine.
Puoi aggiungere descrizioni alternative agli elementi
<img> includendo l'attributo alt. Questo vale per tutti i tipi di file, inclusi JPG, PNG o SVG.
<img src=".../Ladybug_Swarm.jpg"
alt="A swarm of red ladybugs is resting on the leaves of my prize rose bush.">
Tuttavia, quando utilizzi gli elementi <svg> in linea, devi prestare particolare
attenzione all'accessibilità. Gli SVG sono codificati semanticamente, quindi le AT li saltano per impostazione predefinita.
Se l'SVG è un'immagine decorativa, va bene: la AT lo ignorerà come previsto. Tuttavia, se l'SVG è un'immagine informativa, aggiungi l'ARIA
role="img" all'elemento, in modo che la AT lo riconosca come un'immagine.
In secondo luogo, gli elementi <svg> non utilizzano l'attributo alt, quindi
è necessario utilizzare metodi di codifica diversi per aggiungere descrizioni alternative alle immagini informative.
<svg role="img">
<title>Cartoon drawing of a red, black, and gray ladybug.</title>
</svg>
Immagini funzionali
Un'immagine funzionale è collegata a un'azione. Un esempio di immagine funzionale è un logo che rimanda alla home page, una lente di ingrandimento utilizzata come pulsante di ricerca o un'icona di social media che ti indirizza a un altro sito web o a un'altra app.
Come le immagini informative, le immagini funzionali devono includere una descrizione alternativa per informare tutti gli utenti del loro scopo. A differenza di un'immagine informativa, ogni immagine funzionale deve descrivere l'azione dell'immagine, non gli aspetti visivi.
Nell'esempio del logo, l'immagine è sia informativa che interattiva, in quanto è sia un'immagine che trasmette informazioni sia un link. In questi casi, puoi aggiungere descrizioni alternative a ogni elemento, ma non è un requisito.
Un modo per aggiungere descrizioni alternative alle immagini è tramite il testo nascosto visivamente. Quando utilizzi questo metodo, il testo viene letto dagli screen reader perché si trova nel DOM, ma è nascosto visivamente con l'aiuto di CSS personalizzati.
Dal snippet di codice puoi notare che "Navigate to the homepage" è il titolo del wrapper e il testo alternativo dell'immagine è "Lovely Ladybugs for your Lawn". Quando ascolti il codice del logo con uno screen reader, senti sia l'elemento visivo sia l'azione trasmessi in un'unica immagine.
<div title="Navigate to the homepage">
<a href="/">
<img src=".../Ladybug_Logo.png" alt="Lovely Ladybugs for your Lawn"/>
</a>
</div>
Immagini complesse
Un'immagine complessa spesso richiede una spiegazione più dettagliata rispetto a un'immagine decorativa, informativa o funzionale. Richiede una descrizione alternativa breve e una lunga per trasmettere l'intero messaggio. Le immagini complesse includono infografiche, mappe, grafici e illustrazioni complesse.
Come per gli altri tipi di immagini, esistono diversi metodi che puoi utilizzare per aggiungere descrizioni alternative alle immagini complesse.
<img src=".../Ladybug_Anatomy.svg" alt="Diagram of the anatomy of a ladybug.">
<a href="ladybug-science.html">Learn more about the anatomy of a ladybug</a>
Un modo per aggiungere una spiegazione aggiuntiva a un'immagine è creare un link a una risorsa o fornire un link di salto a una spiegazione più lunga più avanti nella pagina. Questo metodo è una buona scelta non solo per gli utenti di AT, ma aiuta anche le persone con disabilità, come disabilità cognitive, di apprendimento e di lettura, che potrebbero trarre vantaggio dalla disponibilità di queste informazioni aggiuntive sull'immagine sullo schermo anziché nel codice.
Un altro metodo che puoi utilizzare è aggiungere l'attributo aria-describedby all'elemento
<img>. Puoi collegare a livello di programmazione l'immagine a un ID contenente una descrizione più lunga. Questo metodo crea una forte associazione tra l'immagine e la descrizione completa. La descrizione estesa può essere visualizzata sullo schermo o nascosta visivamente, ma ti consigliiamo di mantenerla visibile per supportare un numero ancora maggiore di persone.
Un altro modo per raggruppare descrizioni alternative brevi con una più lunga è
utilizzare gli elementi<figure> e <figcaption>. Questi elementi si comportano in modo simile a aria-describedby in quanto raggruppano semanticamente gli elementi, formando un'associazione più forte tra l'immagine e la relativa descrizione.
L'aggiunta di ARIA role="group" garantisce la compatibilità con le versioni precedenti dei browser web
che non supportano la semantica dell'elemento <figure>.
Best practice per il testo alternativo
Naturalmente, l'inclusione del testo alternativo non è sufficiente. Il testo deve anche essere significativo. Ad esempio, se l'immagine riguarda uno sciame di coccinelle che mangiano le foglie del tuo cespuglio di rose, ma il testo alternativo recita "insetti", trasmetterebbe l'intero messaggio e l'intento dell'immagine? Assolutamente no.
Le descrizioni alternative devono acquisire il maggior numero possibile di informazioni visive pertinenti ed essere concise. Sebbene non esista un limite al numero di caratteri che uno screen reader può leggere, in genere è consigliabile limitare il testo alternativo a 150 caratteri o meno per evitare l'affaticamento del lettore. Se devi aggiungere un contesto aggiuntivo all'immagine, puoi utilizzare uno dei pattern di immagini complesse, aggiungere testo della didascalia o descrivere ulteriormente l'immagine nel testo principale.
Ecco alcune best practice aggiuntive per il testo alternativo includono:
- Evita di utilizzare parole come "immagine di" o "foto di" nella descrizione, in quanto lo screen reader identificherà questi tipi di file per te.
- Quando assegni un nome alle immagini, cerca di essere il più coerente e preciso possibile. I nomi delle immagini sono un fallback quando il testo alternativo è mancante o viene ignorato.
- Evita di utilizzare caratteri non alfabetici (ad esempio #, 9, &) e utilizza i trattini tra le parole anziché i trattini bassi nei nomi delle immagini o nel testo alternativo.
- Utilizza la punteggiatura corretta quando possibile. In caso contrario, le descrizioni delle immagini sembreranno una frase lunga, infinita e senza interruzioni.
- Scrivi il testo alternativo come se fossi una persona, non un robot. L'uso eccessivo di parole chiave non avvantaggia nessuno: le persone che utilizzano screen reader saranno infastidite e gli algoritmi dei motori di ricerca ti penalizzeranno.