Aggiungere descrizioni dettagliate a immagini e grafici per migliorare la comprensione

Le immagini possono essere un ottimo modo per coinvolgere i visitatori ed esprimere concetti complessi.

Le descrizioni delle immagini sono spesso chiamate “descrizioni alternative”, “testo alternativo” o “testo alt”. Le descrizioni delle immagini forniscono un’alternativa descrittiva basata su testo alle immagini. Per gli studenti ipovedenti, avere delle descrizioni delle immagini che ne spiegano il contenuto è fondamentale ai fini dell’apprendimento. Per tutti gli studenti, le descrizioni testuali possono fornire un contesto più dettagliato che ne favorisce la comprensione.

Ally verifica che ovunque è presente un’immagine siano incluse anche le relative descrizioni. Ally controlla le immagini su una pagina web o in un file allegato.

Ally valuta la gravità dei problemi con i seguenti parametri: critico, serio e minore.

  • Critico. Questi problemi costituiscono il rischio più alto per l’accessibilità e richiedono il maggiore livello di attenzione.
  • Serio. Questi problemi incidono sull’accessibilità e, pur non essendo gravi, richiedono attenzione.
  • Minore. È necessario risolvere questi problemi per migliorare il punteggio di accessibilità.

Un’immagine senza testo alternativo costituisce un problema serio.

Usare Ally per trovare le immagini senza descrizioni

Usa il report sull’accessibilità di Ally per individuare e correggere eventuali problemi di accessibilità presenti nel tuo sito. Usa il link fornito per il report e accedi. Apri il report e guarda l’elenco dei problemi nella tabella Problemi di accessibilità.

La tabella Problemi di accessibilità si trova nella scheda Panoramica e nella scheda Dominio. Inizia dalla scheda Dominio per visualizzare i problemi specifici di un dominio. 

La presenza di immagini senza testo alternativo costituisce un problema serio. Usa la scheda Serio della tabella Problemi di accessibilità per visualizzare l’elenco dei problemi di livello Serio. Seleziona i problemi in cui le immagini non hanno una descrizione.

Se inizi dalla scheda Panoramica seleziona il problema, quindi il dominio che presenta tale problema.

Nell’elenco, i problemi relativi alle descrizioni delle immagini possono iniziare con Immagine, Documento o HTML.

Nell’elenco dei problemi relativi alle descrizioni delle immagini presenti nel dominio, seleziona l’indicatore del punteggio accanto al contenuto che presenta il problema. Viene visualizzato il riquadro del feedback dell’editor dei contenuti.

Visualizzare l’anteprima delle immagini senza descrizioni

Il riquadro del feedback di Ally mostra un’anteprima del contenuto oltre a un feedback dettagliato e alle informazioni di supporto per risolvere i problemi di accessibilità. Usa l’anteprima per visualizzare le immagini senza descrizioni.

L’anteprima evidenzia le aree specifiche in cui si trovano i problemi di accessibilità all’interno del documento. Le parti evidenziate mostrano contemporaneamente tutte le occorrenze di un determinato tipo di problema. Ad esempio, se per le tue immagini non sono presenti descrizioni alternative, le parti evidenziate mostrano ogni area in cui si ripete questo problema specifico.

Strumenti di anteprima

Usa gli strumenti di anteprima per visualizzare i problemi presenti nel documento.

  • Sfoglia l’anteprima pagina per pagina.
  • Guarda quante volte si verifica un determinato problema.
  • Passa da un’evidenziazione all’altra.
  • Mostra o nascondi le evidenziazioni.
  • Usa lo zoom per ingrandire o rimpicciolire l’anteprima dei contenuti.
  • Se il problema si trova in un documento allegato, scarica il file originale.

Seguire i passaggi guidati di Ally per aggiungere descrizioni alle immagini

Ally parte dal presupposto che tu abbia una conoscenza basilare del codice HTML e di come usare il Content Management System (CMS). Per seguire la procedura guidata, devi sapere come modificare una pagina web nel codice HTML o nel codice sorgente del CMS.

Assieme all’anteprima, Ally fornisce una procedura guidata dettagliata su come risolvere il problema.  Ally organizza il feedback sotto forma di struttura ad albero di decisione. Tutto ciò che devi fare è leggere le indicazioni e rispondere ai messaggi visualizzati sullo schermo. Scopri qual è il problema, perché è importante e come correggerlo in modo opportuno.

Seleziona Come aggiungere descrizioni per seguire la procedura guidata.

Testo alternativo delle immagini

Scrivere descrizioni adeguate

Segui queste best practice per scrivere descrizioni delle immagini adeguate:

  • Descrivi l'immagine in relazione al contesto della pagina. Spiega l'intero significato dell'immagine.
  • Evita espressioni come "immagine di" o "foto di". Gli screen reader annunciano automaticamente le immagini in quanto tali.
  • Esprimi i concetti in modo conciso.
  • Scrivi descrizioni dettagliate per le immagini complesse come le infografiche e inseriscile nella stessa pagina, subito dopo l'infografica. Inserisci un anchor link nella parte superiore della pagina per visualizzare il testo alternativo. Visualizza un esempio di infografica con testo alternativo.
  • Evita di inserire immagini testuali. Se proprio non puoi farne a meno, copia il testo dell'immagine nella descrizione alternativa.
  • Di' qualcosa di diverso. Non ripetere le descrizioni alternative nella stessa immagine. Non ripetere ciò che hai già detto nella pagina.
  • Identifica le immagini che non raffigurano contenuti rilevanti come decorative.

Che cos'è un'immagine decorativa?

Un'immagine è decorativa quando non aggiunge informazioni alla pagina. Ad esempio, una cornice utilizzata per separare gli argomenti o la foto di una persona al telefono affiancata a un testo che tratta di capacità comunicative.

Sono importanti per l'impatto visivo che hanno, ma non è necessario che vengano lette da uno screen reader.

Ulteriori informazioni sulle immagini decorative sul sito web dell'iniziativa per rendere il web più accessibile

Perché le descrizioni alternative delle immagini sono importanti?

Ci sono molti motivi per cui utilizzare le descrizioni alternative delle immagini.

  • Le descrizioni alternative, o testo alternativo, sono presenti nelle linee guida WCAG 2.2
  • Gli studenti possono cercare un'immagine
  • Gli studenti ipovedenti hanno difficoltà a visualizzare le immagini
  • Gli studenti con una scarsa connessione di rete potrebbero avere difficoltà a visualizzare le immagini
  • Gli screen reader non sono in grado di leggere le immagini
  • Alcuni studenti apprendono meglio dalle descrizioni che dalle immagini
  • È più semplice ridimensionare il testo rispetto alla maggior parte delle immagini quando si ingrandisce la schermata o la pagina

Modi per aggiungere le descrizioni delle immagini sulle pagine web

Esistono più modi per aggiungere o modificare le descrizioni delle immagini sulle pagine web.

  • HTML: la procedura guidata di Ally illustra come trovare e modificare le descrizioni delle immagini nel codice HTML. In pratica, devi individuare la pagina web con l’immagine. Modifica la pagina. Aggiorna il codice HTML dell’immagine in modo che includa un attributo di testo alt. Salva la pagina.
  • Impostazioni dell’immagine: la maggior parte dei CMS fornisce un modo per modificare il testo alternativo nelle impostazioni dell’immagine. Trova l’immagine nella pagina web o nel repository dei file del CMS. Usa gli strumenti del CMS per modificare l’immagine. Aggiungi la descrizione dell’immagine nel campo Testo alternativo o Alt text. Salva l’immagine.

Visita il sito w3schools per ulteriori informazioni sul codice HTML e CSS.

Perché non vedo “img src” nel codice HTML?

Il modo più comune per aggiungere immagini a una pagina web è con img srcl'attributo HTML. Img src è un attributo HTML che usa l'URL del file di immagine per posizionarlo sulla pagina web. Tuttavia, ogni CMS è diverso. Il tuo sito potrebbe usare codici o attributi diversi. 

Ad esempio, in Drupal è possibile che tu veda una stringa come questa:

<drupal-entity data-embed-button="media_browser" data-entity-embed-display="view_mode:media.embedded" data-entity-type="media" data-entity-uuid="2961e3a2-8fbe-4e3f-baeb-953d69f70750"></drupal-entity>

Aggiungi il testo alternativo all’inizio dell’attributo. Esempio:

<drupal-entity alt="add image description here" data-embed-button="media_browser" data-entity-embed-display="view_mode:media.embedded" data-entity-embed-display-settings="" data-entity-type="media" data-entity-uuid="2961e3a2-8fbe-4e3f-baeb-953d69f70750"></drupal-entity>

Se non vedi img src nel codice HTML, prova a usare gli strumenti del CMS per modificare le impostazioni dell’immagine. Trova l’immagine nella pagina web o nel repository dei file del CMS. Usa gli strumenti del CMS per aprire le impostazioni dell’immagine. Aggiungi la descrizione dell’immagine nel campo Testo alternativo o Alt text. Salva l’immagine.

Se ancora non sai come procedere, contatta l’amministratore o lo sviluppatore del sito web e chiedi di mostrarti come aggiungere le immagini alle pagine web e come inserire il testo alternativo.