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 Volare Web

4.Simulazione euristica Utenti non Vedenti

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

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

Analisi:

Qui sotto abbiamo riportato i risulatati delle nostre analisi:

Immagini ricche senza testo alternativo

Analizzando il sito abbiamo notato grazie all'utilizzo della barra degli strumenti web developer che permette di visualizzare a video gli attributi alt delle immagini, che in alcuni casi l'attributo "alt" è stato completamemte omesso. Riportiamo qualche esempio:>

logo che espone le offerte per bambini

Riportiamo anche il tag per caricare l'immagine presente sul sorgente della pagina:
<img src="../../../../repository/campains/20071806_ovtop_it.gif" border="0"> Questa immagine per esempio non presenta l'attributo alt, in questo modo un utente che utilizza un lettore di schermo, non si accorge della presenza di questa immagine che fa da link, e quindi non potrà neanche sapere a cosa si riferisce. In questo caso non potrebbe acceddere alle promozioni per i bambini per il mese di Luglio. In alcuni casi, abbiamo trovato he anche il logo di Volare Web, manca di opportuno testo alternativo, in questo modo, anche questa parte verrà ignorata dal lettore di schermo. Sotto possiamo vedere il logo incriminato:

logo volare web

Riportiamo anche il tag per caricare l'immagine presente sul sorgente della pagina:
<img src='../images/he/he_logo.gif' width='352' height='109' border='0'> In questo modo l'utente non rileva la presenza di un immagine che permette di tornare alla pagina iniziale, dovrà quindi escogitare altri modi. Rimedio: sarabbe opportuno includere su tutte le immagini, un testo alternativo efficiente, in modo da permettere a chiunque di capire cosa raffigura l'immagine.

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

Menù 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 gravi.
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.

Tabelle dati

La pagina contiene tabelle dati che non sono state codificate in modo appropriato, quindi sviluppate senza gli atributi caption, th, ed headers. In questo modo ad un utente con lettore di schermo, risulta molto più difficile orientarsi all'interno della tabella, e non può decidere a priori se saltarla o meno perchè manca la descrizione di cosa contiene la tabella. Un utente può trovarsi in questa situazione ogni volta che visita la pagina orari.
Riportiamo sotto la tabella descritta:

tabella con gli orari dei voli

Con il riferimento sotto, si può vedere il risultato della simulazione di fangs si noti la descrizione della tabella: "Table with seven columns and four rows".
Vedi simulazione Fangs.

Rimedio: usare i tag TH per distinguere le celle intestazione da quelle dati (TD). Usare gli attributi TH/@SCOPE o TH/@ID e TD/@HEADERS per legare le celle dati alle correspondenti celle intestazione. Aggiungere l'attributo SUMMARY ed usare il tag CAPTION.

Pagine senza titoli

Abbiamo notato che tutte le pagine mantengono lo stesso titolo, cioè "volareweb.com" questo crea un problema, in quanto il titolo è la prima cosa che viene letta da un lettore di schermo, e visto che il titolo è sempre uguale, l'utente potrebbe non accorgersi che la pagina è cambiata. Questo comporta una riduzione della produttività.

logo con il titolo delle pagine

Rimedio:Fare in modo che il titolo di ciascuna pagina sia unico (diverso dai titoli delle altre) e informativo.

Marcatura della lingua

La lingua del sito, è stata definita, però si possono incontrare dei termini di un altra lingua senza appropriata marcatura, in questo modo, il lettore di schermo, ne altera la pronuncia.
Rimedio:Aggiungere l'attributo HTML/@LANG con valori come "it", "en", "de", "fr", ecc. Inoltre ogni qualvolta si riscontra la presenza di una parola con una lingua diversa, usare del markup.

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

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 il lettore gli leggerà tutti quei link, e lui dovrà aspettare ogni volta 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.