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.
Alternative Text on Images
Writing good descriptions
Follow these best practices to write good alternative text descriptions for your images:
- Describe the image based on the page context. Convey the full meaning of the image.
- Avoid saying "image of" or "picture of". Screen readers automatically announce images as images.
- Be concise.
- Write narratives for complex images like infographics. Put this narrative on the page immediately following the infographic. Include an anchor link at the top of the page to view the text alternative. See an example of an infographic with a text alternative.
- Avoid images of text. If you can't avoid it, copy the text into the alternative description.
- Say something new. Don't repeat alternative descriptions on the same page. Don't repeat what is already said on the page.
- Identify images that don't represent relevant content as decorative.
What is a decorative image?
An image is decorative when it doesn't add to the information on the page. For example, art work used to separate topics or a photo of someone on the phone when discussing communication skills.
They are valuable in their visual appeal but may not need to be read by screen readers.
More on decorative images on the web accessibility initiative website
Why are alternative image descriptions important?
There are many reasons to use alternative descriptions with your images.
- Alternative descriptions, or text, are in the WCAG 2.2 guidelines
- Students can search for an image
- Students with visual impairments have difficulty perceiving images
- Student with a poor network connection may have difficulty perceiving images
- Screen readers can't read images
- Some students learn better from descriptions than images
- Text scales better than most images when the screen or page is enlarged
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.
