Accessibilità e Web, come creare un sito accessibile.

Si parla spesso di accessibilità, ma cosa significa avere un sito veramente accessibile?
Per capirne di più ho parlato con Roberta Mancini, presidente della sezione di Verona dell'Unione Italiani Ciechi e Ipovedenti.
Ho conosciuto Roberta durante un evento e mi è sembrata subito l'interlocutore ideale per analizzare il tema dei siti accessibili a tutti. Con lei e Giovanni, il suo compagno, abbiamo analizzato app e siti web, compreso il mio, per capire come funzionano i browser “screen reader” e come poter migliorare l'accessibilità di un sito web.

1. Cos’è l’accessibilità di un sito web?

L’accessibilità è la possibilità di fruire dei contenuti di un sito web a tutti gli utenti, senza discriminazioni, anche in condizione di deficit o difficoltà fisiche quali ad esempio persone non vedenti, ipovedenti o impossibilitate ad utilizzare un mouse per navigare all’interno del sito.
L'Istat, nella sua pubblicazione "Conoscere il mondo della disabilità" edizione 2019 indica che le persone con disabilità sono 3,1 milioni ma il numero di siti che consente l’utilizzo dei contenuti da parte loro con screen reader o altri strumenti di navigazione alternativi ai browser tradizionali è molto limitato. Oggi il numero di persone non vedenti o ipovedenti che utilizza il web e, più in generale, app e altri strumenti digitali, è in continua crescita e consente la fruizione di moltissimi contenuti gratuitamente, ad esempio giornali e riviste in formato digitale.

L'accessibilità è un requisito obbligatorio nei siti della Pubblica Amministrazione ed è regolamentata da una serie di leggi tra le quali la Direttiva UE 2016/2102 del Parlamento Europeo pubblicata il 26 ottobre 2016 e relativa a “Accessibilità dei siti web e delle applicazioni mobili degli enti pubblici”.
Dal 23 settembre 2020 tutti i siti della Pubblica Amministrazione pubblicati prima del 23 settembre 2018 devono adeguarsi alle linee di accessibilità,  pubblicare la "Dichiarazione di Accessibilità" e consentire l'invio di segnalazioni da parte degli utenti.

2. Cos'è e come funziona uno screen reader?

Uno screen reader (lettore dello schermo) è un software che “legge”, interpreta e trasforma in audio i contenuti mostrati sullo schermo di un computer ed è lo strumento usato da non vedenti e ipovedenti per utilizzare un computer e navigare su internet. L’applicazione analizza i contenuti mostrati sullo schermo per poi restituirli all’utente tramite un software di sintesi vocale altrimenti detto text-to-speech (TTS). I software di sintesi vocale più usati sono Utility VoiceOver di Apple per sistemi operativi Mac OS e iOS e Assistente Vocale di Windows per sistemi operativi Windows.

Uno degli screen reader più conosciuti ed utilizzati è sicuramente NVDA (Non visual desktop access), software gratuito e open source per sistemi operativi Windows. Altro software molto valido ma altrettanto costoso è Jaws, acronimo di “Job Access With Speech” distribuito dalla software house Freedom Scientific.

3. Quali devono essere le caratteristiche di un sito accessibile?

Un sito web per essere definito accessibile deve soddisfare determinati criteri e possedere una validazione WCAG (Web Content Accessibility Guidelines, ovvero le linee guida per l'accessibilità dei siti).
In sostanza deve possedere le seguenti caratteristiche:

• essere fruibile da normodotati e diversamente abili indipendentemente dal tipo di disabilità;
• essere navigabile completamente attraverso l'utilizzo di browser web o tecnologie di assistenza (quali screen reader, tastiere "braille" o puntatori mouse “intelligenti”);
• avere contenuti comprensibili e disposti in gerarchie ordinate in modo da evitare fraintendimenti o errori durante la navigazione;
• essere utilizzabile a prescindere dal tipo di dispositivo, sistema operativo, browser o dal contesto di utilizzo;
• fornire le risposte che l'utente sta cercando in modo rapido e preciso garantendo una buona esperienza di navigazione (questa regola vale per tutti i siti e per tutti gli utenti).

4. Quali sono gli aspetti da considerare nella creazione di un sito accessibile?

Lo sviluppo di un sito accessibile deve tenere in considerazione una serie di “regole” per migliorare la navigazione:

• Colore e contrasto
  Utilizzo corretto del colore per avere sempre contenuti visibili e distinguibili in modo chiaro. Evitare combinazioni di colori che creino fastidio nella lettura, quali ad esempio fondo verde e testo rosso oppure fondo rosso e testo blu, e assicurarsi di avere sempre un contrasto alto tra sfondo e testo in modo da mantenere i testi leggibili.
  Occorre fare attenzione anche alle combinazioni di colore che possano confondere gli utenti con problemi di daltonismo (per verificare se il tuo sito è accessibile alle persone daltoniche puoi utilizzare il tool Colorblind Web Page Filter che mostra come il sito è visualizzato con i vari tipi di daltonismo).
• Testi
  Mantenere i testi ordinati e accertarsi che sia possibile ingrandirli fino al 200% mantenendo la leggibilità inalterata (per i testi inseriti all’interno di fondi colorati assicurarsi che l'ingrandimento del testo non vada a collocare parte del testo al di fuori del fondo).
• Grafica e decorazione
  Gli elementi grafici e/o decorativi presenti nel sito e non necessari alla fruizione dei contenuti del sito devono poter essere ignorati, in modo da non interferire nella navigazione con tecnologia assistita.
• Testo “alternativo” sulle immagini
  Il tag “alt” o “alternative text” è il testo alternativo abbinato a una immagine che consente di capire cosa si sta guardando utilizzando uno screen reader o, in caso di connessione lenta, in attesa che il caricamento dell'immagine sia completato. Per svolgere il suo compito in modo corretto il tag “alt” deve contenere una descrizione sintetica ma chiara dell'immagine; un tag “alt” corretto per una immagine raffigurante una villa con piscina fotografata di notte è “villa con piscina e giardino di notte”, mentre è da evitare un campo “alt” vuoto o con una dicitura come “IMG_2015.jpg” che renda impossibile capire cosa si sta guardando.
• Denominazione delle immagini
  Per migliorare l'accessibilità delle immagini in un sito (oltre che per migliorare l'indicizzazione delle immagini stesse) denominare immagini, loghi e icone con nomi esplicativi. Questa procedura è molto importante specialmente in siti sviluppati con l'utilizzo di CMS e CCK dove non sempre è possibile assegnare “manualmente” il tag “alt” alle immagini ma lo stesso è assegnato automaticamente replicando il nome dell'immagine.
• Tabelle e grafiche
  Nella creazione di tabelle accertarsi che le intestazioni siano comprensibili e che le varie celle risultino navigabili per gli screen reader.
  Evitare di usare nel sito solo icone o immagini, senza contenuti testuali, per veicolare informazioni o collegamenti. Allo stesso modo evitare l'utilizzo di grafiche e numeriche senza testi descrittivi che le rendano accessibili. Per migliorare la descrizione alternativa di immagini particolari e di infografiche è possibile utilizzare il tag “longdesc” che consente di inserire un testo più esteso rispetto al tag “alt”.
• Form e moduli
  Utilizzare le etichette in ogni campo per agevolare la compilazione e segnalare eventuali errori e campi non compilati. Per gli avvisi di compilazione errata o incompleta utilizzare dei campi testuali ben visibili, evitando le “classiche” diciture di errore in colore rosso che molto spesso non sono percepite da persone con problemi di daltonismo.
• Capcha
  L'utilizzo di un Capcha “visuale” per aumentare il livello di protezione antispam nei form di un sito web non va utilizzato perché non è interpretato da screen reader e tecnologie di assistenza. L'alternativa è l'utilizzo di sistemi Capcha con la sola conferma tramite spunta (ad esempio il reCapcha di Google “Non sono un robot”). Al contrario non ci sono problemi nell'utilizzo della tecnologia “Double Opt-In” per l'iscrizione a newsletter.
• Link
  Utilizzo di pulsanti e link testuali con un testo esplicativo dell'azione che si va a compiere. Una serie di pulsanti “Clicca qui” tutti uguali non consente ai non vedenti di capire cosa succederà cliccando su quel link. Per questo motivo è necessario utilizzare per pulsanti e link un mini copy che spieghi l'azione, per esempio “Clicca qui per la pagina Servizi”. Altra accortezza da ricordarsi è l'inserimento del tag “title” che aggiunge un campo di spiegazione che si attiva nel momento in cui si arriva sul link.
• Allegati
  Dove è previsto il download di documenti, moduli, guide o altro gli allegati devono essere caricati in formati testuali interpretabili dagli screen reader quali, ad esempio, Word e Excel.
  Nell’utilizzo di file PDF bisogna verificare che i documenti abbiano origine da documenti testuali; in caso contrario, ad esempio per scansioni di documenti salvati in formato PDF, gli screen reader interpreteranno il file come immagine e non potranno fornire un contenuto audio.
• Video e contenuti multimediali
  I video e i contenuti multimediali caricati all’interno del sito (o ad esso collegati da Youtube tramite un iframe o un player video) devono essere forniti di didascalie o sottotitoli. Inoltre deve essere possibile agire sui vari comandi del lettore multimediale anche senza l’utilizzo del mouse.
• Javascript
  Nelle sezioni dove sono presenti animazioni o transizioni accertarsi che il funzionamento sia corretto anche disattivando Javascript o utilizzando strumenti di navigazione alternativi.
  Nel caso di slideshow o carousel con scorrimento automatico contenenti testo deve essere possibile mettere in pausa il movimento e avanzare singolarmente ogni slide.
• Validazione
  Esistono molti validatori online che sono in grado di analizzare siti web per verificarne il livello di accessibilità. Uno dei migliori che ho sperimentato è Vamolà, validatore in italiano che consente di scegliere il livello di validazione tra quelli attualmente approvati dalla WCAG e di ottenere una analisi soddisfacente del proprio sito con elenco degli errori e suggerimenti per risolverli.
  Per approfondire la normativa di riferimento e le linee guida da seguire si possono visitare il sito del Ministero per la Semplificazione e la Pubblica Amministrazione e il sito della W3C dedicato alla WCAG nella versione tradotta da Roberto Scarano.

5. CMS e Accessibilità

Esiste qualche aiuto per creare siti accessibili con i CMS?
WordPress e Joomla già da diverso tempo hanno sviluppato delle soluzioni in grado di supportare lo sviluppo di siti web accessibili a tutti.

WordPress mette a disposizione diversi plugin a sostegno dell'accessibilità come WP Accessibility oppure OneClick Accessibility che permettono di risolvere diverse problematiche tra le quali, ad esempio, la gestione degli attributi di direzione, la visualizzazione a forte contrasto o con aumento di dimensione tramite una barra di strumenti aggiuntiva, l'inserimento di descrizione estese per le immagini, l'aggiunta dei titoli di articoli e post nei link standard “Leggi tutto” e la rimozione degli attributi “target” dai link.
Anche a livello di temi grafici accessibili WordPress si sta muovendo molto bene e nella sezione temi accessibili del sito WordPress.org è possibile trovare più di 100 temi accessibili e gratuiti.

Per gli utenti di Joomla invece la soluzione si chiama Joomla FAP (For All People). Joomla FAP è una versione del CMS Joomla completamente accessibile e dotata di un template predefinito gratuito, anch'esso conforme agli standard richiesti dalla PA, sviluppata da ItOpen, team di sviluppatori torinesi con esperienza pluriennale.
L'ultima versione rilasciata di Joomla FAP oltre a soddisfare pienamente i requisiti della WCAG livello AA ha introdotto la funzionalità responsive per il template predefinito.

Un'altra soluzione molto interessante è Screen Reader WCAG Accessibility Tools di JExtensions Store.
Si tratta di un plugin, disponibile sia per Joomla che per Wordpress, che oltre a disporre di un menù di accessibilità completo (aumento/diminuzione dei font, sostituzione font per persone dislessiche, funzione di aumento dimensione mouse, possibilità di "spostarsi" da un contenuto all'altro, visualizzazione ad alto contrasto) incorpora al suo interno uno screen reader che è in grado di leggere tutti i contenuti testuali di una pagina.

6. App e Accessibilità

Anche nel campo della app sono disponibili diverse app, sia per Android che per iOS, che forniscono informazioni alle persone non vedenti o ipovedenti.
Tra le app provate con Giovanni segnalo ad esempio KNFB Reader che consente di scattare una fotografia col telefono/tablet ad un testo (ad esempio una confezione con diciture stampate) ottenendo in cambio la lettura delle diciture tramite un sintetizzatore vocale.
Altre app con funzionamento simile sono Tap Tap See che descrive il contenuto di una fotografia scattata col dispositivo, Microsoft Seeing Al (disponibile per ora solo in lingua inglese) oppure ColorSay che tramite la fotocamera identifica il colore dell'oggetto che si sta riprendendo.
Altrettanto interessante è Ariadne GPS che tramite la geolocalizzazione consente di conoscere e monitorare in qualunque momento la propria posizione. Inoltre la app permette di memorizzare dei punti personalizzati e avvisa in tempo reale quando ci si avvicina a uno di essi durante gli spostamenti quotidiani.

7. Conclusioni

La chiacchierata con Roberta e Giovanni è stata davvero una esperienza utile per capire quali sono le problematiche più diffuse nei siti in rete e quali possono essere le soluzioni da adottare.
Ritengo che il problema debba essere affrontato su due piani diversi; da un parte una maggiore attenzione nel lavoro di sviluppo, dall'altra un percorso di formazione per aumentare la consapevolezza dell'accessibilità in web designer e sviluppatori.
La maggior parte dei requisiti tecnici da rispettare in un sito accessibile possono essere integrati senza problemi particolari o aumento dei tempi di sviluppo da qualsiasi professionista del digitale, ma molto spesso questo non succede perché manca la conoscenza dei problemi e delle soluzioni.
Mi ha colpito molto la frase con la quale Roberta e Giovanni mi hanno congedato: “tutti noi sappiamo cosa è successo ieri ma non sappiamo cosa succederà domani”. Per loro e per le altre persone con disabilità il web può e deve essere uno strumento utilissimo, a condizione che possano accedervi in totale libertà.

P.S. Il mio sito pur non essendo accessibile in ogni sua parte ha passato abbastanza bene l'esame dello screen reader usato per i test, ma non la validazione con lo strumento Vamolà. Nonostante sia abbastanza navigabile sono emersi alcuni errori legati soprattutto al contrasto di colori e a link non esplicativi.