immagine di testata

UNIVERSITÀ DEGLI STUDI DI BERGAMO

Modalità di visualizzazione: Caratteri grandi | Alto contrasto | Solo testo | Base |

Modalità base

Modalità alto contrasto

Modalità solo testo

Modalità caratteri grandi
I CAPITOLI:
I SOTTOCAPITOLI:
Valida l'html e il css del tuo sito

Valida l'html del tuo sito Valida il css del tuo sito
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:

ed ho testato:

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:

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

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 1, 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 2, 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:


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.


Marco Lazzari, Jenny Pellegrini, Comunicazione Web efficace e accessibilità dei siti scolastici, http://www.unibg.it/lazzari/tesi/jenny_pellegrini/cap3_6.htm

UNIVERSITÀ DEGLI STUDI DI BERGAMO - Via Salvecchio, 19 - 24129 Bergamo - Numero Verde: 800 014959 - numverde@unibg.it