Immagini

Le immagini accessibili possono sembrare un argomento semplice a prima vista, aggiungi un po' di "alt text" a un'immagine e il gioco è fatto. Ma l'argomento è più articolato di quanto non pensino. In questa sezione esamineremo i seguenti argomenti:

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

Scopo e contesto dell'immagine

Prima che venga scritta anche una sola riga di codice, devi pensare al punto dell'immagine e come verrà usata. Ponersi domande sull' lo scopo e il contesto dell'immagine possono aiutarti a stabilire come comunicare al meglio informazioni a una persona che utilizza tecnologia assistiva (AT) come gli screen reader.

Potresti chiederti:

• L'immagine è essenziale per comprendere il contesto della funzionalità o della pagina?
• Che tipo di informazioni cerca di trasmettere l'immagine?
• L'immagine è semplice o complessa?
• L'immagine suscitano emozioni o invita l'utente ad agire?
• Oppure l'immagine è solo una "caramella per gli occhi" senza uno scopo reale?

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

Prova a nascondere le immagini sul sito o nell'app web utilizzando un'estensione del browser oppure altri metodi. Quindi chiediti: "Comprendo i contenuti che rimangono?". Se la risposta è sì, molto probabilmente si tratta di un'immagine decorativa. In caso contrario, l'immagine è invece informativo in qualche modo e contestualmente necessario. Una volta determinare lo scopo dell'immagine, puoi determinare il modo più preciso per programmare per questo.

Immagini decorative

Un'immagine decorativa è un elemento visivo che non aggiunge ulteriore contesto o informazioni che consentono all'utente per capire meglio il contesto. Le immagini decorative sono supplementari e possono fornire uno stile piuttosto che una sostanza.

Se decidi che un'immagine è decorativa, deve essere nascosta in modo programmatico dagli AT. Quando programmi un'immagine per nascondere, quest'ultimo segnala all'AT che l'immagine non è necessaria per comprendere i contenuti, il contesto o l'azione della pagina. Là esistono molti modi per nascondere le immagini, ad esempio usare un'alternativa di testo vuoto/nullo, applicare ARIA oppure aggiungendo l'immagine come sfondo CSS. Di seguito sono riportati alcuni esempi di come nascondere un'immagine decorativa degli utenti.

Vuoto o nullo alt

Un attributo di testo alternativo vuoto/nullo è diverso da un'alternativa mancante attributo text. Se manca l'attributo di testo alternativo, l'AT potrebbe il nome del file o i contenuti circostanti per dare all'utente maggiori 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'accessibilità albero di Natale. Nel frattempo, aria-hidden= "true" rimuoverà l'intero elemento (e tutti i relativi elementi secondari) dalla l'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, in quanto potrebbe nascondere elementi che che non vuoi nascondere.

Immagini in CSS

Quando aggiungi un'immagine di sfondo con CSS, lo screen reader non rileva il carattere un 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 semplice. I tipi di immagini informative includono foto di oggetti reali, icone essenziali, disegni semplici e immagini di testo.

Se l'immagine è informativa, devi includere testo alternativo programmatico che descriva lo scopo dell'immagine. Le descrizioni alternative delle immagini, spesso abbreviate con "testo alternativo", forniscono agli utenti di AT maggiore contesto in merito a un'immagine e li aiutano a comprendere meglio il messaggio o l'intento di un'immagine.

Semplici descrizioni alternative utilizzando Elementi <img> si ottengono includendo l'attributo alt, indipendentemente dal tipo di file punta a, come .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.">

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

Innanzitutto, poiché gli SVG sono codificati semanticamente, AT li ignorerà per impostazione predefinita. Se hai un'immagine decorativa, questo non è un problema, l'AT ignorerà come previsto. Se invece hai un'immagine informativa, un role="img" ARIA deve essere aggiunto al pattern per consentire all'AT di riconoscerlo come immagine.

In secondo luogo, gli elementi <svg> non utilizzano l'attributo alt, perciò devono essere diversi metodi di programmazione vengono utilizzate 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 è collegati a un'azione. Un esempio di immagine funzionale è un logo che collega alla home page, a una lente d'ingrandimento usata come pulsante di ricerca o a un social media che ti reindirizza a un altro sito web o a un'altra app.

Come le immagini informative, le immagini funzionali devono includere un'alternativa descrizione per informare tutti gli utenti sul loro scopo. A differenza di un'immagine informativa, ogni immagine funzionale deve descrivere l'azione dell'immagine, non la gli aspetti visivi.

Nell'esempio del logo, l'immagine è informativa e utilizzabile in quanto è allo stesso tempo un'immagine che trasmette informazioni e si comporta come un link. In questi casi, puoi aggiungere descrizioni alternative a ogni elemento, ma non si tratta di requisito.

Un modo per aggiungere descrizioni alternative alle immagini è tramite visualizzazioni nascoste testo. Quando utilizzi questo metodo, il testo verrà letto dagli screen reader perché si trova nel DOM, ma è visivamente nascosta con l'aiuto di CSS personalizzati.

Nello snippet di codice puoi vedere che "Vai alla home page" è la il titolo dell'involucro e il testo alternativo dell'immagine è "Lovely Ladybugs for your Prato." Quando ascolti il codice del logo con uno screen reader, senti sia il codice del logo immagini e 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 contesto decorativo, informativo o un'immagine funzionale. Richiede un'alternativa breve e una lunga descrizione per trasmettere l'intero messaggio. Tra le immagini complesse ci sono infografiche, mappe, grafici/grafici e illustrazioni complesse. Come l'altro tipi di immagini, puoi usare diversi metodi per aggiungere e descrizioni 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 è quello di inserire un link a una risorsa o fornire un link per passare a una spiegazione più lunga più avanti nella pagina. Questo metodo è una buona scelta, non solo per gli utenti AT, ma aiuta anche le persone con disabilità, come quelle intellettive, dell'apprendimento e della lettura disabilità, che possono trarre vantaggio dall'avere questa immagine aggiuntiva le informazioni immediatamente disponibili sullo schermo, invece che sepolte nel codice.

Un altro metodo che puoi utilizzare è aggiungere l'attributo aria-describedby alla Elemento <img>. Puoi collegare in modo programmatico l'immagine a un ID contenente un descrizione più lunga. Questo metodo crea una forte associazione tra l'immagine e la descrizione completa. La descrizione estesa può essere visualizzata nella schermo o visivamente nascosto, ma valuta la possibilità di mantenerlo visibile per supportare anche altre persone.

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

Best practice per il testo alternativo

Naturalmente, includere il testo alternativo non è sufficiente. Il testo deve inoltre essere significativo. Ad esempio, se l'immagine raffigura uno sciame di coccinelle che masticano foglie del tuo premio di rose, ma il testo alternativo è "coccinelle" vorrei che trasmettono il messaggio completo e l'intento dell'immagine? Assolutamente no.

Le descrizioni alternative devono acquisire il maggior numero di informazioni visive pertinenti possibili ed essere concise. Anche se non esiste un limite al numero di caratteri, screen reader è in grado di leggere, in genere è consigliabile applicare l'iniziale maiuscola al testo alternativo Massimo 150 caratteri per evitare l'affaticamento del lettore. Se devi aggiungere altri contesto dell'immagine, puoi utilizzare uno dei pattern complessi dell'immagine, aggiungere testo della didascalia o descrivere ulteriormente l'immagine nel testo principale.

Qualche altra migliore offerta di testo alternativo pratiche includono:

• Evita di usare parole come "immagine di" o "foto di" nella descrizione, dato che screen reader identificherà automaticamente questi tipi di file.
• Quando assegni un nome alle immagini, cerca di essere il più coerente e preciso possibile. Immagine 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 i trattini. tra le parole anziché i trattini bassi nei nomi delle immagini o nel testo alternativo.
• Se possibile, utilizza la punteggiatura appropriata. Senza questo codice, le descrizioni delle immagini suonerà come un'unica frase lunga, infinita e imprecisa.
• Scrivi un testo alternativo come un essere umano e non un robot. L'uso di parole chiave in eccesso non rappresentano un vantaggio per nessuno: le persone che usano screen reader saranno fastidiose e gli algoritmi dei motori di ricerca ti penalizzeranno.

Verifica le tue conoscenze

Verifica le tue conoscenze di ARIA e HTML