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à è rappresentato dai cosiddetti testi alternativi. Questi testi sono progettati in modo tale da rendere i contenuti di un sito web in una forma che le persone con determinate disabilità possono comprendere. Ma: che 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 la grafica, le foto e i comandi. I lettori di schermo o i display Braille utilizzano le alternative di testo e rendono quindi questi elementi accessibili alle persone con disabilità.
D'altra parte, sono utili anche per l'ottimizzazione dei motori di ricerca. Le alternative testuali trasferiscono le informazioni su un'immagine ai motori di ricerca. Questo migliora la reperibilità.
Come creare alternative di testo?
La risposta alla domanda su come creare un testo alternativo è piuttosto semplice: per farlo, è sufficiente inserire un testo alternativo nell'area corrispondente di un elemento dotato di tale testo. La maggior parte degli sviluppatori lo utilizza 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 o chiamato anche alt-Tag . Viene inserito all'interno del tag img. Il testo viene scritto nell'area interna dell'attributo alt, che viene poi emesso tramite le tecnologie di assistenza.
Tuttavia, questo da solo non basta. Non bisogna dimenticare nemmeno l'attributo title, perché ci sono screen reader che non leggono la descrizione dell'attributo alt ma quella dell'attributo title. Pertanto, ha senso specificare un testo identico per entrambi i tag. Inoltre, ha anche la funzione di visualizzare il contenuto come informazione aggiuntiva su un elemento quando il mouse viene spostato sull'area.
Inoltre, c'è l'attributo aria. Più precisamente, l'attributo aria-label o anche l'attributo aria-labelledby. Vengono utilizzati per etichettare i pulsanti o i campi dei moduli.
I diversi tipi di immagini
In un mondo sempre più digitale, non basta creare alternative testuali. È molto più efficace descrivere correttamente i diversi tipi di immagini, che si differenziano anche per la loro funzione. Ma 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?
Prima di tutto, è necessario familiarizzare con le differenze tra i vari tipi di grafica. È importante capire lo scopo di una grafica. In generale, si distingue tra grafica informativa, funzionale e decorativa. Inoltre, ci sono i cosiddetti caratteri tipografici. In questo caso la descrizione è molto semplice, basta riprendere il testo che si vede 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 di un logo. In questo caso, viene fornita una breve descrizione dell'aspetto del logo e del suo autore.
Nell'esempio seguente, un'alternativa di testo è integrata in un logo in HTML:
<img
src="logo.jpg"
alt="Il logo 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 indica 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 capire ciò che viene visualizzato 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 poche informazioni, queste possono essere incluse nel testo alternativo. Ad esempio: "Presenta 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 indicare che la descrizione più dettagliata segue di seguito. Un esempio potrebbe essere un grafico che mostra le cifre della popolazione degli Stati federali. Il contenuto potrebbe essere: "Rappresenta i dati sulla popolazione dei 16 Stati federali in un grafico a barre". Nota: la descrizione più dettagliata segue nel testo".
Immagini funzionali
Successivamente, esaminiamo 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 si vede. Si specifica invece dove porta il link.
Ecco un esempio in HTML per un grafico collegato:
<a href=“https://eye-able.com/“>
<img src=“logo.jpg“
alt="Homepage di Eye-Able"
title="Homepage di Eye-Able"
</img>
</a>
L'attributo a-Tag e l'attributo href vengono utilizzati in HTML per creare un collegamento. In questo caso, il collegamento viene creato alla pagina https://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. In questo modo, il contenuto "Home page di Eye-Able" 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. Un altro esempio sono le icone di ricerca. Che si tratti di una lente di ingrandimento è irrilevante. Ciò che è molto più interessante è l'azione che vi sta dietro. Rappresentano un'opzione di ricerca o l'inizio di una ricerca.
Lo stesso vale per i pulsanti. Un pulsante che rappresenta una freccia che punta a destra non dovrebbe mai essere evidenziato con "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 fa capire che la pagina successiva si apre quando si preme il pulsante. Pertanto, è più sensato fornire questi testi alternativi con "vai alla pagina successiva" o "gira alla pagina successiva".
Immagini decorative
Un altro tipo di grafica è costituito dalle immagini decorative. Vengono utilizzate per decorare una pagina Web. La procedura per la creazione di testi alternativi è molto semplice. Il contenuto del testo alternativo viene lasciato vuoto. È importante che l'attributo dei testi alternativi sia ancora presente. Qui viene lasciato vuoto solo il contenuto del testo. In questo modo, lo screen reader salta questo elemento grafico irrilevante nell'output.
Come si scrivono buoni testi alternativi?
Ora che sono state introdotte le diverse grafiche, rimane solo una domanda: "Come si formulano i testi alternativi ottimali?". Una volta conosciute tutte le sottigliezze e le differenze delle immagini, ci sono solo poche regole da seguire. I seguenti suggerimenti possono essere d'aiuto:
- Inizio di un'alternativa di testo:
Occorre fare attenzione ad evitare duplicazioni. L'inizio non dovrebbe 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. Pertanto, si dovrebbe rinunciare a questo tipo di frase.
Lunghezza dei testi:
La lunghezza del testo alternativo non è specificata. Tuttavia, per la descrizione di un grafico dovrebbero essere sufficienti una o due frasi. Idealmente, 80 caratteri. Perché 80? I non vedenti spesso leggono questi testi con l'aiuto di un display Braille. I display Braille possono produrre 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:
È necessario prestare attenzione alla correttezza ortografica. Se una parola contiene un errore ortografico, può generare rapidamente un'ambiguità, poiché uno screen reader visualizza 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 del testo grafico da parte dell'ascoltatore. Per questo motivo, prima di inserire il contenuto del testo è necessario effettuare un controllo ortografico e grammaticale.
Diritti d'autore:
Molte immagini hanno una nota di copyright. Ma questa informazione è importante per capire un'immagine? La risposta è: no! Per una buona formulazione delle alternative testuali, queste informazioni non sono interessanti, perché nella descrizione di un'immagine vengono scritte solo le cose più importanti. Pertanto, queste informazioni dovrebbero essere omesse.
Feedback:
È facile stabilire se la descrizione dell'immagine è riuscita. Ma come? È facile rispondere a questa domanda. Non richiede grandi sforzi. Un breve feedback da parte di una persona cieca o ipovedente fornisce informazioni sul fatto che il contenuto del testo sia stato formulato in modo sensato. Ma non tutti conoscono una persona con problemi di vista. Questo problema può essere risolto in un altro modo. Si può chiedere a chiunque non abbia ancora visto l'immagine. Questo può essere fatto per iscritto, naturalmente, ma anche per telefono. Se il feedback è "positivo", la descrizione ha successo.
Cosa succede in realtà quando mancano i testi alternativi?
La mancanza di testi alternativi alle immagini può essere particolarmente fastidiosa per gli utenti non vedenti. Ciò significa che non sarebbero in grado di vedere 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 quindi renderli con l'aiuto delle alternative testuali. In questo modo Internet diventa un po' più accessibile per tutti.
