Accessibilità pagine web: gli strumenti

Ispirato dalla serie di post di Fabry sul tema accessibilità (parte 1 qui), ho deciso di parlare di un paio di strumenti di verifica della conformità delle pagine web che sviluppiamo rispetto alle principali normative in ambito di accessibilità (per una infarinatura di alto livello sull’accessibilità vi consiglio di leggere i post linkati precedentemente).

Gli strumenti di cui parlerò mi è capitato più volte di utilizzarli sviluppando servizi per la PA (in quanto è richiesta la conformità rispetto alla legge Stanca). Si tratta di AChecker e di Colour Contrast Analyzer Firefox Extension (che ovviamente è un plugin per Firefox).

AChecker

Si tratta di una applicazione web scritta in PHP che permette di testare la conformità delle nostre pagine web rispetto ai principali standard in termini di accessibilità (WCAG1.0 e 2.0) e rispetto alle principali normative nazionali ed internazionali (Legge Stanca, Section 508). È possibile utilizzarla sia online sul sito del tool, sia scaricarla e installarla in locale all’interno di una propria istanza di server web (utile soprattutto per testare pagine che non volete diffondere in rete prima del tempo…)

Attraverso questo tool è possibile richiedere la verifica di una pagina sia attraverso l’inserimento di un URL valido, sia attraverso l’upload del file HTML (nel caso di pagine server-side è necessario fare l’upload dell’HTML generato).

Questo tool vi segnalerà sia gli errori di validazione sintattica della pagina (rispetto al DOCTYPE indicato nella pagina stessa), sia gli errori relativi all’accessibilità (rispetto agli standard/normative che avrete indicato), in particolare gli errori sono suddivisi in:

  • Errori noti: questi sono errori certi, che dovete assolutamente correggere
  • Errori verosimili: questi sono possibili errori (warning), spesso non sono veri errori, ma semplicemente indicazioni di potenziali problemi di accessibilità (ad esempio contenuti poco significativi di attributi quali title)
  • Errori potenziali: sono suggerimenti su come migliorare ulteriormente l’accessibilità, ad esempio la mancanza del cosiddetto breadcumb ovvero una specie di indice della pagina, che riporta un sommario e dei link a delle ancore relative alle varie sezioni della pagina (il tutto nascosto attraverso l’uso dei CSS, ma interpretato per esempio da strumenti quali gli screen reader)

Colour Constrat Analyzer Firefox Extension

Questa estensione per Firefox ci permette di verificare al volo la scelta dei colori della nostra pagina rispetto a possibili problemi di contrasto locale tra testo e sfondo. Tutto ciò senza il minimo sforzo (la verifica manuale del contrasto richiede il calcolo di una apposita funzione non banale basata sul codice RGB dei colori).

Questo strumento è davvero di grande aiuto e ci permette di verificare un aspetto di accessibilità troppo spesso trascurato. L’unica pecca riguarda l’impossibilità di verificare in automatico il contrasto all’interno di una immagine o tra testo e immagine di sfondo (l’operazione è tutt’altro che banale), infatti il controllo automatico si limita ad analizzare il CSS della nostra pagina. Tuttavia è possibile effettuare un test manuale selezionando separatamente il colore del testo e dell’immagine, lo strumento calcolerà immediatamente il contrasto e ci indicherà se è sufficiente rispetto alle varie normative/standard.

L’analisi automatica produrrà un report di questo tipo (vi basta aprire la pagina che volete testare e selezionare dal menù Strumenti->Colour Contrast Analyzer -> tutti i test):

mentre l’analisi manuale è fatta attraverso la seguente interfaccia (l’interfaccia stand-alone la trovate qui):

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...