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 hanno un impatto sull’accessibilità e, pur non essendo critici, 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.

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 Testo alt. 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 è tramite l’attributo HTML img src. Img src è un attributo HTML che utilizza l’URL del file di immagine per inserire l’immagine nella 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 Testo alt. 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.