Aggiungi testo alternativo alle immagini
Aggiungi una descrizione dettagliata a immagini e grafici per migliorare la comprensione
Le immagini possono essere un ottimo modo per coinvolgere i visitatori e possono aiutare a comunicare idee complesse.
Le descrizioni delle immagini sono spesso chiamate "descrizioni alternative", "testo alternativo" e "testo alternativo". Le descrizioni delle immagini forniscono un'alternativa descrittiva basata sul testo all'immagine. Per gli studenti con disabilità visive, le descrizioni delle immagini che spiegano il contenuto di un'immagine sono fondamentali per il loro apprendimento. Per tutti gli studenti, le descrizioni testuali possono fornire un contesto più profondo per aiutare la loro comprensione.
Ally controlla le descrizioni delle immagini ovunque ci sia un'immagine. Ally controlla le immagini su una pagina web o in un file allegato.
Ally classifica i problemi in base a grave, maggiore e minore.
Grave. Questi problemi rappresentano il rischio maggiore per l'accessibilità e richiedono la massima attenzione.
Maggiore. Questi problemi influiscono sull'accessibilità e, sebbene non gravi, richiedono attenzione.
Minore. Questi problemi devono essere presi in considerazione per ottenere un punteggio di accessibilità migliore.
Le immagini prive di testo alternativo sono un grosso problema.
Usa Ally per trovare le immagini prive di descrizioni
Utilizza il report di accessibilità di Ally per scoprire e risolvere i problemi di accessibilità del tuo sito. Utilizza il link fornito per il report ed effettua l'accesso. Apri il report e consulta l'elenco dei problemi nella tabella Problemi di accessibilità.
Suggerimento
La tabella Problemi di accessibilità si trova sia nella scheda Panoramica che in quella Dominio. Iniziare dalla scheda Dominio per visualizzare i problemi specifici di un dominio.
È un grosso problema avere immagini senza testo o descrizioni alternative. Utilizzare la scheda Principali nella tabella Accessibilità per visualizzare l'elenco dei problemi principali. Seleziona i problemi in cui le immagini non hanno descrizioni.
Suggerimento
Se inizi dalla scheda Panoramica seleziona il problema e quindi il dominio con il problema.
Suggerimento
I problemi di descrizione dell'immagine possono iniziare con Immagine, Documento o HTML nell'elenco.
Dall'elenco dei problemi relativi alle descrizioni delle immagini nel dominio, seleziona l'indicatore del punteggio accanto a un elemento con il problema. Si apre il pannello di feedback dell'editor di contenuti.
Visualizza l'anteprima delle immagini senza descrizioni
Il pannello di feedback di Ally ti mostra un'anteprima del contenuto, oltre a feedback dettagliati e supporto per aiutarti a risolvere i tuoi problemi di accessibilità. Usa l'anteprima per vedere le immagini senza descrizioni.
L'anteprima evidenzia i punti in cui è possibile individuare problemi specifici di accessibilità nel documento. Gli highlights mostrano ogni occorrenza di un tipo di problema alla volta. Ad esempio, se le tue immagini mancano di descrizioni alternative, gli highlights mostrano ogni luogo in cui si verifica questo problema specifico.
Strumenti di anteprima
Utilizza gli strumenti di anteprima per esplorare i problemi nel tuo documento.
Spostati nell'anteprima pagina per pagina.
Guarda quante volte viene visualizzato un problema specifico.
Salta tra gli highlights del problema.
Nascondi o mostra gli highlights.
Ingrandisci o riduci il contenuto dell'anteprima.
Se il problema si trova in un documento allegato, scaricare il file originale.
Segui i passaggi guidati di Ally per aggiungere le descrizioni delle immagini
Importante
Ally presume che tu abbia una conoscenza di base dell'HTML e di come utilizzare il tuo sistema di gestione dei contenuti (CMS). Per seguire i passaggi guidati è necessario sapere come modificare una pagina web in HTML o nel codice sorgente del tuo CMS.
Insieme all'anteprima, Ally ti fornisce una guida passo passo su come risolvere il problema. Ally organizza questo feedback in un albero decisionale. Tutto quello che devi fare è leggere le indicazioni e rispondere alle richieste. Scopri qual è il problema, perché è importante e come correggerlo in modo appropriato.
Seleziona Come aggiungere descrizioni per seguire i passaggi guidati.
Scrivere buone descrizioni
Segui queste best practice per scrivere buone descrizioni testuali alternative per le tue immagini:
Descrivi l'immagine in base al contesto della pagina. Trasmetti il pieno significato dell'immagine.
Evita di dire "immagine di" o "immagine di". I lettori schermo annunciano automaticamente le immagini come immagini.
Sii conciso.
Scrivi narrazioni per immagini complesse come le infografiche. Metti questa narrazione sulla pagina immediatamente successiva all'infografica. Includi un link di ancoraggio nella parte superiore della pagina per visualizzare il testo alternativo.
Evita le immagini di testo. Se non puoi evitarlo, copia il testo nella descrizione alternativa.
Dì qualcosa di nuovo. Non ripetere descrizioni alternative sulla stessa pagina. Non ripetere ciò che è già stato detto nella pagina.
Indica le immagini che non rappresentano contenuti pertinenti come decorative.
Che cos'è un'immagine decorativa?
Un'immagine è decorativa quando non aggiunge nulla alle informazioni sulla pagina. Ad esempio, un'opera d'arte utilizzata per separare gli argomenti o una foto di qualcuno al telefono quando si discute di abilità comunicative.
Sono utili per il loro fascino visivo, ma non necessariamente devono essere lette dai lettori schermo.
Perché le descrizioni alternative delle immagini sono importanti?
Ci sono molte ragioni per utilizzare descrizioni alternative con le tue immagini.
Le descrizioni alternative, o testo, sono contenute nelle linee guida WCAG 2.2
Gli studenti possono cercare un'immagine
Gli studenti con disabilità visive hanno difficoltà a percepire le immagini
Gli studenti con una connessione di rete scadente potrebbero avere difficoltà a percepire le immagini
I lettori schermo non riescono a leggere le immagini
Alcuni studenti imparano meglio con le descrizioni invece che con le immagini
Il testo viene ridimensionato meglio della maggior parte delle immagini quando lo schermo o la pagina sono ingranditi
Modi per aggiungere descrizioni di immagini alle pagine web
C'è più di un metodo per aggiungere o modificare le descrizioni delle immagini sulle tue pagine web.
HTML: i passaggi guidati di Ally ti guidano attraverso come trovare e modificare le descrizioni delle immagini in HTML. Fondamentalmente, trova la pagina web con l'immagine. Modifica la pagina. Aggiorna il codice HTML dell'immagine per includere un attributo di testo alternativo. Salva la pagina.
Impostazioni immagine: la maggior parte dei CMS fornisce un modo per modificare il testo alternativo nelle impostazioni dell'immagine. Trova l'immagine sulla pagina web o nella repository di file CMS. Usa gli strumenti CMS per modificare l'immagine. Aggiungi la descrizione dell'immagine nel testo alternativo o nel campo di testo alternativo. Salva l'immagine.
Suggerimento
Visita w3schools per saperne di più su HTML e CSS
Perché non vedo "img src" nel mio HTML?
Il modo più comune per aggiungere immagini a una pagina web è con l'attributo HTML img src. Img src è un attributo HTML che utilizza l'URL del file immagine per posizionare l'immagine sulla pagina web. Ma ogni CMS è diverso. Il tuo sito potrebbe utilizzare codice o attributi diversi.
Ad esempio, in Drupal potresti vedere qualcosa del genere:
<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 testo alternativo all'inizio dell'attributo. Per 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 nell'HTML, prova a utilizzare gli strumenti CMS per modificare le impostazioni dell'immagine. Trova l'immagine sulla pagina web o nella repository di file CMS. Usa gli strumenti CMS per aprire le impostazioni dell'immagine. Aggiungi la descrizione dell'immagine nel testo alternativo o nel campo di testo alternativo. Salva l'immagine.
Se ancora non sai come procedere, contatta l'amministratore o lo sviluppatore del tuo sito web. Chiedi loro di mostrarti come vengono aggiunte le immagini alle tue pagine web e come aggiungere testo alternativo.