Logo Università degli studi di Udine

Università degli studi di Udine

Corso di laboratorio di Progettazione di siti e portali web

Simulazione euristica del sito Volareweb

5.Simulazione euristica Utenti Ipovedenti

Tabella di valutazione per utenti ipovedenti tratta dalle lezioni del dott. Brajnik

Barriera Impatto Frequenza Gravità
Immagini ricche malposizionate 0 0
Immagini ricche incluse nello sfondo 0 0
Contrasto visivo insufficiente 0 0
Materiale in movimento 0 0
Immagini funzionali in sfondo 0 0
Immagini funzionali prive di testo 1 1 minore
Menu dinamici in JavaScript 3 2 critico
Mancanza di link interni 2 2 serio
Righe di testo lunghe 0 0
Troppi link 0 0
Form con redirect 0 0
Form ampie 0 0
Finestre sovrapposte 0 0
Temporizzazioni troppo brevi 0 0
Immagini come titoli 0 0
Mancanza di tasti rapidi 2 2 serio
Testo non ridimensionabile 3 3 critico
Layout non ridimensionabile 0 0
Skip links 2 1 minore
Controlli del browser disabilitati 0 0

Analisi:

Qui sotto abbiamo riportato i risulatati delle nostre analisi:

Immagini funzionali prive di testo

Analizzando le varie pagine del sito, risulta che all'incirca tutte le immagini posseggono un attributo alt, solo in alcuni casi abbiamo trovato qualche immagine che non rispettasse questo requisito, ma in modo leggero da non complicare l'utilizzo del sito ad un utente con disabilità visiva.
Esempi:

logo volare web

logo auto

Rimedio: rimuovere le immagini funzionali dallo sfondo e includere le informazioni importanti direttamente nell'HTML. Agire poi con il CSS per ottenere l'effetto grafico desiderato. Inoltre sarebbe opportuno aggiungere ad ogni immagine l'opportuna descrizione alternativa.

Menu dinamici in javascript

Navigando nel sito abbiamo notato che sono presenti abbastanza link che aprono dei menù tramite javascript. In questo modo però quando si apre un menù, il lettore di schermo non ne rileva la presenza, e quindi anche quelle informazioni verranno scartate senza che l'utente ne venga messo al corrente. Questo problema è molto grave perchè l'utente potrebbe perdere informazioni molto importanti.
Esempio di menu in javascript:

menù in javascript

Rimedio: fare in modo che tutte le opzioni di navigazione e i comandi operativi (ad es. i comandi da menu) siano attivabili anche disattivando JavaScript.

Mancanza di link interni

L'utente sarà costretto a muovere il campo visivo dalla parte inferiore della pagina alla barra di scorrimento (per spostare il contenuto della finestra) e poi di nuovo all'inizio della finestra per poter leggere il titolo della sezione e la sua parte iniziale. Questo problema può dare molto fastidio, in quanto diventa difficile per l'utente fare uno scroll continuo.
Riportiamo un esempio per are vedere quanto piccola è la sbarra di scorrimento.

parte di informazioni di alitalia Rimedio: alla fine di ciascuna sezione della pagina includere dei link per poter saltare alla fine della successiva sezione, all'inizio della sezione appena vista, in testa o alla fine della pagina.

Righe di testo troppo lunghe

Le righe più lunghe del campo visivo forzano l'utente a continuamente far scorrere il campo visivo da sinistra a destra per poter leggere il testo della riga, e poi di nuovo da dx a sx per andare all'inizio della riga successiva. Abbiamo notato che un utente che utilizzi ingranditore di schermo, con fattore di ingrandimento di 5x potrebbe trovarsi in difficoltà nel leggere il testo che riporteremo sotto

Rimedio: cercare di fare in modo di non creare testi con righe troppo lunghe in modo da non dover costringere un ’ytente ad utilizzare uno scroll troppo intenso.

pezzo di testo tratto dal sito di Alitalia

Mancanza di tasti rapidi

La struttura del sito, mantiene una parte uguale in tutte le pagine, questa parte contiene abbastanza link, i quali sono tutti sprovvisti di accesskey in questo modo, un utente ogni volta che entrerà in una pagina, dovrà ascoltare ogni volta le stesse informazioni, arrecando così un senso di insoddisfazione.

Rimedio: per i link/pulsanti/controlli che sono ricorrenti nelle pagine del sito (cioè dove valga la pena che l'utente impari e ricordi che ci sono dei tasti rapidi associati) aggiungere l'attributo ACCESSKEY.

Testo non ridimensionabile

La pagina contiene del testo per il quale sono state usate delle modalità di presentazione tali per cui non può essere ridimensionato. Ad es. unità di misura assolute del CSS (px, pt, cm).

Riportiamo un pezzo del CSS del sito di volare web, dove si verifica il problema.

.text_log, .text_log a, .text_log a:visited, .text_log a:hover, .text_log a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #49495D;
background-color:#F7F9FB;
text-decoration: none;
}


Rimedio: Usare sempre unità di misura CSS di tipo relativo, come em e %.Non usare mai FONT/@SIZE né immagini con il testo dipinto in pixel.

Skip links

La struttura del sito, mantiene una parte uguale in tutte le pagine, questa parte qualche link, (vedi figura):

intestazione delle pagine di volare web

Se un utente con lettore di schermo naviga in tante pagine del sito, ogni volta esso gli leggerà tutti quei link, e lui dovrà aspettare sempre prima di passare al contenuto della nuova pagina, rallentando e rendendo più difficile la consultazione del sito.

Rimedio: aggiungere, subito dopo il logo, un link che permetta di saltare al nocciolo della pagina.