Come è possibile una lettura accessibile delle immagini!

La condivisione è incoraggiata:

Occhiali appoggiati su un libro

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 offrire i cosiddetti testi alternativi. Questi testi sono progettati in modo tale che le persone con determinate disabilità possano comprendere il contenuto di un sito web. Ma: che cos'è esattamente un testo alternativo? Chi ne ha bisogno? E come si fa a crearne uno?

Per sviluppare siti e contenuti web accessibili, i testi alternativi, tra le altre cose, sono molto importanti per facilitare l'accesso alle persone con disabilità. Questi trasmettono informazioni e funzioni a persone non vedenti e ipovedenti, nonché a persone con disabilità fisiche o cognitive. Inoltre, aiutano a comprendere la grafica, le foto e i comandi. I lettori di schermo o i display Braille utilizzano le alternative di testo, rendendo così 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. In realtà, è 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 non hanno senso se non riflettono lo scopo di un grafico. Sorge quindi la domanda: quali tipi di immagini esistono? E qual è il modo migliore per formularli?

Prima di tutto, è necessario familiarizzare con le differenze individuali tra i grafici. È importante capire il significato e lo scopo di un grafico. In generale, si distingue tra grafica informativa, funzionale o decorativa. Inoltre, ci sono i cosiddetti caratteri tipografici. Qui la descrizione è molto semplice, basta riprendere il testo che si vede nel grafico.

Immagini informative

Nel caso delle immagini informative, il contenuto visibile di un grafico viene trasmesso attraverso i testi alternativi. L'attenzione è rivolta alle informazioni rilevanti per la dichiarazione d'immagine. Un esempio è la descrizione di un logo. Descrive brevemente l'aspetto del logo e chi lo ha creato.

Nell'esempio seguente, un'alternativa di testo è integrata in un logo in HTML:

Il logo Eye-Able . Rappresenta un occhio.

<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 immagine viene incluso nell'HTML con l'elemento img e l'attributo src determina la fonte dell'immagine. La descrizione del grafico viene inserita tra virgolette negli attributi alt e title. Così, il contenuto del testo "Il logo Eye-Able . Rappresenta un occhio" viene emesso attraverso lo screen reader o il display Braille.

Questo rimuove la barriera e permette a tutti gli utenti di sperimentare le tecnologie assistive, come si può vedere in questo grafico.

Diagrammi

Tuttavia, se si tratta di un diagramma, questo deve essere sempre deciso individualmente. Spesso dipende dal tipo e dalle informazioni contenute. Se il grafico è composto solo da poche 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 complesso o più lungo, è consigliabile inserire le informazioni dettagliate in un testo successivo. In questo caso, nel testo alternativo vanno inseriti solo il tipo e lo scopo del diagramma. Inoltre, si potrebbe sottolineare che segue una descrizione più dettagliata. Un esempio potrebbe essere quello di mostrare le cifre della popolazione degli Stati federali. Il contenuto sarebbe il seguente: "Mostra le cifre della popolazione dei 16 Stati federali in un grafico a barre. Nota: la descrizione dettagliata è riportata nel testo seguente".

Immagini funzionali

Successivamente, esaminiamo le immagini funzionali. Si tratta di grafici collegati. Si dividono in link, elementi o pulsanti. Nelle alternative testuali si definisce la funzione e non ciò che si vede. Invece, si specifica dove il link conduce.

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 si può vedere nuovamente il logo di Eye-Able, ma questa volta gli attributi alt e title non descrivono la grafica, bensì la funzione. Così ora il contenuto "Home page di Eye-Able" viene emesso tramite le tecnologie assistive.

Lo stesso vale per i simboli. Ad esempio, se si utilizza un dischetto, l'aspetto dell'icona non è rilevante per l'output con uno screen reader 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. Ciò che è molto più interessante è l'azione che c'è dietro. Rappresentano un'opzione di ricerca o l'inizio di una ricerca.

La situazione è simile a quella dei pulsanti. Un pulsante che mostra una freccia che punta a destra non deve mai essere evidenziato nel testo alternativo con "freccia che punta a destra". Per una persona vedente è chiaro che la pagina successiva si apre quando si fa clic su di essa, ma non per le persone non vedenti. Questo perché sentono solo "freccia a destra" attraverso l'uscita vocale. Non è abbastanza chiaro e non è chiaro che la pagina successiva si apre quando si fa clic sul pulsante. Pertanto, ha più senso fornire questi testi alternativi con "vai alla pagina successiva" o "continua la pagina".

Immagini decorative

Un altro tipo di grafica è costituito dalle immagini decorative. Vengono utilizzati per decorare un sito web. La procedura per la creazione di testi alternativi è molto semplice. In questo caso, 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 durante l'output.

Come si scrive un buon testo alternativo?

Ora che le diverse grafiche sono state introdotte, rimane solo una domanda: "Come si formulano i testi alternativi ottimali?". Conoscendo tutte queste sottigliezze e le differenze tra le immagini, ci sono solo poche regole da seguire. A tal fine, si possono osservare i seguenti suggerimenti:

  1. Inizio di un'alternativa di testo:

    Occorre prestare attenzione per evitare duplicazioni. Quindi l'inizio non deve 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 ed emesso dallo screen reader. Pertanto, si dovrebbe rinunciare a questo aspetto.

  2. Lunghezza dei testi:

    La lunghezza del testo alternativo non è specificata. Ma una o due frasi dovrebbero essere sufficienti per descrivere un grafico. Idealmente, dovrebbe essere di 80 caratteri. Perché 80 caratteri? I non vedenti spesso leggono questi testi con l'aiuto di un display Braille. I display Braille possono emettere da 40 a 80 caratteri alla volta. Si consiglia pertanto di rispettare questo limite per motivi di chiarezza nei confronti dell'utente. Naturalmente, a volte un testo può essere più lungo. Tuttavia, non deve mai superare i 120 caratteri.

  3. Ortografia e punteggiatura:

    È necessario prestare attenzione alla correttezza ortografica. Se una parola contiene un errore ortografico, questo può generare rapidamente confusione, perché uno screen reader riproduce esattamente ciò che è memorizzato nel testo alternativo. Allo stesso modo, una grammatica corretta gioca un ruolo importante nella comprensione delle immagini. Ma anche la corretta punteggiatura è importante. La punteggiatura errata o mancante rende difficile la comprensione del grafico da parte dell'ascoltatore. Per questo motivo, è necessario effettuare un controllo ortografico e grammaticale prima di inserire il contenuto del testo.

  4. Diritti d'autore:

    Molti elementi grafici hanno una nota di copyright. Ma queste informazioni sono importanti per comprendere un'immagine? La risposta è: no! Per una buona formulazione delle alternative testuali, queste informazioni sono poco interessanti, perché nella descrizione di un'immagine vengono inserite solo le cose più importanti. Pertanto, queste informazioni dovrebbero essere omesse.

  5. Feedback:

    È facile scoprire se la descrizione dell'immagine è andata a buon fine. Come? Alla domanda si può rispondere in modo molto semplice. Non richiede un grande sforzo. Un rapido feedback da parte di una persona non vedente o ipovedente chiarirà se il contenuto del testo è stato scritto in modo sensato. Ma non tutti conoscono una persona con problemi agli occhi. Tuttavia, questo problema può essere risolto in un altro modo. Si può chiedere a tutte le persone che non hanno ancora avuto l'immagine davanti a sé. Questo può essere fatto per iscritto, naturalmente, ma anche per telefono. Non appena si riceve un feedback "positivo", la descrizione ha successo.

Cosa succede in realtà quando mancano i testi alternativi?

L'assenza di testo alternativo per le immagini può essere particolarmente fastidiosa per gli utenti non vedenti. Ciò significa che non sarebbero in grado di vedere il contenuto del grafico. Allo stesso tempo, lo screen reader visualizzerebbe solo il nome del file, ad esempio: "img123.jpg". Una descrizione del genere non aiuterebbe nessuno. Gli sviluppatori devono quindi sempre assicurarsi di utilizzare contenuti testuali. Tuttavia, è anche importante conoscere le differenze per poter descrivere le immagini e i grafici in modo significativo. Le tecnologie assistive possono quindi riprodurre il testo con l'aiuto delle alternative testuali. Questo rende anche Internet un po' più accessibile a tutti.

Semplice per tutti

Interesse suscitato? Saremo lieti di aiutarvi.

Con oltre 25 funzioni per l'accessibilità digitale, Eye-Able vi aiuta anche a ridurre le vostre barriere a lungo termine. In questo modo, rendete le vostre informazioni accessibili a tutti e non escludete nessun visitatore. In breve, raggiungete un nuovo gruppo target senza elevati volumi di marketing.

L'icona mostra la figura di accessibilità

Consultazione

Consultazione non vincolante sull'accessibilità digitale in generale

L'icona mostra la figura di accessibilità

Analisi

Discussione sul possibile potenziale di ottimizzazione del vostro sito web

L'icona mostra la figura di accessibilità

Demo dal vivo

Presentazione del software di assistenza direttamente sul vostro sito web

Altri contributi

Se può essere un po' di più:

cattedrale di colonia

Eye-Able Raggiunge il Reno

Eye-Able raggiunge nuovi lidi. Dalla città natale di Würzburg sul Meno, via verso il Reno! La città di Colonia sta facendo la sua parte e si sta impegnando per far sì che il suo