Creare progetti accessibili è importante. L’attenzione verso accessibilità e inclusività dovrebbe diventare una pratica abituale in tutti i processi di progettazione.
Dopo aver introdotto i concetti di accessibilità, chartability e design inclusivo nell’articolo Data storytelling accessibile e design inclusivo nella data viz, propongo alcuni consigli pratici per rendere il data storytelling inclusivo.
Sono primi consigli concreti e basilari che rendono più efficaci grafici e comunicazioni con i dati.
Introduzione
Come abbiamo già visto “L’accessibilità è la capacità del progetto o del sistema di soddisfare i requisiti dell’individuo. Non è possibile stabilire se qualcosa è accessibile se non si conoscono l’utente, il contesto e l’obiettivo.” ( 1 )
Contemporaneamente esistono buone pratiche che, se applicate nella giusta modalità, migliorano la leggibilità dei grafici e la fruibilità del data storytelling.
Oggi propongo alcuni consigli pratici per le visualizzazioni dati che sono fruite attraverso schermi digitali: social media, siti web, ma anche documenti inviati via email, letti senza essere stampati.
Quando progettiamo le comunicazioni con i dati è necessario partire dall’analisi di pubblico e contesto. Quando, però, condividiamo i contenuti sul web, spesso saranno letti da molte persone differenti. Più il pubblico è ampio, più sarà difficile tener conto in termini pratici delle differenti necessità di fruizione.
Responsività
Con responsività si identifica la capacità di una pagina web di rispondere e adattarsi a schermi con differenti forme e dimensioni. Quando cambia il dispositivo con cui navighiamo (pc-desktop, pc-laptop, tablet, smartphone), tutti gli elementi della pagina devono essere ben leggibili.
La reattività nel web design è fondamentale, sia per la maggiore varietà di formati di schermi utilizzati oggi, sia per l’accessibilità.
È importante che la visualizzazione dati sia reattiva non solo ai differenti schermi, ma anche ai diversi livelli di zoom. Le persone ipovedenti, per esempio, utilizzano impostazioni personalizzate come dimensione del testo e zoom del browser aumentati.
I grafici e tutti gli elementi che compongono il data storytelling devono adattarsi bene per evitare lo scorrimento orizzontale, il ritaglio o la sovrapposizione degli elementi.
Alt text o testo alternativo
Sul web è possibile aggiungere un testo alle immagini, chiamato testo alternativo, alt text o tag alt. L’alt text è una descrizione testuale aggiunta alle immagini per trasmetterne il significato visivo.
Il testo alternativo descrive le immagini per le persone che utilizzano i software screen reader per navigare. Le tecnologie assistive, come gli screen reader, leggono il testo alternativo ad alta voce, in modo che le persone possano ascoltare e comprendere il contenuto visivo.
Le persone che utilizzano gli screen reader hanno spesso problemi di vista che potrebbero limitare la visione di una parte o dell’intero grafico. Un buon testo alternativo aiuta un numero maggiore di persone a comprendere il contenuto del grafico.
La comunicazione visiva funziona anche attraverso processi di percezione preattentiva e processi button up che non possono essere sostituiti interamente dalla comunicazione testuale.
Sebbene non sia possibile scrivere testi che trasmettano l’intero significato dei grafici, possiamo, comunque, veicolare alcune informazioni essenziali contenute nelle visualizzazioni.
Secondo la guida alla visualizzazione dei dati della CFPB (Consumer Financial Protection Bureau), “un buon alt text deve contenere: una frase che illustri il grafico, compreso il tipo di grafico. Dovrebbe anche includere un link a un file .csv o a un altro formato di dati leggibile dai software, in modo che le persone possano sfogliare i dati in forma tabellare con lo screen reader.” ( 2 )
Nella pratica è bene aggiungere una descrizione dettagliata per trasmettere il significato delle informazioni che il grafico vuole evidenziare. È necessario mantenere l’alt text breve usando tecniche di sintesi e sottolineando le informazioni più importanti.
Il testo alternativo viene letto dai software in modo lineare. Le persone, inoltre, non possono tornare indietro se hanno perso qualche parola o il significato di una frase. Per questo è necessario cercare di scrivere in modo chiaro, semplice, diretto e rispettare un ordine lineare nella condivisione delle informazioni.
Etichettare direttamente i dati
Un modo per ridurre il carico cognitivo del pubblico è etichettare direttamente i dati, invece di utilizzare le legende.
Questa pratica è molto utile per le persone con disturbi visivi, sia daltoniche sia ipovedenti, che possono avere difficoltà a far corrispondere i colori del grafico a quelli della legenda.
In generale, questa scelta tende a ridurre il lavoro di scansione oculare (andare avanti e indietro con gli occhi) per cercare di far corrispondere la legenda con i dati. Per questo, è un’ottima scelta per aumentare la leggibilità dei grafici per chiunque.
In questo esempio base è chiaro come il grafico a destra risulti più veloce e immediato da comprendere.
Questa pratica non è sempre applicabile, ma dobbiamo considerare che le legende aumentano la quantità di informazioni da elaborare, e quindi il carico cognitivo. Dobbiamo progettare le legende lavorando il più possibile per ottimizzare il rapporto segnale/rumore.
Spazio bianco
Un elemento spesso sottovalutato è lo spazio bianco. Lo spazio, il bianco, deve essere interpretato come elemento attivo che svolge un ruolo fondamentale nei grafici e nelle comunicazioni con i dati. Se le informazioni sono troppo dense, collocate in modo ravvicinato, il grafico può risultare opprimente e confuso.
Possiamo usare lo spazio bianco almeno in due modalità rispetto ai grafici:
▶ all’interno: tra gli elementi che compongono l’anatomia del grafico,
▶ intorno: collocando testi e annotazioni per offrire respiro all’intera visualizzazione.
Può essere utile lasciare spazio tra alcune sezioni dei grafici, per esempio nei grafici a barre e colonne. L’uso strategico dello spazio bianco aumenta la leggibilità, contribuisce a definire e a distinguere le diverse categorie senza appoggiarsi esclusivamente al colore.
Questa pratica, insieme a scelte cromatiche accessibili, è utile alle persone per distinguere la differenza tra i colori che identificano categorie e variabili differenti.
Nella soluzione a destra del grafico sopra è più agevole distinguere le sottocategorie.
Se aveste difficoltà a distinguere i colori, gli spazi tra i rettangoli sarebbero un grande aiuto per identificare visivamente le diverse categorie.
Contrasto
È importante costruire grafici con un contrasto sufficiente tra gli elementi. Il contrasto è fondamentale per una visualizzazione dei dati accessibile.
Il contrasto deve essere presente e adeguato sia tra i singoli elementi che compongono il grafico sia rispetto allo sfondo.
Le linee guida WCAG 2.1 (Web Content Accessibility Guidelines) del W3C (World Wide Web Consortium) raccomandano un rapporto di contrasto di almeno 3:1 per gli elementi non testuali e per il testo di grandi dimensioni. Il testo più piccolo dovrebbe avere un rapporto di contrasto di almeno 4,5:1 rispetto allo sfondo. ( 3 )
Nelle visualizzazioni dati, spesso si possono usare bordi o spazi intorno agli elementi per ottenere una migliore separazione e un maggiore contrasto. Anche i motivi e gli stili di tratteggio possono essere utili per ottenere una maggiore separazione tra gli elementi.
È bene ricordare, tuttavia, che un uso improprio di queste tecniche può distrarre inutilmente e compromettere l’accessibilità. In genere è meglio preferire motivi sottili e leggeri.
Sono disponibili molti strumenti per verificare i requisiti di contrasto e per simulare vari tipi di disabilità visive. Uno degli strumenti che preferisco è contrast ratio.
Ecco un esempio della restituzione di questo strumento.
Le tre immagini sotto mostrano tre diversi colori su sfondo bianco e i differenti punteggi ottenuti nella scala di contrasto. Lo strumento aiuta a scegliere anche con l’uso del segnale semaforico in base ai punteggi richieste dalle linee guida WCAG.
Colore
Una regola base delle linee guida WCAG ( 4 ) sull’accessibilità sottolinea come sia necessario evitare di affidarsi solo al colore per trasmettere informazioni. Molte persone, infatti, potrebbero non essere in grado di distinguere i diversi colori utilizzati negli elementi del data storytelling.
Ci sono molte modalità efficaci per trasmettere informazioni aggiuntive senza affidarsi esclusivamente al colore: etichettare i dati e usare simboli, annotazioni e tooltip. Può essere utile, inoltre, aggiungere presentazioni alternative dei dati, come tabelle accessibili.
È consigliabile, comunque, utilizzare il colore in modo strategico e complementare a queste tecniche, per rendere le visualizzazioni più leggibili e accessibili.
È bene controllare che i colori scelti possano essere distinti da persone con varie forme di daltonismo.
La forma più comune di daltonismo è la deuteranomalia, dove esiste una sensibilità ridotta alla luce verde, rendendo più difficile distinguere le tonalità del rosso e del verde.
Esistono anche altre forme di daltonismo, come quelle che leggono con fatica le tonalità del giallo e del blu, fino ad arrivare al daltonismo totale.
Il daltonismo è molto più comune di quanto pensiamo: colpisce circa l’8% dei maschi in tutto il mondo, con percentuali ancora più elevate nelle popolazioni caucasiche. ( 5 )
Bisogna sottolineare, tuttavia, che anche alcune persone con visione parziale possono avere problemi a distinguere i colori, e che alcune potrebbero utilizzare strumenti ad alto contrasto o display che rendono impercettibili le sottili differenze di colore.
Esistono molti strumenti per determinare se una tavolozza di colori è utilizzabile da persone affette da daltonismo.
All’interno di Coolors è possibile verificare come una tavolozza di colori appare a tutte le varie forme di daltonismo.
Vediamo un esempio: nell’immagine che segue sono disponibili due tavolozze a confronto. La prima in alto mostra la palette creata per un’azienda che vuole usare rosso e verde in quanto colori presenti nel logo. La seconda tavolozza in basso mostra come la palette è visivamente percepita dalle persone con deuteranopia.
Un altro strumento interessante è WhoCanUse. Consente di visualizzare solo una coppia di colori alla volta, il colore di sfondo e il colore del carattere, ma nei risultati considera molte alterazioni della vista. Per esempio, come si vede nell’immagine sotto, mostra la visione con il glaucoma e con la cataratta. Altrettanto utile la presenza della categoria eventi situazionali, con l’anteprima del colore alla luce diretta sullo schermo e la modalità notturna.
Conclusioni
Non è possibile progettare comunicazioni testuali, numeriche e visive senza conoscere pubblico, contesto e obbiettivi.
Scorrendo le linee guida base applicate alla data visualization e al data storytelling, tuttavia, appare chiaro come siano buone pratiche di design che migliorano la leggibilità e la chiarezza per chiunque.
“Il grande effetto collaterale della progettazione per l’accessibilità è che l’usabilità tende a migliorare per tutta l’utenza. Tutta l’utenza trae vantaggio da una visualizzazione in cui l’intenzione e le informazioni sono chiare e l’interazione è facile da capire e da utilizzare.” ( 6 )
Note e fonti
( 2 ) https://cfpb.github.io/design-system/
( 3 ) https://www.w3.org/WAI/standards-guidelines/wcag/
( 4 ) https://www.w3.org/WAI/standards-guidelines/wcag/
( 5 ) https://iapb.it/daltonismo/#:~:text=Quant’%C3%A8%20comune%20il%20daltonismo,4%2D0%2C5%25
( 6 ) https://www.highcharts.com/blog/tutorials/10-guidelines-for-dataviz-accessibility/