Nell’era della digitalizzazione, il tema dell’accessibilità non deve essere trascurato. Una possibilità per facilitare l’accesso ai contenuti su Internet alle persone con disabilità è rappresentata dai cosiddetti testi alternativi. Questi testi sono concepiti in modo tale da riprodurre i contenuti di un sito web in una forma comprensibile per le persone con determinate disabilità. Ma: che cos’è esattamente un testo alternativo? Chi ne ha bisogno? E come si crea?
Per rendere i siti web e i contenuti web accessibili, i testi alternativi sono, tra le altre cose, molto importanti per facilitare l’accesso alle persone con disabilità. Essi forniscono informazioni e descrivono le funzionalità per le persone non vedenti e ipovedenti, nonché per quelle con disabilità fisiche o cognitive. Aiutano inoltre a comprendere grafici, foto ed elementi di interazione. Gli screen reader o le righe braille utilizzano i testi alternativi, rendendo così questi elementi accessibili alle persone con disabilità.
D'altra parte, sono utili anche per l'ottimizzazione per i motori di ricerca. I testi alternativi forniscono ai motori di ricerca le informazioni relative a un'immagine. In questo modo si migliora la reperibilità.
Come si creano le alternative testuali?
La risposta alla domanda su come creare un testo alternativo è molto semplice: basta inserire un testo alternativo nell’apposito campo di un elemento a cui si desidera assegnare tale testo. La maggior parte degli sviluppatori lo fa utilizzando un cosiddetto CMS. L’acronimo CMS sta per Content Management System. Si tratta di un software utilizzato per la creazione e la gestione dei contenuti web.
Anche il linguaggio di programmazione HTML può essere utilizzato a questo scopo. È qui che entra in gioco l’attributo alt, detto anche tag alt. Esso viene inserito all’interno del tag img. All’interno dell’attributo alt viene inserito il testo che verrà poi visualizzato tramite le tecnologie di assistenza.
Ma questo da solo non basta. Non bisogna dimenticare nemmeno l’attributo `title`, poiché esistono lettori di schermo che non leggono la descrizione dell’attributo `alt`, ma quella dell’attributo `title`. Pertanto, è opportuno inserire un testo identico in entrambi i tag. Inoltre, ciò serve anche a far apparire il contenuto come informazione aggiuntiva su un elemento quando si passa il mouse sopra l’area.
Inoltre, esiste anche l'attributo `aria`. Più precisamente, l'attributo `aria-label` o anche l'attributo `aria-labelledby`. Questi vengono utilizzati per aggiungere etichette a pulsanti o campi di un modulo.
I diversi tipi di immagini
In un mondo sempre più digitalizzato, non basta limitarsi a creare testi alternativi. È molto più efficace descrivere correttamente i diversi tipi di immagini, poiché anche la loro funzione varia. Ma prima di tutto è necessario riconoscerli. Le descrizioni sono inutili se non riescono a rendere la funzione di un’immagine. Si pone quindi la domanda: quali tipi di immagini esistono? E qual è il modo migliore per descriverle?
Innanzitutto è opportuno familiarizzarsi con le differenze tra i vari tipi di grafica. A tal proposito, è importante comprendere il significato e lo scopo di un elemento grafico. In generale, si distingue tra grafica informativa, funzionale e decorativa. Esistono inoltre i cosiddetti caratteri tipografici. In questo caso la descrizione è molto semplice: basta riportare il testo che appare nell’elemento grafico.
Immagini informative
Nel caso delle immagini informative, il contenuto visibile di un'immagine viene descritto tramite testi alternativi. In questo contesto si presta attenzione alle informazioni rilevanti per il significato dell'immagine. Un esempio è la descrizione di un logo, in cui viene brevemente descritto l'aspetto del logo e chi ne è l'autore.
Nell'esempio seguente viene integrata in HTML un'alternativa testuale in un logo:
<img
src="logo.jpg"
alt="Il logo Eye-Able. Raffigura un occhio."
title="Il logo Eye-Able. Raffigura un occhio.">
</img>
In questo caso, un file immagine viene incorporato nel codice HTML tramite l'elemento img, dove l'attributo src indica la fonte dell'immagine. La descrizione dell'immagine viene inserita tra virgolette negli attributi alt e title. In questo modo, il contenuto testuale «Il logo Eye-Able. Raffigura un occhio» viene riprodotto tramite lo screen reader o la riga Braille.
In questo modo si elimina la barriera e tutte le persone che utilizzano tecnologie assistive possono comprendere ciò che è raffigurato in questo grafico.
Grafici
Se invece si tratta di un grafico, la decisione va sempre presa caso per caso. Ciò dipende spesso dal tipo di grafico e dalle informazioni in esso contenute. Se il grafico contiene solo poche informazioni, queste possono essere inserite nel testo alternativo. Ad esempio: «Rappresenta i risultati elettorali dei partiti in un grafico a barre. Partito A: 40%, Partito B: 30%, Partito C: 20% ecc.». Se invece viene rappresentato qualcosa di più complesso o esteso, si consiglia di inserire le informazioni dettagliate in un testo successivo. Nel testo alternativo dovrebbero quindi essere indicati solo il tipo e lo scopo del grafico. Inoltre, si potrebbe specificare che la descrizione più dettagliata segue più avanti. Un esempio potrebbe essere un grafico che illustra il numero di abitanti dei Länder. Il contenuto sarebbe quindi: «Rappresenta il numero di abitanti dei 16 Länder in un grafico a barre. Nota: la descrizione più dettagliata segue nel testo».
Immagini funzionali
Passiamo ora alle immagini funzionali. Si tratta di immagini che contengono link. Si distinguono in link, elementi o pulsanti. Nelle descrizioni alternative si definisce la funzione dell’immagine e non ciò che è raffigurato. Si indica invecedoveporta il link.
Ecco un esempio in HTML di un'immagine con link:
<a href=“https://services.eye-able.com/“>
<img src=“logo.jpg“
alt="Home page di Eye-Able"
title="Home page di Eye-Able"
</img>
</a>
Il tag a e l'attributo href vengono utilizzati in HTML per creare un link. In questo caso, il link rimanda alla pagina https://services.eye-able.com/. Nell’elemento img vediamo nuovamente il logo di Eye-Able, ma questa volta gli attributi alt e title non descrivono l’immagine, bensì la sua funzione. In questo modo, il contenuto «Pagina iniziale di Eye-Able» viene ora riprodotto tramite le tecnologie assistive.
Lo stesso vale per le icone. Ad esempio, quando si utilizza un dischetto, l’aspetto dell’icona non è rilevante per la lettura da parte di uno screen reader, poiché essa simboleggia la funzione di salvataggio. Un altro esempio sono le icone di ricerca. Che si tratti di una lente d’ingrandimento non ha alcuna importanza. È infatti molto più interessante l’azione che si cela dietro di essa: essa rappresenta un’opzione di ricerca o l’avvio di una ricerca.
Lo stesso vale per i pulsanti. Un pulsante che raffigura una freccia verso destra non dovrebbe mai avere come testo alternativo “freccia verso destra”. Per una persona vedente è chiaro che cliccandoci sopra si aprirà la pagina successiva, ma non lo è per le persone non vedenti. Infatti, tramite il lettore vocale, queste ultime sentono solo “freccia verso destra”. Questa formulazione non è sufficientemente chiara e non permette di capire che, premendo il pulsante, si aprirà la pagina successiva. Pertanto, è più opportuno utilizzare come testo alternativo espressioni quali «alla pagina successiva» o «vai alla pagina successiva».
Quadri decorativi
Un altro tipo di immagini sono quelle decorative. Queste vengono utilizzate per abbellire un sito web. La procedura per la creazione dei testi alternativi in questo caso è molto semplice: il contenuto del testo alternativo viene lasciato vuoto. È importante che l’attributo del testo alternativo sia comunque presente; solo il contenuto testuale rimane vuoto. Di conseguenza, lo screen reader salta questa immagine irrilevante durante la lettura.
Come si scrivono dei buoni testi alternativi?
Ora che sono stati presentati i vari tipi di immagini, rimane solo una domanda: «Come si formulano testi alternativi ottimali?» Una volta comprese tutte queste sfumature e differenze tra le immagini, le regole da seguire sono poche. I seguenti suggerimenti possono essere d’aiuto:
- Inizio dell'alternativa testuale:
In questo caso è importante assicurarsi che non vi siano ripetizioni. L’inizio non dovrebbe quindi iniziare con: «L’immagine…», «Il grafico…», «La foto…» o «Il link…». Che si tratti di un grafico o di un link, gli screen reader lo riconoscono e lo segnalano comunque. Pertanto, è opportuno evitare tali espressioni.
Lunghezza dei testi:
Non esiste una lunghezza prestabilita per il testo alternativo. Tuttavia, per la descrizione di un’immagine dovrebbero essere sufficienti una o due frasi. L’ideale sono 80 caratteri. Perché 80? Le persone non vedenti leggono spesso questi testi con l’ausilio di un display Braille. I display Braille possono visualizzare da 40 a 80 caratteri alla volta. Per motivi di chiarezza, è quindi consigliabile attenersi a questo limite. Naturalmente, un testo può anche essere più lungo, ma non dovrebbe superare i 120 caratteri.
Ortografia e punteggiatura:
È necessario prestare attenzione alla corretta ortografia. Se una parola contiene un errore ortografico, possono sorgere rapidamente delle ambiguità, poiché uno screen reader riproduce esattamente ciò che è riportato nel testo alternativo. Anche la corretta grammatica svolge un ruolo importante per la comprensione delle immagini. Ma anche la corretta punteggiatura è rilevante in questo contesto. Infatti, i segni di punteggiatura errati o mancanti rendono più difficile per chi ascolta comprendere l’immagine. Per questo motivo, prima di inserire i contenuti testuali è opportuno effettuare un controllo ortografico e grammaticale.
Diritti d'autore:
Molte immagini riportano un’indicazione del copyright. Ma questa informazione è importante per la comprensione di un’immagine? La risposta è: no! Ai fini di una buona formulazione delle alternative testuali, questa informazione non è rilevante, poiché nella descrizione di un’immagine vengono riportati solo gli elementi essenziali. Pertanto, tale informazione dovrebbe essere omessa.
Commenti:
È facile capire se la descrizione dell’immagine è efficace. Ma come? La risposta a questa domanda è semplice. Non occorre un grande sforzo. Un breve feedback da parte di una persona non vedente o ipovedente permette di capire se il contenuto del testo è stato formulato in modo sensato. Ma non tutti conoscono una persona con una disabilità visiva. Esiste anche un’altra soluzione. Chiunque non abbia ancora visto l’immagine può essere interpellato. Ciò può avvenire naturalmente per iscritto, ma anche per telefono. Non appena si riceve un riscontro «positivo», la descrizione è riuscita.
Cosa succede, in realtà, quando mancano i testi alternativi?
La mancanza di testi alternativi alle immagini può risultare particolarmente fastidiosa per gli utenti non vedenti. Ciò impedirebbe infatti loro di comprendere il contenuto dell’immagine. Allo stesso tempo, in un caso del genere lo screen reader leggerebbe solo il nome del file, ad esempio: «img123.jpg». Una descrizione del genere non sarebbe di alcuna utilità. Gli sviluppatori dovrebbero quindi prestare sempre attenzione a utilizzare contenuti testuali. È tuttavia importante anche conoscere le differenze per poter descrivere in modo adeguato immagini e grafici. Le tecnologie assistive possono poi riprodurli con l’aiuto dei testi alternativi. In questo modo anche Internet diventa un po’ più accessibile a tutti.
