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 Alitalia

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

Analisi:

Qui sotto abbiamo riportato i risulatati delle nostre analisi:

Immagini ricche senza testo alternativo

Analizzando il sito di Alitalia sia utilizzando la barra Web Developer abbiamo notato che molte immagini sono prive di testo, quindi un lettore di schermo quando le trova, leggerà il percorso dell’immagine, si sentirà pronunciare il percorso, cosa che renderà l’utilizzo del sito molto più difficile. Riportiamo un esempio:

immagine che raffigura la torre eiffel immagine che raffigura i piedi di una ballerina

Rimedio: sarabbe opportuno includere su tutte le immagini, un testo alternativo efficiente, in modo da permettere a chiunque di capire cosa raffigura l’ l’immagine.

Frame inaccessibili

Un errore molto grave è caraterrizzato dalla presenza di un frame che contiene le informazioni per fare il login con Mille Miglia Alitalia. Abbiamo visto che succede un fatto molto cutrioso, utilizzando Zoom Text il frame che permette di registrarsi o loggarsi al club Mille Miglia, è completamente invisibile, mentre utilizzando Fangs la simulazione di testo riesce a vedere qualche informazione all'interno del sito. Visto che non riusciamo a testarlo accuratamente, abbiamo deciso di segnarlo come critico in quanto si ripete in tutte le pagine, non permettendo cosí di venire utilizzato dagli utenti.
In figura è riportato il frame:

modulo che permette l'accesso al club mille miglia

Rimedio: eliminare i frame e sostituirli con dei "div" e opportune regole CSS

Materiale in movimento

È presente una sezione dove vengono visualizzate in rotazione le news di Alitalia. Mentre il lettore di schermo le analizza, se cambia, l'utente non riceve nessun avviso, quindi si ritroverebbe impossibilitato a leggerle tutte, se non ricominciando ad analizzare il sito nuovamente dalla home, e sperando che quando il lettore arriva alle news ogni volta si selezioni una news diversa.

Rimedio: evitare di usare materiale in movimento, e dare sempre all'utente la libertà di avanzare nella fruizione del materiale.

Immagini funzionali in sfondo e prive di testo

Analizzando la home page con un lettore di schermo, e con riscontro visivo, si nota che una parte viene completamente saltata. La tabella al centro (vedi figura),

tabella che permette di cercare e acquistare un volo

tutti gli elementi presenti all'interno dei riquadri rossi, sono immagini caricate da css, quindi senza alt e completamente invisibili al lettore di schermo. Questo è molto grave perchè un utente con disabilità visiva è impossibilitato ad interagire efficacemente con la tabella, in quanto non potrebbe mai prenotare solo un'auto o richiedere l’help ed interagire con qualsiasi pulsante all'interno dei riquadri rossi. Si può notare anche dal pezzo di css riportato sotto.

ul.servizi-orizzontale li.volo {
background: url(/IT_IT/Images/i_volo_tcm10-14123.gif) no-repeat;
text-indent: -9999px;
text-decoration: none;
float: left;
width: 96px;
height: 26px;
}
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

Sempre nella tabella per la prenotazione di un biglietto aereo, c'è un link ad un menù dinamico in javascript che apre una finestra di help.Se un utente ha il javascript disattivato, questo menù è impossibile da aprire. Inoltre è impossibile aprire le finestre che aprono i calendari per scegliere automaticamente la data di partenza e arrivo, e non è possibile selezionare la voce cerca aereoporto cosa che impedisce di selezionare aereoporti stranieri. Queste finestre sono impossibili da visualizzare anche tremite un browser testuale. Questo errore si può vedere anche tramite browser testuale.

alcune righe di interazione con browser testuale

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.

ASCII art

In alcune pagine dove vengono utilizzate le breadcrumbs vengono utilizzati le parentesi angolari per tenere traccia delle pagine visitate, così l'utente si sentirà proninciare ogni volta che ne troverà una si sentirà pronunciare "chiusa parentesi uncinata" cosa che può dare fastidio quando si arriva a breadcrumbs troppo lunghe oppure troppo frequenti.

Rimedio: rimuovere i simboli o le decorazioni realizzate con del testo. Eventualmente rimpiazzarle con delle immagini dotate di ALT="".

Link non separati

Nella home page, e anche nelle altre pagine sono presenti delle liste abbastanza lunghe di link separate da barre. Queste quando vengono lette tramite lettore di schermo, vengono lette tutte di fila insieme al attributo "alt" della barra separatrici che corrisponde a "barra verticae". In questo modo per un utente diventa veramente difficile capire cosa viene pronunciato e a cosa servono i link citati. Vedi simulazione Fangs.

Rimedio: usare i tag UL con opportune regole CSS in modo da visualizzarli su una sola riga e senza separatori grafici.

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

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

lista di link lista di link

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.

Suddivisione in sezioni

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, fecendo perdere tempo e fatica. Listato con fangs:
Vedi simulazione Fangs.

Rimedio:Per ogni tipo di contenuto (ad es. barra globale, briciole di pane, gruppo di link, sequenza di paragrafi) aggiungere un tag H1-H6.

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 dell'alitalia

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.