Accessibilità: introduzione sul tema e un nuovo punto di vista

Lo avevamo anticipato nel post relativo al CSS Day 2020 e finalmente ci siamo: l'accessibilità è un tema che stiamo implementando attivamente nel nostro metodo di lavoro. Nel frattempo abbiamo affrontato una sfida notevole su questo fronte: realizzare il nuovo sito web del Ministro per l'innovazione tecnologica e la trasformazione digitale.

Vogliamo dunque condividere l'esperienza che abbiamo avuto l'opportunità di acquisire con questo progetto, e con i successivi che stiamo realizzando, per aiutare a diffondere la cultura dell'accessibilità.

Accessibilità di un prodotto digitale vuol dire renderlo facile da usare anche da parte di coloro che a causa di una disabilità necessitano di tecnologie assistive o configurazioni particolari.

Questi potenziali utenti includono persone con limitazioni alla vista, con mobilità limitata o difficoltà motorie, difficoltà cognitive o disabilità nell’apprendimento, epilessia, o disturbi all’udito.

Attenzione: tutto ciò riguarda anche persone sanissime che sono in una particolare condizione temporanea. Ti sei rotto un piede a calcetto e devi spostarti con le stampelle, o con una sedia a rotelle? Un ascensore o una rampa ti aiutano ad arrivare dove vuoi. Lo stesso vale per un prodotto digitale.

I prodotti digitali accessibili presentano informazioni attraverso canali multisensoriali, che possono essere l’udito o diversi livelli di vista, e permettono, per esempio, la navigazione grazie a controlli della tastiera o alla navigazione vocale piuttosto che con la tipica interfaccia punta-e-clicca.

La prima risposta è di carattere etico. L'accessibilità è uno strumento di inclusione perché agisce dove le condizioni di partenza creano difficoltà ed esclusione. Si creano prodotti accessibili per creare un web migliore e più inclusivo.

Da questo punto di vista si capisce perché sia obbligatorio un livello di accessibilità alto nei prodotti digitali della pubblica amministrazione: è un diritto di tutti i cittadini non essere discriminati in base alle proprie capacità.

Una seconda risposta è incentrata sul concetto di qualità. Da sempre Cantiere Creativo lavora per allineare i prodotti che realizza ai migliori standard di qualità internazionali: best practices, linguaggi, metodologie, UX. L'accessibilità è solamente un punto nuovo di valutazione, un nuovo aspetto che si aggiunge sul solco degli altri.

Ultimo ma non ultimo per i suoi benefici indiretti: UX, SEO, touch-friendliness e mobile-friendliness sono punti fondamentali di un prodotto digitale che con un controllo sistematico di accessibilità vengono garantiti ancora maggiormente.

In tre semplici passi:

1. Adottando un punto di vista che ci permetta di prendere in considerazione queste esigenze.
2. Imparando e implementando gli standard tecnici, dalla progettazione alla realizzazione del prodotto (WCAG).
3. Svolgendo dei test sul prodotto con degli strumenti che ci aiutano a trovare eventuali problemi.

Si tratta quindi un obiettivo trasversale che si raggiunge insieme ai propri colleghi e membri del team di un prodotto: Designer, Developers, PO/QA, etc.

La buona notizia è che molti aspetti di accessibilità li stiamo già considerando, e già lavoriamo in un’ottica corretta: chiunque di noi lavori su una UI si pone il problema di rendere comprensibile quello che stiamo realizzando. C’è solo da fare un passo oltre.

La prima modalità di di test, quella più semplice da implementare, consiste nell'utilizzo di tool automatici integrati nel workflow di sviluppo con pa11y. In particolare con pa11y ci è sufficiente un solo comando per testare un intero prodotto web e ottenere i dettagli dei problemi riscontrati.

Il secondo modo, del tutto complementare al primo, consiste nell'utilizzare estensioni del browser finalizzate a questi controlli. Il vantaggio è avere un feedback visivo immediato sugli elementi da correggere. Questo controllo però si svolge manualmente pagina per pagina ed è quindi più mirato rispetto al precedente, ma meno efficace per prodotti composti da numerose viste/pagine.

Le estensioni più interessanti e potenti che abbiamo provato sono:

• Siteimprove
• WAVE
• ARC Toolkit
• axe™ DevTools

Infine abbiamo gli User test, la modalità più diretta e reale per controllare l'accessibilità di un prodotto. I metodi precedenti servono per verificare che il prodotto sia conforme alle Linee guida per l'accessibilità dei contenuti Web (WCAG) 2.1, ovvero gli standard internazionali che definiscono obiettivi e modalità di raggiungimento dei vari livelli di accessibilità.

Se dunque i metodi precedenti verificano una "teoria", per quanto estremamente pratica e pragmatica, gli User test sono il livello più pratico e ricco di feedback possibile, richiedendo delle persone vere e proprie, per assicurarsi che il prodotto sia davvero accessibile.

Come detto in precedenza, adottare il punto di vista è la base di partenza per realizzare l'accessibilità. Mettiamoci dunque nei panni di chi ha dei problemi di vista, perché ovviamente la vista è il senso con cui normalmente utilizziamo i prodotti digitali, ma ricordando che le difficoltà visive non sono le uniche di cui ci occuperemo.

I problemi alla vista più comuni sono miopia, astigmatismo, presbiopia. Chi di noi non ha almeno uno di questi problemi, in particolare chi lavora molte ore davanti ad uno schermo? Sappiamo che col passare del tempo molto spesso vanno peggiorando. Quante persone non hanno gli occhiali "aggiornati", non possono permetterseli, oppure con questi difetti semplicemente ci convivono?

Per venire incontro a queste difetti relativamente lievi è necessario che i testi siano ben contrastati rispetto al loro sfondo per essere leggibili, in particolare se di dimensioni ridotte.

Per misurare il contrasto esistono strumenti sia per i più comuni tool di design, ed estensioni del browser che aiutano nell'individuare il rapporto numerico.

Parlando invece di daltonismo (color blindness in inglese) affrontiamo una difficoltà più sottile ma potenzialmente più problematica, perché al momento non esistono degli occhiali che permettono di correggerla.

La forma di daltonismo più comune consiste nel confondere il verde con il rosso: è il 4-8% della popolazione maschile. Un numero considerevole se pensate ai numerosi utilizzi del verde e del rosso nella comunicazione visiva. Questo spiega perché i semafori stradali hanno luci in tre diverse posizioni: in questo modo è possibile distinguere l'indicazione che danno anche senza vederne i colori.

Nel caso di un prodotto web possiamo evincere che applicare un bordo rosso a un input in errore non lo rende proprio esplicito per chiunque. È necessario un messaggio testuale che spieghi l’errore a parole, così anche uno screen reader possa leggerlo.

Tra l’altro la semplice indicazione di colore presuppone che l’utente sappia che rosso vuol dire errore, ma se ha delle difficoltà cognitive non è detto che lo comprenda così facilmente.

Queste persone hanno necessariamente bisogno di tecnologie assistive o configurazioni particolari, per poter fruire di un prodotto digitale. Gli screen reader sono strumenti che leggono ad alta voce i contenuti ed elementi di un prodotto, creando di fatto un'interfaccia vocale che ne permette l'utilizzo senza la vista.

Secondo fonti ufficiali nell'Europa geografica ci sono oltre 2 milioni persone non vedenti, quasi 24 milioni di persone con visione ridotta, per un totale di 26 milioni. 

Altre statistiche molto importanti ci dicono che il tasso di disoccupazione di non vedenti o parzialmente vedenti in età da lavoro è del 75%. Sappiamo che Il 90% delle persone con problemi di vista hanno più di 65 anni, e che le donne hanno un rischio maggiore rispetto agli uomini di diventare non vedenti o parzialmente vedenti.

Questi numeri sono molto chiari e sollevano l'urgenza di creare dei prodotti accessibili per queste persone. Nel prossimo post di questa serie andremo ad affrontare nel dettaglio come funzionano gli screen reader e quali pratiche ne rendono un prodotto compatibile.

Nel frattempo ecco una dimostrazione di utilizzo:

Immagine di copertina: Andrei Bortnikau/Shutterstock