Un’immagine dice mille parole, ma non veramente

Zoey ama navigare in Internet. Gli piace perdersi nella rete interconnessa piena di informazioni, svelando pezzi di conoscenza che sono degni di un segnalibro. Ma non gli piace scremare grandi quantità di testo. Preferiscono le immagini. Molte. Guardano le foto delle loro cotte su Facebook prima ancora di considerare la lettura della loro biografia. Il loro desiderio di memi e visualizzazioni non ha eguali su questo pianeta e le loro storie di Instagram lo riflettono. Sono solo, sai, pesantemente connessi alla loro natura di visual-learner. E non c’è niente di male in questo.

Ma nel mondo non c’è solo Zoey. C’è Trung-Anh, c’è Sewon, c’è Nayon, c’è Venkatesh, c’è Zeqiu, c’è Dinko, c’è Sade, c’è Ivan e c’è Mohammed. Secondo l’OMS, almeno il 29% circa (2,2 miliardi) della popolazione mondiale (7,7 miliardi) ha qualche forma di disabilità visiva, il che significa almeno 3 persone nella lista di cui sopra. Hmm, quindi, umm … ora che sappiamo che il 29% della popolazione potrebbe non essere in grado di vedere il contenuto visivo, cosa facciamo? Ci atteniamo ancora all’interpretazione letterale della citazione di Fred Barnard “Un’immagine vale più di mille parole”? Oserei dire di no. Non sempre.

Una domanda spesso curiosa da fare è – come fanno le persone con problemi di vista ad usare un computer? In primo luogo, penso che sia importante capire che avere un problema di vista non è sinonimo di essere ciechi. Quindi, se vedete qualcuno che usa un bastone bianco, sarebbe sbagliato presumere che sia completamente cieco. Quando si tratta di usare un computer, a seconda del loro livello di vista, potrebbero usare lettori di schermo per leggere il contenuto sullo schermo. Alcuni lettori di schermo popolari includono JAWS, NVDA (gratuito e open-source), e VoiceOver (integrato nei dispositivi Apple).

Lo stato del mondo

Grande! Quindi, abbiamo un modo per gli utenti di screen reader di interagire con i loro computer o dispositivi mobili. Ma come può un lettore di schermo leggere le foto delle sue cotte? O i meme? O i grafici/visualizzazioni? Una possibile risposta qui è che dovremmo fare progressi medici per curare la loro vista o qualsiasi cosa che vada nella direzione di avere un assistente personale/amico/familiare che possa spiegare loro cosa c’è sullo schermo. Un’altra possibile risposta riguarda la costruzione di un mondo in cui sia possibile per loro farlo da soli. Se la vostra risposta è stata più vicina alla prima, allora avete chiaramente bisogno di educare e familiarizzare con i concetti del modello sociale della disabilità.

Immagini

Facciamo attenzione alle immagini. Affinché lo screen reader sia in grado di leggere un’immagine, deve sapere di cosa si tratta e presentarla all’utente in modo significativo. Per esempio, consideriamo un’immagine di una famiglia che gioca con i suoi Huskies gemelli (Forza Huskies!). Come utente che non legge lo schermo, è facile capire cosa sta succedendo nell’immagine – non solo cosa sta succedendo in primo piano ma anche lo sfondo. Per esempio, Jialin, uno dei membri della famiglia indossa una maglietta con la scritta “100% umano”. Il lettore di schermo può estrarre completamente la scena? Per fare questo, gli screen reader si affidano agli sviluppatori o agli autori di contenuti per fornire un testo alternativo per le immagini utilizzando l’attributo “alt”, che è stato introdotto al pubblico nel 1995 come parte dell’HTML 2.0 (se non avete familiarità con ciò che è un attributo alt o con il suo significato, questo articolo fornisce una grande panoramica dell’attributo alt). L’elemento HTML img appare quindi come:

<img src="image1.jpg" alt="This is an image of two Huskies" />

Quindi, lo screen reader ora leggerà “Image, This is an image of two Huskies”.

Lasciare l’attributo alt vuoto o fornire un testo senza senso come “Image 1”, come potete immaginare, non è molto utile. Anche con il testo alternativo “Questa è un’immagine di due Husky”, l’informazione trasmessa non si avvicina neanche lontanamente a quella che qualcuno che non usa uno screen reader sarebbe in grado di estrarre, come il testo sulla maglietta di Jialin. Inoltre, lo screen reader annuncia già il contenuto come “immagine” o “grafico”, il che rende “Questa è un’immagine” un testo ridondante. Tutto questo con il presupposto che l’immagine è postata da un utente che ha accesso al codice per inserire il testo alternativo.

Ma cosa dire di luoghi come le piattaforme di social media dove le immagini sono caricate da utenti che non hanno accesso al codice a tutti. Facebook, nel 2016, più di un decennio dopo il suo lancio, ha iniziato a impiegare l’intelligenza artificiale per aggiungere un testo alternativo generato automaticamente alle immagini, e ha permesso agli utenti di modificare questo testo, se necessario. Instagram ha seguito e implementato questa funzione l’anno scorso, 8 anni dopo il suo lancio. Le domande, tuttavia, rimangono le stesse – Quante informazioni dovrebbe fornire un testo alternativo? È sufficiente una descrizione di base di livello superiore? Nel decidere cosa presentare agli utenti di screen reader, stiamo assumendo e generalizzando ciò che gli utenti di screen reader stanno cercando nell’immagine? Se un’immagine vale più di mille parole, allora, metaforicamente, un testo alternativo non dovrebbe essere mille parole?

GIF e immagini animate

Leo ha un forte gioco di meme ed è un esperto nel trovare una GIF di gatto per ogni occasione. Dato che una GIF viene creata combinando diverse immagini in modo che il risultato finale dia l’impressione di un video molto breve, ci troviamo di fronte agli stessi problemi che abbiamo con le immagini? Peggio. Come sviluppatore, puoi certamente (e dovresti) aggiungere un testo alternativo simile a quello che facciamo per le immagini (la GIF è un file immagine, dopo tutto). Ma sulle piattaforme di social media, a seconda di come una GIF viene elaborata dalla piattaforma, viene resa utilizzando un elemento img senza attributo alt, oppure utilizzando un elemento video. Un elemento video non supporta affatto l’attributo alt.

Quindi, tutti quei widget GIF che abbiamo usato per postare meme animati su Facebook e Instagram, quelli che ci rendono cool e tutto il resto, sono inaccessibili per gli utenti di screen reader. Qui il nostro obiettivo non è quello di impedire a Leo di postare GIF (perché, miao) ma di garantire che tali contenuti siano goduti da tutti e non solo da un sottoinsieme della popolazione.

Grafici e visualizzazioni

Tutto questo e non siamo ancora arrivati alla “roba difficile”. Introduzione ai grafici e alle visualizzazioni interattive. Yisu e Xuhai sono fanatici delle visualizzazioni e, come ogni ricercatore, credono che i grafici e le visualizzazioni siano estremamente preziosi; raramente c’è un documento accademico senza almeno un grafico o una visualizzazione. Un grafico trasmette una conoscenza altamente visiva e di solito è incorporato in una pagina web utilizzando una delle tre tecniche principali:

1. come un’immagine per il contenuto statico.
2. come un elemento HTML canvas o grafici SVG (aggiornamento da un’immagine su vari aspetti) per il contenuto statico.
3. e/o come visualizzazione interattiva usando librerie JavaScript (che di solito impiegano HTML canvas o SVG come meccanismo sottostante) per servire contenuto dinamico e permettere agli utenti di interagire con il grafico.

Quando viene usato come immagine, si applicano le stesse considerazioni che abbiamo discusso sopra con la complessità aggiunta di presentare informazioni scientifiche. Cosa dovrebbe dire il testo alternativo? Dovrebbe dare una panoramica del grafico? Dovrebbe includere statistiche come media, media, mediana, modalità, ecc. E se sì, quali? Quante informazioni sono troppo poche e quante sono troppe? Queste sono domande difficili.

Lo stesso canvasdi un HTML è esposto come una bitmap, e senza l’implementazione di un adeguato contenuto di fallback pone diverse sfide di accessibilità. Tuttavia, ci sono diverse tecniche per renderli accessibili e sono solo una ricerca su Google. Ma naturalmente, gli sviluppatori sono responsabili di conoscere queste tecniche e implementarle nel loro lavoro – qualcosa che ho visto migliorare nel tempo ma su cui non tratterrei il fiato. Al contrario, SVG è incoraggiato per i grafici accessibili poiché, secondo le specifiche W3C, gli elementi figli sono disponibili per l’API di accessibilità. Tuttavia, il supporto del browser è ancora in lavorazione e un grafico SVG completamente accessibile richiede uno sforzo e almeno una certa conoscenza fondamentale di SVG, che ancora una volta, è una responsabilità che ricade sulle spalle degli sviluppatori.

Per affrontare alcune di queste preoccupazioni, ho creato evoGraphs – un plugin jQuery per creare grafici accessibili, che ha vinto il premio del delegato per la sfida dell’accessibilità alla conferenza W4A nel 2015. Certamente, non affronta tutte le questioni evidenziate riguardo alla complessità della presentazione delle informazioni scientifiche. Quindi, i grafici accessibili sono un’area attiva di esplorazione per me e altri ricercatori.

Come visualizzazione interattiva (come ChartJS, Google Charts, e D3), la rappresentazione di informazioni aggiornate dinamicamente è difficile. La maggior parte degli utenti di screen reader non utilizza un dispositivo di puntamento (come il mouse, il trackpad, ecc.) e la maggior parte delle interazioni sono limitate esclusivamente a o sono più praticamente utilizzabili quando viene attivato un hover su alcuni elementi. Senza tali interazioni, lo scopo delle visualizzazioni interattive per un utente screen reader diventa nebuloso e probabilmente, senza un’adeguata considerazione, la comprensione del contenuto può diventare più perplessa.

Inoltre, molte librerie grafiche moderne permettono la modifica dinamica del contenuto. La trasmissione delle informazioni agli screen reader, quando il contenuto viene modificato, può essere gestita utilizzando correttamente gli attributi ARIA, che è diventato una raccomandazione del W3C nel 2014 ed è onestamente una manna dal cielo. Ma, come con SVGs, il supporto stabile del browser per tutte le caratteristiche di ARIA è ancora un lavoro in corso, specialmente quando viene utilizzato all’interno di SVGs. Un’adeguata formazione degli sviluppatori è ancora necessaria per utilizzare appieno ciò che ARIA ha da offrire.

Il percorso futuro

Da quando Tim Berners-Lee ha creato il World Wide Web, ad oggi, la tecnologia è aumentata drasticamente. Sfortunatamente, lo stesso non si può dire dell’accessibilità di tali tecnologie. Nel momento in cui una particolare tecnologia viene resa accessibile alle persone con disabilità, il mondo è già passato a tecnologie più avanzate. Quindi, il gioco del recupero non finisce mai. E non finirà – a meno che l’accessibilità non diventi la considerazione fondamentale nello sviluppo delle nuove tecnologie.

Ma non tutte le speranze sono perse. Abbiamo fatto e continuiamo a fare grandi passi avanti nel campo dell’accessibilità del web, sia nella ricerca accademica che nei prodotti industriali. Agli studenti e ai nuovi sviluppatori vengono insegnati i concetti di accessibilità e le tecniche per rendere il web più accessibile. Andando avanti, prevedo di fare un passo indietro e di pensare ad adattare il software ai bisogni degli utenti invece di aspettarsi che siano gli utenti ad adattarsi al software. Per esempio, continuiamo a dare per scontato quali informazioni un utente di screen reader vorrebbe estrarre da un’immagine o costruiamo strumenti che imparano di più sull’utente e presentano le informazioni che l’utente preferisce apprendere? Per me, il futuro ci porta lontano dalla generalizzazione e più vicino alla personalizzazione – un World Wide Web che è veramente centrato sull’utente.

1. “Vision Impairment and Blindness.” Organizzazione mondiale della sanità, Organizzazione mondiale della sanità, https://www.who.int/news-room/fact-sheets/detail/blindness-and-visual-impairment. Accessed 20 Oct. 2019.
2. “A Picture’s Worth: D. H. Hepting, Ph.D.” A Picture’s Worth | D. H. Hepting, Ph.D., http://www2.cs.uregina.ca/~hepting/projects/pictures-worth.
3. Materiali HTML 2.0, https://www.w3.org/MarkUp/html-spec.
4. Sharif, Ather, e Babak Forouraghi. “evoGraphs-Un plugin jQuery per creare grafici accessibili al web”. 2018 15th IEEE Annual Consumer Communications & Networking Conference (CCNC). IEEE, 2018.
5. “WAI-ARIA Overview.” Web Accessibility Initiative (WAI), https://www.w3.org/WAI/standards-guidelines/aria.