Simulazione euristica guidata da barriere per la verifica dell'accessibilità del sito del Comune di Tolmezzo

Autore: Fiore Enrico Data stesura rapporto: 10/11/2006

Introduzione

Obiettivo

La Simulazione Euristica del sito del Comune di Tolmezzo è stata eseguita seguendo il metodo definito da Giorgio Brajnik.

In particolare questa versione di Simulazione euristica definisce un elenco di barriere di accessibilità che una pagina di un sito può erigere nei confronti di diverse categorie di utenti disabili.

Lo scopo di questa valutazione è quindi di verificare, una volta scelta una categoria d'utenza, che queste barriere non siano presenti nelle pagine analizzate.

Metodologia

La Simulazione euristica è stata effettuata attraverso le seguenti attività:

Nella valutazione della gravità sono stati considerati i sequenti fattori:

Secondo questa classificazione i problemi sono stati quindi raggruppati in 3 categorie:

  1. Problema minore
  2. Problema serio
  3. Problema critico

Strumenti Utilizzati

Sistemi operativi e browser grafici:

Sommario risultati

Profili Utente e Scenari d'uso

L'analisi del sito è stata svolta per le seguenti categorie d'utenti:

Utente daltonico

Sergio ha 32 anni e convive ormai da molto tempo con il daltonismo. A causa dell'impossibilità di ottenere la patente non può spostarsi autonomamente per effettuare acquisti o commissioni ed ha solo recentemente scoperto la possibilità di effettuare tali operazioni tramite Internet. Però molti dei siti che ha visitato non gli risultano funzionali, questo perchè, a causa dei colori scelti dai progettisti, non è in grado di distinguere alcune opzioni, alcuni link o addirittura parte dei contenuti.

Utente disabile motorio

Maria ha 22 anni e studia Ingegneria Informatica ma a causa di un incidente automobilistico è rimasta in gran parte immobilizzata. Non volendo abbandonare gli interessi che nutriva prima dell'incidente e spinta da una grande forza di volontà ha ben presto imparato ad utilizzare il computer tramite un mouse labiale. Però ha subito notato che in alcuni siti le risulta molto difficile se non impossibile orientarsi ad esempio tra i link dei menu o tra i campi di un form.

Utente di browser senza JavaScript

Giancarlo ha 50 anni e lavora in una ditta edile di grandi dimensioni. Dovendo spostarsi anche più volte al giorno da un cantiere all'altro ha acquistato un palmare che gli permetta di effettuare diverse attività su internet senza il bisogno di utilizzare un computer che, anche se portatile, gli sarebbe d'ingombro. Ma già pochi giorni dopo l'acquisto si è reso conto che solo in alcuni siti può navigare come farebbe con il pc di casa. Infatti in molti casi i progettisti utilizzano il linguaggio Javascript per ottenere alcune funzionalità senza prevedere delle vie alternative.

Pagine analizzate

L'oggetto di valutazione è l'intero sito ma diverse pagine contengono gli stessi problemi e presentano la medesima impostazione grafica.

Sono state analizzate in dettaglio le seguenti pagine, scelte tra quelle aventi in comune le stesse barriere, per la loro importanza all'interno del sito:

Valutazione sintetica

Scenario utente daltonico

Dall'analisi delle pagine per questo scenario è emerso per alcuni elementi del sito un problema critico riguardante la scelta dei colori per lo sfondo e il testo. La gravità è relativa visto che la differenza di contrasto è solo di poco inferiore a quella consigliata. Rimane comunque una barriera significativa ma sarà sufficiente variare leggermente i valori dei due colori per risolverla.

Scenario utente disabile motorio

Per questo scenario le barriere emerse sono numerose ma nessuna impedisce di svolgere il compito che un utente potrebbe prefissarsi. Influiscono però in modo rilevante sulla soddisfazione e produttività dell'utente. La gravità di queste barriere è dovuta soprattutto alla loro frequenza.

Scenario utente di browser senza JavaScript

Le barriere incontrate durante l'analisi del sito per questo scenario sono solamente due ma molto gravi. La loro presenza non permette a questa categoria di utenza di fruire di parte dei contenuti del sito e rende la navigazione all'interno di esso difficoltosa.

Analisi Dettagliata

Analisi delle pagine

Scenario utente daltonico
1: Colore essenziale

Effetto: Gli utenti potrebbero trovarsi nella situazione di non poter distinguere le due informazioni, ad es. se venissero scelti colori che per un daltonico sono troppo poco differenziabili (es. verde e rosso).

Non sono presenti casi in cui il colore viene usato come unico modo per distinguere informazioni diverse.

2: Contrasto visivo insufficiente

Effetto: La persona potrebbe non essere in grado di percepire chiaramente la presenza del materiale di primo piano.

In tutte le pagine del sito sono utilizzati colori con insufficiente contrasto visivo. I link della barra superiore di colore Bianco (#ffffff) sono troppo simili al colore dello sfondo (#6d8a9a) sia per luminosità che per tonalità. Così anche per i link della barra laterale sinistra. Anche i sottotitoli di questa barra di colore nero (#000000) presentano lo stesso problema. Infine nel contenuto dell'homepage nella sezione ultime notizie i titoletti con i nomi dei mesi di colore rosso (#ff0000) hanno una differenza di luminosità insufficiente con lo sfondo (#e0f1ff).

Esempio 1:link barra superiore

Schermata con esempio di link della barra superiore

Esempio 2:link barra laterale sinistra

Schermata con esempio di link della barra laterale sinistra

Esempio 3:Titoli dei mesi nella sezione ultime notizie

Schermata con esempio di titoli dei mesi nella sezione ultime notizie

Soluzione: Effettuare una scelta più accurata dei colori verificando che vi sia una differenza di tonalità e luminosità sufficiente.

Impatto: 3

Frequenza: 3

Gravità: Critico

Scenario utente disabile motorio
1: Menu a cascata

Effetto: L'utente ha difficoltà nel posizionare il puntatore nelle voci giuste, e soprattutto per fare in modo che i menu secondari si aprano e rimangano aperti quando si scorrono le loro voci.

Non vengono utilizzati menu a cascata.

2: Eventi mouse

Effetto: L'utente, che potrebbe preferire l'uso della tastiera al mouse per determinate azioni, si trova nella situazione in cui le funzionalità sembrano esserci ma non funzionano.

Le funzionalità ottenute tramite Javascript sono attivabili solo mediante gestori di eventi legati al mouse.

Esempio 2: Frammenti di codice dei pulsanti

<a onclick="window.open(document.URL,'', 'toolbar=no,menubar=yes,status=no,scrollbars=yes,resizable=yes');return false;" href=""> <a onclick="window.print() return false;" href=""> <a onclick="if (parent._domino_name == '_AperturaIndice') { document.location='../CatSer?OpenView&DbLClkTarget=NotesPreview';} if (parent._domino_name == '_AperturaServizi') { document.location='CatSer?OpenView&DbLClkTarget=Contenuto'; } else { window.close() } return false;" href="">

Soluzione: Usare anche i gestori di eventi logici come ad esempio "onfocus" o "onkeypress". Magari implementare le funzionalità in un altro linguaggio.

Impatto: 1

Frequenza: 3

Gravità: Serio

3: Mancanza di link interni

Effetto: L'utente è costretto a continuamente muovere il puntatore dalla pagina alla barra di scorrimento e viceversa. Anche nel caso di utilizzo della tastiera (se ovviamente è possibile usarla), la mancanza di tali link richiede all'utente un uso più frequente dei tasti.

Non sono presenti link interni.

Soluzione: Aggiungere dei link alla fine di ogni sezione per poter permettere di tornare a inizio pagina, inizio sezione o alla sezione successiva.

Impatto: 1

Frequenza: 3

Gravità: Serio

4: Troppi link

Effetto: Il numero elevato di link costringe l'utente ad un'analisi lunga e faticosa di ciascuno di essi. Il gran numero di link, se disposti in maniera da richiedere dello scrolling verticale od orizzontale, forza l'utente a delle azioni con il mouse o con la tastiera che sono difficili da compiere con accuratezza (il pulsante di scroll è piccolo, il cursore della barra di scorrimento è piccola).

Solo nel contenuto dell'homepage dove vengono elencate delle notizie sono presenti troppi link.

Esempio 1:Contenuto homepage

Schermata del contenuto dell'Homepage

Soluzione: Riorganizzare le notizie (ora divise in sole due macrosezioni) suddividendole in più categorie. Utilizzare i titoli di categoria H1/h6 e magari anche dei link per permettere di saltare da una all'altra.

Impatto: 1

Frequenza: 1

Gravità: Minore

5: link troppo vicini

Effetto: L'utente farà molta fatica a posizionare il mouse su dei link molto piccoli; in certi casi rischierà di colpire il link sbagliato, se posto vicino a quello desiderato.

I link sono tutti sufficientemente distanziati, ma solo il testo è cliccabile.

Esempio 1:link barra superiore

Schermata con esempio di link della barra superiore

Soluzione: Assicurarsi che l'etichetta dei link sia sufficientemente grande; utilizzare ad esempio tramite css l'attributo padding del tag a per aumentare la superficie cliccabile

Impatto: 1

Frequenza: 1

Gravità: Minore

6: Nuove finestre

Effetto: Il dover muovere il mouse sul pulsantino di chiusura della finestra, ogni volta che questa appare, richiede all'utente una notevole fatica perchè deve muovere il mouse sul pulsante, piccolo, di chiusura della finestra in alto a destra, nella barra del titolo.

Nell'homepage tutti i collegamenti a parte "giracittà" si aprono in nuove finestre senza avvisare l'utente o facilitare l'operazione di chiusura delle stesse. Inoltre in ognuna di queste il collegamento che permetterebbe di tornare all'homepage apre un'ulteriore finestra.

Esempio 1: Apertura nuove finestre

Schermata con esempio dell'apertura nuove finestre

Soluzione: Avvisare esplicitamente l'utente dell'apertura di nuove finestre. Nel caso del collegamento per tornare all'homepage evitare l'apertura e fornire invece la possibilità di chiudere agevolmente la finestra mostrando quella dell'homepage che è rimasta in secondo piano.

Impatto: 1

Frequenza: 3

Gravità: Serio

7: Form senza LABEL

Effetto: Certi controlli hanno una superficie cliccabile ridotta (ad es. radiobutton o checkbox). L'utente farà quindi fatica ad attivare il controllo.

Il Form per la ricerca non presenta il tag Label.

Esempio 1: Frammento di codice del campo del form per la ricerca

<td width="77%"><font size="1" color="#000080" face="Verdana"> </font><font color="#000080" face="Verdana"> <input name="Query" value="" size=30></font><br><br></td>

Soluzione: Associare sempre ad ogni campo di un form un tag label descrittivo.

Impatto: 1

Frequenza: 2

Gravità: Minore

8: Temporizzazioni troppo brevi

Effetto: L'utente che ci mette più tempo del previsto per svolgere una determinata azione (ad es. consultare una pagina e successivamente premere un pulsante "accetto") si trova nella situazione di non poter procedere perchè il sistema ha cambiato stato di propria iniziativa.

Non sono presenti temporizzazioni.

9: Mancanza di tasti rapidi

Effetto: L'uso della tastiera è spesso preferito; pertanto la presenza dei tasti rapidi migliora di molto l'usabilità del sito.

Non sono presenti accesskey.

Soluzione: Associare ai pulsanti/link/controlli ricorrenti nelle pagine del sito l'attributo Accesskey. Ricordarsi di evitare caratteri utilizzati dai browser (f d v m p s g a e w t) e fornire una pagina che riassume le "scorciatoie" del sito.

Impatto: 1

Frequenza: 3

Gravità: Serio

10: Controlli del browser disabilitati

Effetto: L'utente è costretto a percorrere in lungo e in largo la pagina per trovare un link che gli/le permetta di tornare indietro o di rileggere l'URL della pagina.

I controlli del browser vengono disabilitati solo selezionando l'opzione pagina intera, ma il pulsante/link che permette di chiuderla è il terzo in ordine di selezione con il tasto "Tab".

Esempio 1:Pulsante di chiusura

Schermata con esempio di visualizzazione in modalità pagina intera

Soluzione: Spostare il pulsante/link che permette di chiudere la finestra alla prima posizione. Eliminare il link all'opzione pagina intera nella visualizzazione in modalità pagina intera.

Impatto: 1

Frequenza: 2

Gravità: Minore

Scenario utente di browser senza JavaScript
1: Menu dinamici in JavaScript

Effetto: L'utente non riuscirà proprio ad usare le funzionalità offerte del menu, dato che esso non si attiva.

Non sono presenti menu dinamici implementati in Javascript.

2: Menu a cascata

Effetto: Se il menu è implementato in JavaScript, i menu non saranno proprio utilizzabili.

Non sono presenti menu a cascata implementati in Javascript.

3: Eventi mouse

Effetto: L'utente non riuscirà ad usare proprio le funzionalità attivabili con i gestori di eventi.

Alcune funzioni e effetti sono ottenuti tramite Javascript. Ad esempio i pulsanti/link per accedere alla modalità di visualizzazione pagina intera, quello per tornare alla pagina principale della sezione e quello per stampare il frame del contenuto.

Esempio 1: Pulsanti implementati in Javascript

Schermata dei pulsanti implementati in Javascript

Esempio 2: Frammenti di codice dei pulsanti

<a onclick="window.open(document.URL,'', 'toolbar=no,menubar=yes,status=no,scrollbars=yes,resizable=yes');return false;" href=""> <a onclick="window.print() return false;" href=""> <a onclick="if (parent._domino_name == '_AperturaIndice') { document.location='../CatSer?OpenView&DbLClkTarget=NotesPreview';} if (parent._domino_name == '_AperturaServizi') { document.location='CatSer?OpenView&DbLClkTarget=Contenuto'; } else { window.close() } return false;" href="">

Soluzione: Rendere disponibili tali funzionalità anche senza Javascript magari in un linguaggio di scripting lato-server.

Impatto: 2

Frequenza: 3

Gravità: Critico

4: Form popolata automaticamente

Effetto: Se l'utente usa un browser privo di interprete JavaScript la form può risultare non utilizzabile.

Alcuni campi del Form per la ricerca sono popolati automaticamente ma non tramite Javascript.

5: Form con redirect

Effetto: L'utente non potrà proprio usare la form, dato che le modifiche che il server ne apporterebbe non sono disponibili.

Non sono presenti Form con redirect.

6: Validazione dei campi

Effetto: Se il codice JavaScript è essenziale, allora l'utente se usa un browser privo dell'interprete JavaScript non potrà proprio inviare i dati della form. Se invece non è essenziale, l'utente potrà usare la form ed inviare i dati, ma determinate verifiche sui dato potrebbero non essere fatte, fornendo quindi dei dati errati al server.

Non è prevista validazione lato-client per i campi di Form.

7: Campi nascosti

Effetto: L'utente non potrà inviare i dati al server, dato che quest'ultimo si aspetta anche i campi nascosti.

Nel Form per la ricerca sono presenti campi nascosti ma non sono popolati tramite Javascript.

8: Nuove finestre

Effetto: Se la finestra viene aperta mediante JavaScript, allora l'utente non ha proprio modo di fruire di quei contenuti.

Il sito è costituito da vari frame. Nell'Homepage disabilitando Javascript non è possibile visualizzare il frame del contenuto. In tutte le altre pagine il frame della barra laterale sinistra non permette la corretta visualizzazione dei collegamenti contenuti. Questo perchè il colore dello sfondo verrebbe modificato da bianco (che è lo stesso colore del testo) a verde (#6d8a9a) da del codice Javascript una volta completato il caricamento della pagina. Infine alla pagina "Immagini e Luoghi" non è possibile ingrandire le immagini.

Esempio 1: Frammenti di codice del frame della barra laterale sinistra

<body text="#000000" bgcolor="white" onload="document.bgColor=document.forms[0].bgColor.value"> <font size="1" color="#ffffff" face="Verdana">Ultimi aggiornamenti</font>

Esempio 2: Aspetto del frame della barra laterale sinistra

Schermata del frame della barra laterale sinistra

Esempio 3: Frame del contenuto nell'Homepage

Schermata del frame del contenuto nell'Homepage

Soluzione: Evitare di aprire nuove finestre o di generare il contenuto dei frame tramite Javascript. Utilizzare un linguaggio di scripting lato-server o fornire contenuti o modalità di accesso alle funzionalità alternative in caso Javascript sia disabilitato.

Impatto: 3

Frequenza: 3

Gravità: Critico

9: Controlli del browser disabilitati

Effetto: L'utente non potrà proprio accedere alla pagina, dato che per aprirla in questo modo è necessario che il browser esegua codice JavaScript.

I controlli del browser verrebbero disabilitati solo selezionando l'opzione pagina intera. Ma essendo quest'ultima implementata in Javascript non funziona. Quindi i comandi del browser non vengono mai disabilitati.

Tabelle riassuntive

Scenario utente daltonico
Tabella riassuntiva per scenario utente daltonico
Barriera Presenza Gravità
1: Colore essenziale Non Presente
2: Contrasto visivo insufficiente Presentecritico
Scenario utente disabile motorio
Tabella riassuntiva per scenario utente disabile motorio
Barriera Presenza Gravità
1: Menu a cascata Non Presente
2: Eventi mouse Presenteserio
3: Mancanza di link interni Presenteserio
4: Troppi link Presenteminore
5: link troppo vicini Presenteminore
6: Nuove finestre Presenteserio
7: Form senza LABEL Presenteminore
8: Temporizzazioni troppo brevi Non Presente
9: Mancanza di tasti rapidi Presenteserio
10: Controlli del browser disabilitati Presenteminore
Scenario utente di browser senza Javascipt
Tabella riassuntiva per scenario utente di browser senza Javascipt
Barriera Presenza Gravità
1: Menu dinamici in JavaScript Non Presente
2: Menu a cascata Non Presente
3: Eventi mouse Presentecritico
4: Form popolata automaticamente Non Presente
5: Form con redirect Non Presente
6: Validazione dei campi Non Presente
7: Campi nascosti Non Presente
8: Nuove finestre Presentecritico
9: Controlli del browser disabilitati Non Presente
Vai a inizio pagina