Comunicazione Web efficace e accessibilità dei siti scolastici

Università di Bergamo > Facoltà di Lettere e Filosofia > Marco Lazzari > Tesi > Case Study: WeBelotti.

CASE STUDY: WeBelotti,
il sito Web dell'Istituto "B. BELOTTI" di BERGAMO

La verifica con i simulatori di disabilità

Una volta controllata la resa della pagina con i vari browser sono passata alla simulazione di alcune disabilità della vista tramite l'utilizzo di verificatori e simulatori.

In particolare ho simulato:

la cecità utilizzando il browser vocale IBM HOME PAGE READER;
la protanopia, malattia che ostacola la corretta interpretazione del rosso e del verde e non consente una corretta percezione della luminosità, simulata con VISICHECK PROTANOPE;
la deuteranopia, malattia che analogamente alla protanopia ostacola la corretta percezione del rosso e del verde, ma permette la distinzione della luminosità, simulata con VISICHECK DEUTERANOPE;
la trianopia, malattia che impedisce una corretta interpretazione del blu e del verde, simulata con VISICHECK TRIANOPE;

ed ho testato:

la luminosità e il contrasto dei colori con il verificatore JUICY STUDIO;
l'assenza di ausili grafici e layout di pagina con l'utilizzo del simulatore di browser testuale LYNX VIEWER.

Dapprima ho verificato la fruibilità della Home Page del sito Web dell'ITCPA B. Belotti con l'utilizzo del browser vocale IBM HOME PAGE READER che ho scaricato all'indirizzo http://www-306.ibm.com/able/solution_offerings/hpr.html.

Avviato il programma, ho inserito l'indirizzo Web dell'Istituto nella barra degli indirizzi come per i comuni browser ed è comparsa questa schermata.

Figura 14. Pagina vista con il browser vocale IBM HOME PAGE READER.

Figura 14. Pagina vista con il browser vocale IBM HOME PAGE READER

Nella parte inferiore viene riportato, sotto forma di testo, quello che il browser vocale legge. Durante questo test ho riscontrato alcuni problemi di non fruibilità e comprensione del contenuto della pagina che ho in seguito esaminato e corretto quali:

i tasti d'accesso ("acceskey") erano originariamente inseriti all'interno della parola che costituiva il link alla pagina ed erano evidenziati in grassetto (es. Orario Classi, Sicurezza). Scritti in questo modo, venivano letti del browser vocale separatamente dalla parola (es. O-rario classi, Sic-u-rezza) e rendevano il testo incomprensibile. Di conseguenza si è presa la decisione di isolarli inserendoli tra parentesi accanto alla parola;
i numeri di telefono erano originariamente composti da cifre che si susseguivano senza interruzione (es. 035.313035). Scritti in questo modo, venivano letti dal browser vocale come numeri a sei cifre. Di conseguenza ho inserito un punto ogni due cifre (es. 035.31.30.35).

Inoltre ho notato alcuni accorgimenti positivi riguardo all'utilizzo di strumenti di formattazione quali:

i titoli formattati con l'utilizzo degli "H1", "H2", "Hn", vengono letti dal browser vocale con l'aggiunta di un suono all'inizio che consente di comprendere che quella frase costituisce un titolo ed è quindi rilevante;
i link sono segnalati da un cambio di voce. Il testo viene letto da una voce maschile e se vi è la presenza di un link, questo viene letto da una voce femminile.

Grazie a questi piccoli accorgimenti, che non avrei notato senza sperimentare in prima persona l'utilizzo di queste tecnologie assistive, il sito risulta comprensibile anche a persone non vedenti o con gravi problemi di vista.

In seguito ho simulato la protanopia con VISICHECK PROTANOPE, un programma che mostra la pagina utilizzando la scala di colori visibili a persone con problemi di percezione del rosso, del verde e della corretta luminosità.

Mi sono collegata al sito http://www.vischeck.com/vischeck/vischeckURL.php, ho inserito l'URL dell'Istituto nel campo testo, ho scelto il tipo di simulazione da effettuare e ho visualizzato questa schermata.

Figura 15. Pagina di simulazione della protanopia.

Figura 15. Pagina di simulazione della protanopia

Come si può notare dalla schermata, la pagina risulta comunque fruibile in quanto i colori, seppur diversi, sono distinti e ben percepibili.

Ho simulato poi la deuteranopia con VISICHECK DEUTERANOPE ¹, un programma che mostra la pagina utilizzando la scala di colori visibile a persone con problemi di percezione del rosso e del verde.

Figura 16. Pagina di simulazione della deuteranopia.

Figura 16. Pagina di simulazione della deuteranopia.

Come si può notare dalla schermata, anche in questo caso la pagina risulta comunque fruibile in quanto i colori sono distinti e ben percepibili.

Infine ho simulato la trianopia con VISICHECK TRIANOPE ², un programma che mostra la pagina utilizzando la scala di colori visibili a persone con problemi di percezione del blu e del verde.

Figura 17. Pagina di simulazione della trianopia.

Figura 17. Pagina di simulazione della trianopia.

Come si può notare dalla schermata, in questo caso la pagina risulta in certi punti poco fruibile in quanto i colori sono poco marcati. In particolare la prima sezione del menu di sinistra appare molto chiara e corrisponde, nella versione a colori, a un giallo molto luminoso. Si è deciso pertanto di modificare il colore della sezione utilizzando un giallo più contrastante.

Prima

colore della sezione giallo marcato.

Dopo

colore della sezione giallo contrastante.

Successivamente ho testato la luminosità e il contrasto dei colori con il verificatore JUICY STUDIO, programma che analizza i colori svolgendo automaticamente un calcolo che ne stabilisce la corretta luminosità e contrasto.

I colori qui di seguito sono quelli utilizzati per la formattazione della pagina del sito WeBelotti.

Figura 18. Colori utilizzati nel sito WeBelotti.

Figura 18. Colori utilizzati nel sito WeBelotti.

Mi sono collegata al sito http://www.juicystudio.com/services/colourcontrast.asp, ho inserito i colori di sfondo e di testo nelle caselle e ho ricevuto il Results con i relativi valori come in questa schermata.

Figura 19. Pagina di analisi dei colori.

Figura 19. Pagina di analisi dei colori

Tutti i colori testati sono risultati ben contrastanti e luminosi eccetto:

il testo bianco su sfondo arancione delle barre di navigazione. Ho proceduto quindi con la ricerca di un colore che fosse sufficientemente contrastante con l'arancione ed ho scelto il blu;
il testo arancione su sfondo bianco della barra delle modalità di visualizzazione. Ho sostituito l'arancione con il blu e quando il puntatore del mouse si posiziona sulla parola per attivare il link lo sfondo diventa arancione;
il testo arancione su sfondo bianco dei link delle barre di navigazione. Ho sostituito il testo arancione su sfondo bianco con un testo bianco su sfondo blu che appare quando il puntatore del mouse si posiziona sul link.

Infine ho visualizzato la pagina con un simulatore di browser di testo LYNX VIEWER per coloro che, per varie esigenze e motivazioni, decidono di non visualizzare immagini e colori.

Mi sono collegata all'indirizzo http://www.delorie.com/web/lynxview.html e ho inserito l'URL nella casella testo ed è apparsa questa schermata.

Figura 20. Pagina vista con un browser di testo.

Figura 20. Pagina vista con un browser di testo

Inizialmente era difficile comprendere quali fossero le sezioni della pagina. Di conseguenza si è deciso di inserire una barra divisoria (attributo "hr /") e un titolo ad ogni sezione, visibili esclusivamente nella versione solo testo (proprietà "display:none").

Note

1 Visicheck http://www.vischeck.com/vischeck/vischeckURL.php. Ritorno al testo

2 Visicheck http://www.vischeck.com/vischeck/vischeckURL.php. Ritorno al testo

Prosegue con: Analisi dei dati statistici.