Secondo il Rapporto ISTAT “Condizioni di salute e ricorso ai servizi sanitari in Italia e nell’Unione europea” del 2019, il 16,7% della popolazione italiana (il 28,8% di chi ha più di 65 anni e il 33,9% di chi ha più di 75 anni) ha delle limitazioni moderate nella vista. L’1,9% delle persone dai 15 anni in su soffre di gravi limitazioni sul piano visivo e questa percentuale sale al 5,0% tra gli chi ha più di 65 anni e all’8,0% tra chi ha più di 75 anni. (Fonte: Ministero della Salute)
Molte persone con disabilità visive si affidano a tecnologie che assistono i lettori di schermo per navigare in internet.
Un sito accessibile, cioè utilizzabile nel pieno delle sue funzioni da tutti gli utenti e pronto ad adattarsi per soddisfare le esigenze di ognuno, è quindi molto importante.
In questo post vediamo un come rendere un sito internet maggiormente accessibile, cioè come agevolarne la lettura da parte dei lettori di schermo (o screen reader).
Come aggiungere il testo alternativo alle immagini
Come funzionano i lettori di schermo? Si tratta di software che leggono il contenuto del codice, quindi dei testi e delle descrizioni inserite per gli elementi grafici.
Il testo alternativo per le immagini è quindi una delle caratteristiche di accessibilità più importanti che dovresti includere nel tuo sito web per garantirne la conformità agli standard di accessibilità web.
Cos’è il testo alternativo?
Il testo alternativo, noto anche come testo alt o tag alt, è una descrizione di un’immagine utilizzata dai lettori di schermo e altre tecnologie che aiutano a trasmetterne il significato e il contesto agli utenti con disabilità visive. È essenziale per le persone che dipendono dalla tecnologia per la lettura dei contenuti di un sito web, poiché consente loro di accedere al contenuto di un’immagine che altrimenti perderebbero.
Ad esempio, immagina di avere un’infografica sulla storia della lenti oftalmiche sul tuo sito web. Senza il testo alternativo che descrive il contenuto dell’infografica, le persone non vedenti o ipovedenti perderanno queste informazioni.
Il testo alternativo inoltre può anche migliorare l’ottimizzazione per i motori di ricerca (SEO), perché i motori di ricerca utilizzano il testo alternativo come parte dei loro algoritmi durante l’indicizzazione dei siti web.
Come aggiungere il testo alternativo alle immagini?
1) Aggiungi nomi di file descrittivi
Il primo passo per aggiungere il testo alternativo è nominare il file in modo appropriato. Quando carichi un file immagine o un video sul tuo sito web, assicurati che il nome descriva ciò che è nell’immagine. Ad esempio, se hai un’immagine di un occhiale da sole chiamato “Brand”, nomina il file “brand-occhiale-da-sole-modello-xxx.jpg” invece di “IMG_1234.jpg”.
In questo modo, non solo rendi più facile per i lettori di schermo identificare l’immagine, ma aiuti anche i motori di ricerca a capire di cosa trattano le tue immagini.
2) Aggiungi il testo alternativo
Dopo aver caricato il file dell’immagine, aggiungi il testo alternativo per descrivere ciò che è nell’immagine. La maggior parte dei content editor o dei sistemi di gestione dei contenuti (CMS come WordPress, Shopify, Joomla, Wix etc.) ti consente di aggiungere il testo alt quando inserisci le immagini nel tuo sito.
Ad esempio, se hai un’immagine del tuo centro ottico, puoi scrivere qualcosa come “centro ottico XXX Bologna”.
Figura: esempio di schermata di modifica immagini di WordPress
3) Sii breve e descrittivo
Il testo alternativo deve essere breve (circa 100 caratteri o meno) e descrittivo. Evita di usare descrizioni generiche come “immagine di” o “foto di”. Invece, concentrati sulla descrizione del contenuto e del contesto dell’immagine.
Ad esempio, invece di scrivere “immagine di una persona”, scrivi “ritratto di una donna sorridente”. Invece di scrivere “foto di una macchina”, scrivi “macchina sportiva rossa che viaggia lungo una tortuosa strada di montagna”.
4) Non usare descrizioni ripetitive
Evita di usare descrizioni ripetitive che sono già visibili sulla pagina. Se un’immagine è accompagnata da una didascalia o da un testo descrittivo accanto ad essa, non c’è bisogno di ripetere quelle informazioni nel testo alternativo.
Ad esempio, se hai un’immagine etichettata come “membri del team”, non descrivere ogni persona nel dettaglio nel testo alternativo. Se hai un video incorporato con didascalie che descrivono il suo contenuto, non replicare quelle informazioni nel testo alternativo.
5) Testa il tuo testo alternativo
Dopo aver aggiunto il testo alternativo alle tue immagini, testalo utilizzando uno screen reader per assicurarti che stia trasmettendo le informazioni corrette. La maggior parte dei sistemi operativi è dotata di screen reader che puoi utilizzare per testare l’accessibilità del tuo sito web.
(Istruzioni per utilizzare lo screen reader su Chrome).
