logo uniudUniversità degli studi di Udine - 2006/2007
Corso di Progettazione di siti web

Rapporto di simulazione euristica di un utente non vedente

Masetto Alessandro


Introduzione

Compito: cercare informazioni su voli aerei da Londra per Venezia.

Possibile percorso da seguire per trovare le informazioni cercate:

  1. Collegarsi al sito di italia.it
  2. selezionare la lingua inglese.
  3. Cliccare su "Plan your Trip"
  4. Cliccare su "on flight, destination Italy"
  5. Scegliere il paese
  6. Compilare la form
  7. Leggere i risultati

Sommario delle barriere incontrate

Tabella di valutazione delle barriere (tratta da Brajnik,(2006) )

 

Tabella di valutazione delle barriere per utenti non vedenti
Barriera Impatto Frequenza Gravità
Immagini ricche senza testo alternativo 3 0  
Mancanza di didascalie del video 3 0  
Colore essenziale 3 0
Frame inaccessibili 3 0  
Materiale in movimento 1 1 minore
Immagini funzionali in sfondo 2 0  
Immagini funzionali prive di testo 3 0  
Link generici 2 0  
Link ambigui 2 0  
Menu dinamici in JavaScript 3 0  
Eventi mouse 3 3 critico
ASCII art 2 0  
Titoli spaziati 2 0  
Troppi link 2 0  
Form con redirect 3 0  
Link non separati 1 0  
Nuove finetre 2 0  
Form senza LABEL 3 0  
Temporizzazioni troppo brevi 3 0  
Tabelle dati 3 1 critico
Tabelle di impaginazione 1 1 minore
Pagine senza titoli 2 1 serio
Frame senza titolo 3 0  
Marcatura della lingua 1 0  
Suddivisione in sezioni 2 1 serio
Immagini come titoli 3 0  
Mancanza di tasti rapidi 3 2 critico
Skip links 2 1 serio
Pagina solo testo 2 0  
Controlli del browser disabilitati 3 0  

Dettagli:

Materiale in movimento

Conseguenza: l'utente non percepisce che l'immagine è cambiata o che il testo è cambiato.

Esempio:

esempio

presentazione in flash onnipresente.

Rimedio: usare descrizioni più ricche.

 

Torna alla tabella

Eventi mouse

La pagina si basa su codice JavaScript per ottenere determinati effetti. Le routine vengono invocate mediante gestori di eventi legati al mouse (es. "onclick").

Conseguenza: L'utente che usa solo la tastiera non ha modo di attivare quegli eventi, e quindi di interagire con la pagina.
Se si accede alla pagina usando solo la tastiera, è possibile notare che all'ottava pressione del tasto TAB si attiva in automatico la ricerca. Non è possibile navigare usando solo la tastiera.

Esempio:

onclick="javascript:fill()" onkeypress="javascript:fill()

Benchè funzioni senza mouse, il meccanismo non consente di navigare attraverso gli elementi della pagina con TAB.

Rimedio: non usare Javascript per fare il submit di una form.

 

Torna alla tabella

Tabelle dati

L'attributo @headers contiene spesso identificatori inesistenti.

Conseguenza: L'utente che utilizza un lettore di schermo non riesce ad associare il contenuto della cella alla sua intestazione.

Esempio:

esempio tabella

Definizione dell'ID

<th class="tableRisRicFirstOn" id="header1">Company</th>


Richiamo corretto

<td class="tableRisRicFirstMiddleOn" headers="header1">Alitalia</td>

Richiamo scorretto: non esiste un elemento con @ID = header 7

<td class="tableRisRicFirstMiddleOn" headers="header7">Alitalia</td>

Esempio di lettura simulata

Esempio di navigazione con Lynx: (si noti anche il titolo della pagina [SUBMIT])

esempio Linx

Rimedio: specificare esattamente le intestazioni.



Torna alla tabella

Tabelle di impaginazione

Uso sistematico di tabelle per l'impaginazione.

Conseguenza:L'utente non capisce come le informazioni o i link sono disposti nella pagina, dato che l'ordine con cui vengono letti dal lettore di schermo differisce da quello previsto dalla gabbia grafica implementata con la tabella. Il lettore di schermo ripete informazioni che non servono

Emulazione di lettura (notare le informazioni del tipo "Table with two columns and three rows")

Rimedio: usare le proprietà dei CSS per avere la stessa struttura grafica.



Torna alla tabella

Pagine senza titoli

Ci sono delle pagine che hanno titoli imprecisi.

Conseguenza:L'utente può avere difficoltà a capire dove si trova.

Esempio:

esempio lynx

Rimedio: impostare correttamente il titolo per ogni pagina.



Torna alla tabella

Suddivisione in sezioni

Alcune pagine non sono strutturate con elementi d'intestazione.

Conseguenza: non è possibile listare tutti i titoli di sezione (da H1 a H6) e di saltare da uno all'altro, in qualsiasi punto della pagina. Ciò non permette all'utente di ottenere velocemente una panoramica del contenuto della pagina e di poter scegliere la parte da esaminare con attenzione, si perde tempo e fatica.
Inoltre anche nel caso di visita di pagine molto simili (ad es. una catena di form in cascata con una parte preliminare delle pagine in comune) l'utente avrebbe modo di saltare direttamente dove serve.

Emulazione di lettura (notare la mancanza delle sezioni)

Rimedio: utilizzare gli elementi H1...H6.

 

Torna alla tabella

Mancanza di tasti rapidi

Mancano alcuni tasti di accesso rapido.

Conseguenza: l'utente, non può muoversi velocemente nella pagina da controllo a controllo. Deve sempre usare il tasto TAB e muoversi sequenzialmente.

Rimedio: utilizzare gli attributi @ACCESSKEY.

 

Torna alla tabella

Skip links

Ci sono, ma le breadcrumbs sono mal posizionate.

Conseguenza: L'utente è costretto a leggere molti contenuti prima di sapere con certezza la sua posizione nel sito.

esempio

Rimedio: spostare le breadcrumbs all'inizio.

 

Torna alla tabella