In tempi di digitalizzazione, la questione dell'accessibilità non deve essere trascurata. Un modo per facilitare l'accesso ai contenuti su Internet da parte delle persone con disabilità è quello di utilizzare i cosiddetti testi alternativi. Questi testi sono progettati in modo da riprodurre il contenuto di un sito web in una forma che le persone con determinate disabilità possono comprendere. Ma cos'è esattamente un testo alternativo? Chi ne ha bisogno? E come è possibile crearne uno?
Per rendere accessibili i siti e i contenuti web, i testi alternativi, tra le altre cose, sono molto importanti per facilitare l'accesso alle persone con disabilità. Essi trasmettono informazioni e funzioni a persone non vedenti e ipovedenti, nonché a persone con disabilità fisiche o cognitive. Aiutano anche a comprendere grafici, foto ed elementi operativi. Gli screen reader o i display Braille utilizzano le alternative di testo e rendono questi elementi accessibili alle persone con disabilità.
D'altra parte, sono utili anche per l'ottimizzazione dei motori di ricerca. Le alternative di testo trasferiscono le informazioni su un'immagine ai motori di ricerca. In questo modo migliorano la reperibilità.
Come si creano alternative di testo?
La risposta alla domanda su come creare un testo alternativo è abbastanza semplice: basta inserire un testo alternativo nell'area corrispondente di un elemento che deve essere dotato di tale testo. La maggior parte degli sviluppatori utilizza questo metodo in un cosiddetto CMS. L'abbreviazione CMS sta per Content Management System. Si tratta di un software utilizzato per creare e gestire i contenuti web.
A questo scopo si può utilizzare anche il linguaggio di programmazione HTML. È qui che entra in gioco l'attributo alt, noto anche come tag alt. Viene inserito all'interno del tag img. Il testo viene scritto nell'area interna dell'attributo alt, che viene poi emesso tramite le tecnologie assistive.
Tuttavia, questo da solo non è sufficiente. Anche l'attributo title non va dimenticato, perché ci sono screen reader che non leggono la descrizione dell'attributo alt, ma quella dell'attributo title. È quindi opportuno inserire un testo identico per entrambi i tag. Questo ha anche la funzione di visualizzare il contenuto come informazione aggiuntiva su un elemento quando si passa il mouse sull'area.
Esiste anche l'attributo aria. Più precisamente, l'attributo aria-label o l'attributo aria-labelledby. Si usano per etichettare i pulsanti o i campi dei moduli.
I diversi tipi di immagini
In un mondo sempre più digitalizzato, non è sufficiente creare alternative testuali. È molto più efficace descrivere correttamente i diversi tipi di immagini, che si differenziano anche per la loro funzione. Tuttavia, queste devono essere prima riconosciute. Le descrizioni sono inutili se non riflettono la funzione di un'immagine. Sorge quindi la domanda: quali sono i tipi di immagini? E qual è il modo migliore per descriverle?
In primo luogo, è necessario familiarizzare con le differenze tra i vari tipi di grafica. È importante capire il significato e lo scopo di una grafica. In generale, si distingue tra grafica informativa, funzionale e decorativa. Esistono anche i cosiddetti caratteri tipografici. In questo caso la descrizione è molto semplice, basta copiare il testo che viene mostrato nella grafica.
Immagini informative
Nel caso delle immagini informative, il contenuto visibile di un grafico è veicolato da testi alternativi. L'attenzione è rivolta alle informazioni rilevanti per il messaggio dell'immagine. Un esempio è la descrizione del logo. Questa descrive brevemente l'aspetto del logo e chi lo ha progettato.
Nell'esempio seguente, un'alternativa di testo è integrata in un logo in HTML:
<img
src="logo.jpg"
alt="Il logo di Eye-Able. Rappresenta un occhio".
title="Il logo Eye-Able. Rappresenta un occhio".
</img>
In questo caso, un file di immagine viene incorporato nell'HTML utilizzando l'elemento img, con l'attributo src che specifica la fonte dell'immagine. La descrizione dell'immagine viene inserita tra virgolette negli attributi alt e title. In questo modo, il contenuto del testo "Il logo Eye-Able. Rappresenta un occhio" viene visualizzato attraverso lo screen reader o il display Braille.
In questo modo, la barriera viene eliminata e tutte le persone che utilizzano tecnologie assistive possono comprendere quanto mostrato in questo grafico.
Diagrammi
Tuttavia, se si tratta di un diagramma, occorre sempre decidere caso per caso. Spesso dipende dal tipo e dalle informazioni contenute. Se il grafico contiene solo una piccola quantità di informazioni, queste possono essere incluse nel testo alternativo. Ad esempio: "Mostra i risultati elettorali dei partiti in un grafico a barre. Partito A: 40%, Partito B: 30%, Partito C: 20% ecc. Tuttavia, se viene presentato qualcosa di più complesso o lungo, è consigliabile includere le informazioni dettagliate in un testo successivo. Il testo alternativo dovrebbe quindi indicare solo il tipo e lo scopo del diagramma. Inoltre, si potrebbe sottolineare che una descrizione più dettagliata segue di seguito. Un esempio potrebbe essere un grafico che mostra i dati sulla popolazione degli Stati federali. Il contenuto potrebbe essere: "Mostra le cifre della popolazione dei 16 Stati federali in un grafico a barre". Nota: la descrizione più dettagliata segue nel testo".
Immagini funzionali
Successivamente, si esaminano le immagini funzionali. Si tratta di elementi grafici collegati. Si dividono in collegamenti, elementi o pulsanti. Nelle alternative testuali, si definisce la funzione e non ciò che deve essere riconosciuto. Si specifica invece dove porta il link.
Ecco un esempio in HTML per un grafico collegato:
<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 sono utilizzati in HTML per creare un collegamento. In questo caso, viene creato il link alla pagina https://services.eye-able.com/. Nell'elemento img, vediamo di nuovo il logo di Eye-Able, ma questa volta gli attributi alt e title non descrivono la grafica, bensì la funzione. Il contenuto "Eye-Able homepage" viene ora emesso tramite le tecnologie assistive.
Lo stesso vale per i simboli. Ad esempio, se si utilizza un floppy disk, l'aspetto dell'icona non è rilevante per l'output con uno screen reader, poiché simboleggia la funzione di salvataggio. Le icone di ricerca sono un altro esempio. Che si tratti di una lente di ingrandimento o meno è irrilevante. È molto più interessante l'azione che c'è dietro. Simboleggia un'opzione di ricerca o l'inizio di una ricerca.
La situazione è simile per i pulsanti. Un pulsante che mostra una freccia che punta a destra non dovrebbe mai essere etichettato come "freccia che punta a destra" nel testo alternativo. Per una persona vedente è chiaro che la pagina successiva si apre quando si fa clic su di esso, ma non per le persone non vedenti. Questo perché sentono "freccia a destra" solo attraverso l'output vocale. Questo non è abbastanza chiaro o non indica che la pagina successiva si aprirà quando si fa clic sul pulsante. È quindi più sensato fornire questi testi alternativi con "alla pagina successiva" o "scorri alla pagina successiva".
Immagini decorative
Un altro tipo di grafica è costituito dalle immagini decorative. Vengono utilizzate per decorare un sito web. La procedura per la creazione di testi alternativi è molto semplice. Il contenuto del testo alternativo viene lasciato vuoto. È importante che l'attributo testo alternativo sia ancora presente. Solo il contenuto del testo viene lasciato vuoto. Di conseguenza, lo screen reader salta questo grafico irrilevante nell'output.
Come si scrivono buoni testi alternativi?
Ora che i vari grafici sono stati presentati, rimane solo una domanda: "Come si formulano i testi alternativi ottimali?". Una volta conosciute tutte le sottigliezze e le differenze tra le immagini, ci sono solo poche regole da seguire. I seguenti suggerimenti possono essere d'aiuto:
- Inizio di un'alternativa di testo:
Occorre prestare attenzione a non creare doppioni. L'incipit non deve quindi iniziare con: "L'immagine ...", "Il grafico ...", "La foto ..." o "Il link" .... Il fatto che si tratti di un grafico o di un link viene comunque riconosciuto e visualizzato dagli screen reader. È quindi opportuno ometterlo.
Lunghezza dei testi:
La lunghezza del testo alternativo non è specificata. Tuttavia, una o due frasi dovrebbero essere sufficienti per descrivere un grafico. La lunghezza ideale è di 80 caratteri. Perché 80? I non vedenti spesso leggono questi testi con l'aiuto di un display Braille. I display Braille possono riprodurre 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. Tuttavia, non dovrebbe superare i 120 caratteri.
Ortografia e punteggiatura:
Assicurarsi che l'ortografia sia corretta. Se una parola contiene un errore ortografico, può diventare rapidamente poco chiara, poiché uno screen reader riproduce esattamente ciò che è memorizzato nel testo alternativo. Anche una grammatica corretta svolge un ruolo importante nella comprensione delle immagini. Ma anche una corretta punteggiatura è importante. Una punteggiatura errata o mancante rende difficile la comprensione della grafica da parte dell'ascoltatore. Per questo motivo, prima di inserire il contenuto del testo è necessario effettuare un controllo ortografico e grammaticale.
Copyright:
Molte immagini hanno una nota di copyright. Ma questa informazione è importante per capire un'immagine? La risposta è: no! Queste informazioni non sono di alcun interesse per una buona formulazione di alternative testuali, poiché una descrizione dell'immagine contiene solo le informazioni più importanti. Queste informazioni dovrebbero quindi essere omesse.
Feedback:
È possibile determinare rapidamente se la descrizione dell'immagine ha successo. Ma come? È facile rispondere a questa domanda. Non è necessario un grande sforzo. Un breve feedback da parte di una persona non vedente o ipovedente fornisce informazioni sul fatto che il contenuto del testo sia stato formulato in modo sensato. Ma non tutti conoscono una persona con disabilità visiva. Anche questo problema può essere risolto in modo diverso. A chi non ha ancora visto l'immagine si possono porre delle domande. Questo può essere fatto ovviamente per iscritto, ma anche per telefono. Non appena si riceve una risposta "positiva", la descrizione ha avuto successo.
Cosa succede se mancano i testi alternativi?
La mancanza di testi alternativi per le immagini può essere particolarmente fastidiosa per gli utenti non vedenti. Ciò significa che non sarebbero in grado di riconoscere il contenuto dell'immagine. Allo stesso tempo, in questo caso lo screen reader visualizzerebbe solo il nome del file, ad esempio: "img123.jpg". Una descrizione di questo tipo non aiuterebbe nessuno. Gli sviluppatori dovrebbero quindi assicurarsi di utilizzare sempre contenuti testuali. Tuttavia, è anche importante conoscere le differenze per poter descrivere immagini e grafici in modo significativo. Le tecnologie assistive possono poi riprodurli con l'aiuto delle alternative testuali. Questo rende Internet più accessibile a tutti.
