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

In contrasto con le teorie di Norman ( Norman, (1988)), il sito mette a disposizione più modi per ottenere i biglietti. E' stata presa in considerazione una della possibili strade per il raggiungimento dell'obbiettivo.

Compito: acquistare 2 biglietti da Venezia per Parigi.

Possibile percorso da seguire per acquistare 2 biglietti da Venezia per Parigi:  

  1. Collegarsi al sito di Airfrance
  2. Cliccare su "vendita on line"
  3. Compilare la form
  4. Scegliere il volo di andata
  5. Scegliere il volo di ritorno
  6. Scegliere l'ora del volo di andata
  7. Scegliere l'ora del volo di ritorno
  8. Controllare il riepilogo
  9. Compilare la form con i dati dei passeggeri
  10. Acquistare con carta di credito

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 1 critico
Mancanza di didascalie del video 2 0  
Colore essenziale 3 0
Frame inaccessibili 3 3 critico
Materiale in movimento 1 2 minore
Immagini funzionali in sfondo 2 0  
Immagini funzionali prive di testo 3 0  
Link generici 2 0
Link ambigui 2 1 serio
Menu dinamici in JavaScript 3 3 critico
Eventi mouse 3 3 critico
ASCII art 2 0  
Titoli spaziati 2 0  
Troppi link 2 3 critico
Form con redirect 3 1 serio
Link non separati 1 0
Nuove finestre 2 3 critico
Form senza LABEL 3 3 critico
Temporizzazioni troppo brevi 3 0
Tabelle dati 3 0
Tabelle di impaginazione 1 1 minore
Pagine senza titoli 2 3 critico
Frame senza titolo 3 3 critico
Marcatura della lingua 1 3 serio
Suddivisione in sezioni 2 2 serio
Immagini come titoli 3 0
Mancanza di tasti rapidi 3 3 critico
Skip links 2 3 critico
Pagina solo testo 2 0
Controlli del browser disabilitati 3 2 critico

Dettagli:

Immagini ricche senza testo alternativo

Alcune immagini non hanno l'attributo alt e tantomeno longdesc.

Conseguenza: L'utente, anche se percepisce che c'è un'immagine, non ha modo di sentirne l'informazione contenuta.

Esempi:

esempio

esempio

Stralcio del risultato dell'emulatore di lettore di schermo:

Link Graphic slash fl underline grise.gif Other countriesTable endLinkGraphic slash head underline logoAF.gif

Rimedio: usare @alt o longdesc

Torna alla tabella

Frame inaccessibili

La pagina è basata su frame.

Conseguenza:Utenti di vecchie versioni di lettori di schermo (es. JAWS 3.5) non possono accedere ai singoli frame.

Rimedio: utilizzare le proprietà dei fogli di stile per ottenere lo stesso apetto grafico.

 

Torna alla tabella

Materiale in movimento

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

Esempi:

esempio

esempio

Rimedio:usare @title o @longdesc.

 

Torna alla tabella

Link ambigui

Conseguenza:L'utente è costretto ad esplorare ciascuno dei link (attivandolo e tornando indietro) per trovare la pagina desiderata.

Esempi:

  • informazioni utili
  • assistenza particolare
  • al vostro servizio
  • e-services

Rimedio: Cambiare il nome dei link rendendolo più informativo, eliminare collegamenti superflui e utilizzare @title per aggiungere informazioni sulle risorse puntate dai collegamenti.

 

Torna alla tabella

Menu dinamici in JavaScript

Sono presenti dei menù dinamici in Javascript.

Conseguenza: non appena l'utente posiziona il focus dell'interazione su un elemento, viene aperto un menu in una determinata zona della pagina.

Esempio:

esempio

Rimedio: usare delle liste e modificarne l'aspetto con i fogli di stile.

 

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", "onmouseover", "onmouseout", ...).

Conseguenza: L'utente che usa solo la tastiera non ha modo di attivare quegli eventi, e quindi di interagire con la pagina.

Esempi (elementi del menù principale):

<div
[...]>
onclick="fnItemClick(8,3,'http://www.airfrance.com/double6/passage3.nsf/(LookupPublishedWeb)/
en-OUTCO- PopUp_Schedules?OpenDocument',1);"

onmouseover="fnItem(8,'over',3);"
onmouseout="fnItem(8,'out',3);">Orari

<div
[...]>
onclick="fnItemClick(1,2,'/double6/IT/infolocale.nsf/(LookupPublishedWeb)/it-ACHAT-
hp_reservation_achat?OpenDocument',0);"

onmouseover="fnItem(1,'over',2);"
onmouseout="fnItem(1,'out',2);">Voli</div>

Rimedio: usare @onfocus, @onkeypress

 

Torna alla tabella

Troppi link

Molti collegamenti, generalmente mal organizzati. Lista dei collegamenti della pagine iniziale

Conseguenza: l'utente è costretto ad un'analisi lunga e faticosa di ciascuno di essi.

Rimedio: eliminare i collegamenti superflui; organizzare meglio i contenuti, riducendo la ridondanza. Adottare politiche del tipo divide et impera

 

Torna alla tabella

Form con redirect

Se l'utente desidera cambiare la lingua del sito si trova di fronte ad una form con redirect.

Conseguenza:l'utente, una volta scelta una voce dal menu (ad es.) il browser attende qualche secondo e poi propone la nuova pagina riposizionando il focus all'inizio.


Figura: si noti la mancanza del pulsante di submit

Rimedio: inserire un pulsante e associarlo al controllo.

 

Torna alla tabella

Nuove finestre

Molti collegamenti, necessari per ottenere dettagli o per acquistare il biglietto, aprono finestre pop-up.

Conseguenza:L'utente non si accorge che il contesto di interazione è cambiato

Esempi:

 

esempio

Rimedio: avvertire l'apertura di una nuova finestra con @TITLE o altri attributi.


Torna alla tabella

Form senza LABEL

Conseguenza: il lettore di schermo non legge proprio il testo dell'etichetta prima di presentare all'utente la possibilità di agire sul controllo.

Esempio: la form da compilare per la scelta del volo:

<input checked="checked" name="typeTrajet" value="2"
onclick="ReactiveDateRetour()" type="radio">Andata-ritormo&nbsp;

<input name="typeTrajet" value="1" onclick="DesactiveDateRetour()" type="radio">Solo andata

Rimedio: Associare il controllo al suo attributo LABEL @FOR .



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

Pagina iniziale con i bordi della tabella di layout evidenziata

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

Moltissime pagine hanno lo stesso titolo.

Conseguenza:l'utente potrebbe non capire che la pagina è cambiata.

Esempio:

Biglietti aerei : Air France ® vendita on line

Rimedio: utilizzare titoli appropriati per ogni pagina.


Torna alla tabella

Frame senza titolo

I frame non hanno il titolo.

Conseguenza:L'utente potrà accedere alla pagina solamente un frame alla volta, e sarà costretto a scegliere quale frame visitare.

NB:con un browser testuale è difficile stabilire a priori cosa conterranno i singoli frame:

Osservare il risultato dell'emulatore di schermo

Rimedio: utilizzare titoli appropriati per ogni frame.


Torna alla tabella

Marcatura della lingua

Pur essendoci il marcatore alla pagina HTML, manca nelle singole parole.

Esempio:

<HTML lang="it-IT">

<span> e-services</span>

Conseguenza: Il lettore di schermo pronuncierà le parole con i fonemi della lingua preselezionata. Quindi se la pagina, parte di un sito in italiano, contiene la versione in tedesco della pagina, il lettore di schermo continuerà a pronunciare le parole in italiano, fintantoché l'utente non cambia il settaggio.

Rimedio: utilizzare attributi LANG.

<span lang="en" > e-services</span>

 

Torna alla tabella

Suddivisione in sezioni

Le 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.

Rimedio: utilizzare gli elementi H1...H6.

 

Torna alla tabella

Mancanza di tasti rapidi

Non sono presenti 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

Non sono presenti skip links.

Conseguenza: L'utente è costretto, nella navigazione all'interno del sito, a sentirsi leggere più e più volte il materiale preliminare, prima di arrivare al nocciolo della pagina.

Rimedio: inserire un' immagine trasparente che punta direttamente ai contenuti.

 

Torna alla tabella

Controlli del browser disabilitati

Problema: Non sono presenti skip links.

Conseguenza: 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.

Esempio:

esempio

Rimedio: non togliere i controlli dei browser

 

Torna alla tabella