Immagini

A prima vista le immagini accessibili possono sembrare un argomento semplice: devi aggiungere un po' di "testo alternativo" a un'immagine e hai finito. Ma l'argomento è più articolato di quanto si pensi. In questa sezione esamineremo:

• Come aggiornare il codice per rendere accessibili le immagini.
• Quali informazioni devono essere condivise con gli utenti e dove.
• Altri modi per migliorare le immagini per supportare le persone con disabilità.

Scopo e contesto dell'immagine

Prima ancora di scrivere una sola riga di codice, devi pensare al punto dell'immagine e a come verrà utilizzato. Porre domande sullo scopo e sul contesto dell'immagine può aiutarti a stabilire come trasmettere al meglio le informazioni a una persona utilizzando tecnologie per la disabilità come gli 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 stimola l'emozione o spinge l'utente ad agire?
• Oppure l'immagine è solo una "caramella per gli occhi" visiva senza uno scopo reale?

Un diagramma di flusso visivo, ad esempio un albero decisionale dell'immagine, può aiutarti a decidere a quale categoria appartiene la tua immagine.

Prova a nascondere le immagini nel sito o nell'app web utilizzando un'estensione del browser o altri metodi. Poi chiediti: "Comprendo i contenuti rimasti?". Se la risposta è sì, molto probabilmente si tratta di un'immagine decorativa. In caso contrario, l'immagine è informativa in qualche modo e contestualmente necessaria. Una volta stabilito lo scopo dell'immagine, puoi determinare il modo più preciso per codificarla.

Immagini decorative

Un'immagine decorativa è un elemento visivo che non aggiunge ulteriore contesto o informazioni che consentono all'utente di comprenderne meglio il contesto. Le immagini decorative sono supplementari e possono aggiungere stile piuttosto che sostanza.

Se decidi che un'immagine è decorativa, l'immagine deve essere nascosta in modo programmatico ai server di accesso autorizzati. Quando programmi un'immagine da nascondere, segnali all'AT che l'immagine non è necessaria per comprendere i contenuti, il contesto o l'azione della pagina. Esistono molti modi per nascondere le immagini, ad esempio utilizzare un'alternativa per il testo vuoto/null, applicare ARIA o aggiungere l'immagine come sfondo CSS. Di seguito sono riportati alcuni esempi di come nascondere un'immagine decorativa agli utenti.

Vuoto o nullo alt

Un attributo di testo alternativo vuoto/nullo è diverso da un attributo di testo alternativo mancante. Se l'attributo del testo alternativo non è presente, l'AT potrebbe leggere ad alta voce 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 alla struttura dell'accessibilità. Nel frattempo, aria-hidden= "true" rimuove l'intero elemento, insieme a tutti i relativi elementi secondari, dall'API Accessibility.

<!-- 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">

Usa aria-hidden con cautela, perché potrebbe nascondere gli elementi che non vuoi nascondere.

Immagini in CSS

Quando aggiungi un'immagine di sfondo con CSS, uno screen reader non rileverà il file immagine. Prima di applicare questo metodo, assicurati che l'immagine sia nascosta.

Immagini informative

Un'immagine informativa è un'immagine che trasmette un concetto, un'idea o un'emozione semplici. Tra i tipi di immagini informative figurano oggetti reali, icone essenziali, disegni semplici e immagini di testo.

Se l'immagine è informativa, ti consigliamo di includere un testo alternativo programmatico che descriva lo scopo dell'immagine. Le descrizioni alternative delle immagini, spesso abbreviate come "testo alternativo", offrono agli utenti AT più contesto sull'immagine e li aiutano a comprendere meglio il messaggio o l'intento dell'immagine.

Per semplici descrizioni alternative, che utilizzano gli elementi <img>, è possibile includere l'attributo alt, indipendentemente dal tipo di file a cui rimanda, ad esempio .jpg, .png, .svg e altri.

<img src=".../Ladybug_Swarm.jpg" alt="A swarm of red ladybugs is resting on the leaves of my prize rose bush.">

Quando utilizzi gli elementi <svg> in linea, tuttavia, devi prestare attenzione all'accessibilità.

Primo, poiché gli SVG sono codificati semanticamente, AT li ignorerà per impostazione predefinita. Se hai un'immagine decorativa, questo non è un problema: l'AT la ignorerà come previsto. Tuttavia, se hai un'immagine informativa, è necessario aggiungere un role="img" ARIA al pattern affinché AT possa riconoscerla come immagine.

In secondo luogo, gli elementi <svg> non utilizzano l'attributo alt, quindi per aggiungere descrizioni alternative alle immagini informative, è necessario utilizzare diversi metodi di codifica.

  <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 d'ingrandimento utilizzata come pulsante di ricerca o un'icona di social media che rimanda a un altro sito web o a un'altra app.

Come le immagini informative, anche quelle funzionali devono includere una descrizione alternativa per comunicare a tutti gli utenti il 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 è informativa e strategica, in quanto è sia che trasmette informazioni che si comporta come un link. In questi casi, puoi aggiungere descrizioni alternative a ogni elemento, ma non è un requisito.

Un modo per aggiungere descrizioni alternative alle immagini è usare del testo nascosto. Quando utilizzi questo metodo, il testo verrà letto dagli screen reader poiché si trova nel DOM, ma viene nascosto visivamente con l'aiuto di CSS personalizzati.

Dallo snippet di codice puoi notare che "Vai alla home page" è il titolo del testo alternativo e il testo alternativo dell'immagine è "Lovely Ladybugs for your Lawn". Quando ascolti il codice del logo con uno screen reader, senti sia l'immagine sia l'azione trasmessa in un'unica immagine.

<div title="Navigate to the homepage">
   <a href="/">
      <img src=".../Ladybug_Logo.png" alt="Lovely Ladybugs for your Lawn"></img>
   </a>
</div>

Immagini complesse

Un'immagine complessa spesso richiede più spiegazioni rispetto a un'immagine decorativa, informativa o funzionale. Richiede una descrizione alternativa breve e una lunga per trasmettere il messaggio completo. Le immagini complesse includono infografiche, mappe, grafici e illustrazioni. 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 ulteriore spiegazione a un'immagine è un link a una risorsa o un link per passare a una spiegazione più lunga in un secondo momento nella pagina. Questo metodo è una buona scelta non solo per gli utenti AT, ma anche per le persone con disabilità, come disabilità intellettive, cognitive, di apprendimento e di lettura, che potrebbero trarre vantaggio dall'avere queste informazioni aggiuntive facilmente disponibili sullo schermo anziché sepolte nel codice.

Un altro metodo che puoi utilizzare consiste nell'aggiungere l'attributo aria-describedby all'elemento <img>. Puoi collegare in modo programmatico 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 consigliamo di tenerla visibile per supportare ancora più persone.

Un altro modo per raggruppare descrizioni alternative brevi con una più lunga è utilizzare gli elementi HTML5 <figure> e <figcaption>. Questi elementi agiscono in modo simile a aria-describedby poiché raggruppa semanticamente gli elementi, creando un'associazione più forte tra l'immagine e la relativa descrizione. L'aggiunta di role="group" di ARIA garantisce la compatibilità con le versioni precedenti dei browser web che non supportano la semantica nativa dell'elemento <figure>.

Best practice per il testo alternativo

Naturalmente, includere un testo alternativo non è sufficiente. Inoltre, il testo deve essere significativo. Ad esempio, se l'immagine riguarda uno sciame di coccinelle che mangiano le foglie del tuo cespuglio di rose in premio, ma il testo alternativo è "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. Anche se non esiste un limite al numero di caratteri che uno screen reader può leggere, di solito si consiglia di limitare il testo alternativo a 150 caratteri o meno per evitare l'affaticamento del lettore. Se devi aggiungere ulteriore contesto all'immagine, puoi utilizzare uno dei pattern di immagine complessi, aggiungere una didascalia o descrivere ulteriormente l'immagine nel testo principale.

Ecco alcune best practice alternative per il testo:

• Evita di utilizzare parole come "immagine di" o "foto di" nella descrizione, perché lo screen reader identificherà automaticamente questi tipi di file.
• Quando assegni un nome alle immagini, cerca di essere il più coerente e preciso possibile. I nomi delle immagini sono un elemento di riserva quando il testo alternativo manca o viene ignorato.
• Evita di utilizzare caratteri non alfabetici (ad esempio #, 9 e &) e utilizza trattini tra le parole anziché trattini bassi nei nomi delle immagini o nel testo alternativo.
• Se possibile, usa la punteggiatura corretta. Senza di esso, le descrizioni delle immagini saranno come un'unica frase lunga e continuativa.
• Scrivi un testo alternativo come un essere umano e non un robot. L'uso di parole chiave in eccesso non è utile per nessuno: chi usa gli screen reader sarà infastidito e gli algoritmi dei motori di ricerca ti penalizzeranno.

Verifica la tua comprensione

Verifica le tue conoscenze di ARIA e HTML