Lesson learned: Web App accessibili per persone ipo- e non vedenti

Siamo giunti all'ultimo appuntamento con la nostra analisi puntuale e le lesson learned acquisite attraverso test di accessibilità che abbiamo condotto su diverse tipologie di prodotti digitali.
Grazie alla preziosa collaborazione con l’Unione Ciechi di Bologna, abbiamo potuto testare anche l'accessibilità di una Web App , progettata per monitorare degli step di avanzamento di un processo di selezione da parte di un'azienda di recruiting.

Durante la nostra attività di testing ci siamo concentrati in particolare su tre aspetti principali.

Assegnazione dei tag headings e immagini decorative

Facciamo riferimento ad una sezione in cui l’utente ha a disposizione una dashboard che gli permette di consultare velocemente il numero di candidati che sono stati contattati, intervistati, ricontattati etc.
Si tratta di una pagina che offre all’utente molti dati numerici privi di una vera e propria gerarchia.

La lettura tramite screen reader è stata molto utile a capire quanto una corretta assegnazione dei tag headings (h1, h2, h3, h4, h5) può aiutare un utente -ipo o non vedente a scandagliare in maniera rapida la pagina per arrivare velocemente al contenuto che più gli interessa. 
Una errata assegnazione di titoli, al contrario, obbliga l’utente a scorrere l’intera pagina prima di riuscire ad avere contezza di quale ne sia il contenuto, e prima di riuscire a raggiungere il punto che gli interessa veramente.

Un altro accorgimento utile a rendere più accessibile questa dashboard è quello di rendere non leggibili le immagini puramente decorative (ad esempio le icone che supportano i titoli dei vari paragrafi): in questo caso, la buona norma prevede che si possa evitare di compilare l’alt-text.

Esplicitare i criteri di ordinamento e prevedere stepper

Nella sezione dedicata alla panoramica dei candidati in esame è presente una lista di persone e per ciascuno di essi è possibile consultare lo step di avanzamento nel processo di selezione.

In questo caso, la lettura tramite screen reader ci è stata particolarmente utile a capire quanto sia di beneficio ad utenti -ipo e non vedenti esplicitare, in caso di presenza di una lista con ordinamento specifico, quale sia il criterio di ordinamento degli elementi. 
E ancora, in caso di presenza di uno stepper, quanto sia utile esplicitare l’elenco completo degli step, e sulla base di questo, il punto dov’è arrivato il candidato. Ad esempio, se il processo di selezione è strutturato in 10 diversi momenti, è bene indicare tramite markup l’elenco completo in modo tale che l’utente abbia contezza di trovarsi allo step 3 di 10.

Progettare la strutturazione delle tabelle

Nella sezione della Web App, dedicata alla comparazione dei candidati, una tabella molto corposa mette in comparazione le caratteristiche di ciascuno di loro.
Tramite alcuni toggle inoltre, l’utente può nascondere righe e colonne a piacimento in modo da creare una vista personalizzata sulle base delle proprie esigenze.

La lettura tramite screen reader è stata particolarmente utile e ci ha aiutato a capire l’importanza della struttura a tabella per persone -ipo o non vedenti.
Abbiamo infatti realizzato che, al pari della gerarchia data dai tag headings, una tabella html, se realizzata correttamente può essere letta in maniera selettiva, andando a scorrere velocemente tra un contenuto e l’altro e permettendo all’utente di raggiungere il contenuto che gli interessa in maniera più veloce.

I toggle per attivare/disattivare i filtri sulla visualizzazione della tabella invece, si sono dimostrati uno strumento poco chiaro per lo screen reader, che non riesce ad interpretare correttamente lo stato attivo/disattivo in assenza di attributi aria-label.
Nel caso di presenza di filtri quindi, è meglio optare per una o più checkbox e il relativo stato checked, per comunicare allo screen reader che quel filtro è attivo o meno.

Cosa abbiamo imparato dall'attività di testing

Come progettist* e developers non possiamo che uscire da questa esperienza con un’attenzione ancora più spiccata nei confronti del tema dell’accessibilità e a conclusione di questa analisi puntuale vogliamo condividere alcuni tips che consigliamo di tenere sempre a mente durante l'attività di progettazione e design:

• I dati sono spesso un argomento ostico. Renderli più accessibili potrebbe significare non solo agevolare le persone non vedenti ad interfacciarsi con questi ma anche aumentare la comprensibilità generale delle informazioni anche per le persone normodotate.
• Applicando piccole accortezze come l’utilizzo (dove possibile) di tabelle che si affiancano ai grafici, l’uso di testi alternativi e/o di didascalie esplicative affiancate a momenti di test con gli utenti è possibile realizzare report dei dati che siano il più comprensibili possibili.
• Le tecnologie assistive sono un elemento fondamentale per le persone non vedenti per navigare le interfacce.
  Questi strumenti hanno diverse tipologie di impostazioni che consentono all’utente di personalizzare la propria esperienza di fruizione: imparare a conoscere (ma anche ad utilizzare) queste tecnologie può aiutarci a progettare i nostri prodotti con maggiore consapevolezza.
• Non sempre è possibile fare dei test con gli utenti magari per budget o per tempo. Ciò nonostante, imparando ad utilizzare le tecnologie assistive nel loro funzionamento e settaggio, è possibile provare a simulare dei test in modo da provare a scovare eventuali punti inaccessibili dei nostri prodotti che possono essere rivisti.