Come è possibile una lettura accessibile delle immagini!

Nell'era della digitalizzazione, il tema dell'accessibilità non va trascurato. Un modo per facilitare l'accesso ai contenuti online alle persone con disabilità è rappresentato dai cosiddetti testi alternativi. Questi testi sono progettati per fornire alle persone con determinate disabilità il contenuto di un sito web in una forma a loro comprensibile. Ma cosa sono esattamente i testi alternativi? Chi ne ha bisogno? E come si possono creare?

Per rendere accessibili siti web e contenuti online, i testi alternativi rivestono un ruolo fondamentale, tra le altre cose, nel 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 inoltre a comprendere grafica, immagini e comandi. I lettori di schermo o i display Braille utilizzano i testi alternativi, rendendo questi elementi accessibili alle persone con disabilità.

D'altro canto, sono utili anche per l'ottimizzazione per i motori di ricerca. Le alternative testuali trasferiscono informazioni sull'immagine ai motori di ricerca, migliorandone la reperibilità.

Come creare alternative di testo?

La risposta alla domanda su come creare un testo alternativo è piuttosto semplice: basta inserire il testo alternativo nell'apposita area dell'elemento a cui si desidera fornire tale testo. La maggior parte degli sviluppatori utilizza questa funzionalità all'interno di un cosiddetto CMS. L'acronimo CMS sta per Content Management System (Sistema di Gestione dei Contenuti). Si tratta di un software utilizzato per la creazione e la gestione di contenuti web.

Anche il linguaggio di programmazione HTML può essere utilizzato a questo scopo. È qui che entra in gioco l'attributo alt, o tag alt. In questo caso, viene inserito all'interno del tag img. Il testo viene scritto nell'area interna dell'attributo alt, che viene poi visualizzata tramite le tecnologie di supporto.

Tuttavia, questo da solo non basta. Non bisogna dimenticare nemmeno l'attributo title, poiché esistono screen reader che non leggono la descrizione dell'attributo alt, ma quella dell'attributo title. Pertanto, è opportuno specificare un testo identico per entrambi i tag. Inoltre, questo ha anche la funzione di visualizzare il contenuto come informazione aggiuntiva su un elemento quando il mouse si posiziona sull'area.

Inoltre, esiste l'attributo aria. Più precisamente, l'attributo aria-label o anche l'attributo aria-labelledby. Questi vengono utilizzati per etichettare pulsanti o campi dei moduli.

I diversi tipi di immagini

In un mondo sempre più digitalizzato, non basta più creare alternative testuali. È molto più efficace descrivere correttamente i diversi tipi di immagini, poiché differiscono anche nella loro funzione. Tuttavia, è necessario prima riconoscerle. Le descrizioni sono inutili se non riescono a riflettere la funzione di un'immagine. Quindi sorge spontanea la domanda: quali tipi di immagini esistono? E qual è il modo migliore per descriverli?

Innanzitutto, è necessario familiarizzare con le differenze tra i vari tipi di grafica. È importante comprendere lo scopo di un elemento grafico. In generale, si distingue tra grafica informativa, funzionale e decorativa. Inoltre, esistono i cosiddetti caratteri tipografici. In questo caso la descrizione è molto semplice: si tratta semplicemente di sostituire il testo che deve essere visualizzato nel diagramma.

Immagini informative

Nel caso di immagini informative, il contenuto visibile di un elemento grafico viene veicolato da testi alternativi. L'attenzione si concentra sulle informazioni pertinenti al 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 creatore.

Nell'esempio seguente, un testo alternativo viene integrato in un logo in HTML:

<img

src="logo.jpg"

alt="Il logo Eye-Able. Rappresenta un occhio."

titolo="Il logo Eye-Able. Rappresenta un occhio.">

</img>

In questo caso, un file immagine viene incorporato nell'HTML utilizzando l'elemento img, dove l'attributo src specifica la sorgente dell'immagine. La descrizione dell'immagine viene inserita tra virgolette negli attributi alt e title. In questo modo, il testo "Il logo di Eye-Able. Rappresenta un occhio" viene visualizzato correttamente dal lettore di schermo o dal display Braille.

In questo modo, la barriera viene rimossa e tutte le persone che utilizzano tecnologie assistive possono comprendere ciò che viene mostrato in questo grafico.

Diagrammi

Tuttavia, se si tratta di un diagramma, la decisione va sempre valutata caso per caso. Spesso dipende dal tipo di diagramma e dalle informazioni che contiene. Se il grafico contiene 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%, e così via". Se invece il diagramma è più complesso o esteso, si consiglia di includere le informazioni dettagliate in un testo successivo. Il testo alternativo dovrebbe quindi limitarsi a indicare il tipo e lo scopo del diagramma. Inoltre, si potrebbe specificare che la descrizione più dettagliata segue di seguito. Un esempio potrebbe essere un grafico che mostra i dati demografici dei Länder tedeschi. Il contenuto potrebbe quindi essere: "Rappresenta i dati demografici dei 16 Länder in un grafico a barre. Nota: la descrizione più dettagliata segue nel testo".

Immagini funzionali

Consideriamo ora le immagini funzionali. Si tratta di elementi grafici collegati. Sono suddivisi in collegamenti, elementi o pulsanti. Nelle alternative di testo si definisce la funzione e non cosa riconoscere. Invece, si specifica Dove il link conduce a

Ecco un esempio in HTML di un'immagine collegata:

<a href=“ https://eye-able.com/“ >

<img src="logo.jpg"

alt="Pagina iniziale di Eye-Able"

titolo="Pagina iniziale di Eye-Able"

</img>

</a>

Il tag a 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 nuovamente il logo di Eye-Able, ma questa volta gli attributi alt e title descrivono la funzione anziché l'immagine. Pertanto, il contenuto "Pagina iniziale di Eye-Able" viene ora visualizzato anche tramite tecnologie assistive.

Lo stesso vale per i simboli. Ad esempio, se si utilizza un floppy disk, l'aspetto dell'icona non è rilevante per la visualizzazione con un lettore di schermo perché simboleggia la funzione di salvataggio. Un altro esempio sono le icone di ricerca. Che si tratti di una lente d'ingrandimento o meno è irrilevante. Molto più interessante è l'azione che rappresenta. Questa icona indica un'opzione di ricerca o l'avvio di una ricerca.

La situazione è simile per i pulsanti. Un pulsante che rappresenta una freccia che punta a destra non dovrebbe mai avere "freccia che punta a destra" nel testo alternativo. Per una persona vedente, è chiaro che cliccandoci sopra si apre la pagina successiva, ma non per una persona non vedente. Questo perché sente solo "freccia a destra" tramite l'output vocale. Tale indicazione non è sufficientemente chiara o non mostra che premendo il pulsante si apre la pagina successiva. Pertanto, è più sensato fornire questi testi alternativi come "vai alla pagina successiva" o "continua a scorrere".

quadri decorativi

Un altro tipo di grafica è rappresentato dalle immagini decorative. Queste vengono utilizzate per abbellire una pagina web. La procedura per creare testi alternativi è molto semplice. In questo caso, il contenuto del testo alternativo viene lasciato vuoto. È importante che l'attributo del testo alternativo sia comunque presente. Solo il contenuto testuale viene lasciato vuoto. Ciò fa sì che lo screen reader ignori questa grafica irrilevante nell'output.

Come scrivere buoni testi alternativi?

Ora che abbiamo presentato le diverse grafiche, rimane solo una domanda: "Come si formulano testi alternativi ottimali?" Una volta comprese tutte queste sottigliezze e differenze tra le immagini, bastano poche regole da seguire. I seguenti suggerimenti possono essere d'aiuto:

1. Inizio di un testo alternativo:

   Bisogna qui assicurarsi che non si verifichino duplicazioni. L'inizio non dovrebbe quindi iniziare con: "L'immagine...", "Il grafico...", "La foto..." o "Il link".... Che si tratti di un'immagine o di un link viene comunque riconosciuto e visualizzato dai lettori di schermo. Pertanto, è meglio ometterlo.

2. Lunghezza dei testi:

   Non è specificato quanto debba essere lungo un testo alternativo. Tuttavia, una o due frasi dovrebbero essere sufficienti per la descrizione di un'immagine. La lunghezza ideale è di 80 caratteri. Perché 80? Le persone non vedenti spesso leggono questi testi con l'aiuto 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ò essere più lungo, ma non dovrebbe superare i 120 caratteri.

3. Ortografia e punteggiatura:

   È fondamentale prestare attenzione all'ortografia. Un errore di ortografia può facilmente generare ambiguità, poiché un lettore di schermo riproduce fedelmente il testo alternativo. Allo stesso modo, una grammatica corretta è essenziale per la comprensione delle immagini. Anche la punteggiatura è importante: una punteggiatura errata o mancante rende difficile la comprensione del testo da parte dell'ascoltatore. Per questo motivo, è consigliabile eseguire un controllo ortografico e grammaticale prima di inserire il testo.

4. Diritti d'autore:

   Molte immagini riportano un avviso di copyright. Ma questa informazione è davvero importante per comprendere un'immagine? La risposta è: no! Per una buona formulazione di testi alternativi, questa informazione è irrilevante, perché nella descrizione di un'immagine vengono riportate solo le informazioni più importanti. Pertanto, è preferibile ometterla.

5. Feedback:

   È facile stabilire se la descrizione di un'immagine è efficace. Ma come? La risposta è semplice e non richiede molto sforzo. Un breve feedback da parte di una persona non vedente o ipovedente fornisce informazioni utili per capire se il testo è stato formulato in modo sensato. Tuttavia, non tutti conoscono qualcuno con disabilità visiva. Questo problema può essere risolto in un altro modo. Chiunque non abbia ancora visto l'immagine può essere interpellato. Questo può essere fatto per iscritto, naturalmente, ma anche telefonicamente. Non appena si riceve un feedback positivo, la descrizione è da considerarsi efficace.

Cosa succede concretamente quando 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 visualizzare il contenuto dell'immagine. Allo stesso tempo, in un caso del genere, lo screen reader visualizzerebbe solo il nome del file, ad esempio: "img123.jpg". Una descrizione di questo tipo non sarebbe di alcun aiuto. Gli sviluppatori dovrebbero quindi sempre assicurarsi di utilizzare contenuti testuali. Tuttavia, è anche importante conoscere le differenze tra i vari tipi di testo per poter descrivere immagini e grafici in modo significativo. Le tecnologie assistive possono quindi visualizzarle utilizzando i testi alternativi, rendendo così Internet un po' più accessibile a tutti.