Linee guida per l’accessibilità dei contenuti sul Web

Linee guida per rendere un sito alle persone con disabilità

In questo articolo condividiamo le indicazioni per rendere il proprio sito accessibile alle persone con disabilità. A tal proposito i possono consultare, cliccando qui, le "Linee guida per l'accessibilità dei contenuti Web (WCAG) 2.0" e consigliamo di utilizzare WAVE Evaluation Tool, un’app che consente di analizzare l’accessibilità delle pagine web. Si tratta di uno strumento online gratuito che raccoglie diversi strumenti per valutare i contenuti e renderli accessibili alle persone con disabilità. Al tempo stesso restituisce una serie di risultati indispensabili a tutti i webmaster e blogger che si chiedono come ottimizzare un blog e i relativi articoli.

Un sito, per essere accessibile, in fase di progettazione dei contenuti, deve seguire una serie di accorgimenti e  principi per rendere fruibile la navigazione a persone con specifiche esigenze e/o che utilizzano delle tecnologie assistive particolari.

Riportiamo alcuni aspetti che riteniamo più importanti e intuitivi per i meno esperti:

• Utilizzo corretto del colore e del contrasto
  I contenuti devono essere visibili e distinguibili in modo chiaro. Vanno evitate combinazioni di colori che possano creare fastidio nella lettura (ad esempio fondo verde e testo rosso oppure fondo rosso e testo blu) e bisogna assicurarsi di avere sempre un contrasto netto tra sfondo e testo per rendere i testi leggibili.
• Testi ordinati e ingrangibili
  E' importante verificare la possibilità di ingrandire il testo fino al 200%, mantenendo la leggibilità inalterata.
• Grafica e decorazione
  Gli elementi grafici e/o decorativi presenti nel sito e non necessari alla fruizione dei contenuti 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.

Plug in per l'accessibilità

WordPress consente l'utilizzo di diversi plugin utili al miglioramento dell'accessibilità come WP Accessibility oppure OneClick Accessibility, che permettono 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.

Gli utenti di Joomla possono utilizzare Joomla FAP (For All People), una versione del CMS Joomla completamente accessibile e dotata di un template predefinito gratuito, anch'esso conforme agli standard richiesti dalla PA. 
Screen Reader WCAG Accessibility Tools di JExtensions Store è un Plugin disponibile sia per Joomla che per Wordpress, che dispone 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.

Articoli correlati:

• Accessibilità web: l’AgID invia relazione alla Commissione Europea
• Agid: aggiornamento delle dichiarazioni di accessibilità
• Accessibilità web: l’AgID lancia la campagna accessibile è meglio