Università degli Studi di Udine


Relazioni per il Corso di

"PROGETTAZIONE SITI WEB"

SIMULAZIONE EURISTICA

www.lufthansa.it

Nell’ambito del progetto di Progettazione Siti Web, per quanto riguarda la simulazione euristica, abbiamo valutato il sito della Lufthansa, servendoci delle barriere di usabilità forniteci dal Professor Braijnik. Abbiamo scelto, oltre a quali pagine del sito verificare (una decina), tre tipologie di utenti, per ognuna delle quali siamo andati a verificare se erano o meno presenti delle barriere.
Abbiamo presentato in maniera dettagliata, grazie anche a molte immagini, tutti i problemi (barriere) riscontrati, cercando ove possibile di suggerire una soluzione; abbiamo infine creato delle tabelle, una per ogni tipologia di utenti, che riportano, per ogni barriera riscontrata, il relativo livello di gravità.




PAGINE CONSIDERATE

Abbiamo scelto le pagine a nostro parere più significative e problematiche del sito, in modo tale da poter evidenziare i problemi di accessibilità più gravi.




TIPOLOGIE DI UTENTI

Tra molte possibili tipologie di utenti possibili, abbiamo scelto le seguenti tre, che ci sono sembrate le più adatte a far emergere le problematiche maggiori del sito in questione.

  1. Utente cieco
  2. Utente daltonico
  3. Utente di browser senza javascript



LIVELLI DI GRAVITÀ

Il livello di gravità di una barriera viene calcolato a partire dai valori assegnati a due attributi, IMPATTO e FREQUENZA, che devono essere assegnati ad ogni barriera in questo modo:

Per l’impatto, i possibili valori possono variare da 1 a 3, che vengono così assegnati:

Per la frequenza, i possibili valori variano sempre tra 1 e 3, e si riferiscono al numero di volte che un problema si presenta durante lo svolgimento d un compito:


GRAVITÀ
Impatto Frequenza Gravità
1 1 minore
1 2 minore
1 3 serio
2 1 serio
2 2 serio
2 3 critico
3 1 critico
3 2 critico
3 3 critico

Torna su



BARRIERE DI USABILITÀ

Utenti ciechi

Immagini ricche senza testo alternativo

Assenza di testo equivalente associato ad un'immagine che è latrice di informazione (es. diagramma, istogramma, foto, disegno, organigramma, grafico di una funzione, grafo).

Categoria: percezione

Mancanza di didascalie del video

Un file multimediale con un video o un'animazione è privo di descrizione testuale delle scene.

Categoria: percezione

Colore essenziale

La presenza di materiale (testo, immagini, sfondi, filmati) dove il colore viene usato come unico modo per distinguere due o più informazioni diverse. Ad es. righe in una tabella con dati di bilancio dove i valori positivi sono in nero e quelli negativi in rosso (senza il segno "-").Un esempio comune è l'uso del solo colore per distinguere i link già percorsi.

Categoria: percezione

Frame inaccessibili

La pagina è basata su frame.

Categoria: percezione

Materiale in movimento

Immagini o testo in movimento (ad es. testo scorrevole, immagine animata).

Categoria: percezione

Immagini funzionali in sfondo

La pagina contiene nello sfondo (ev. anche mediante regole CSS) delle immagini che nella pagina visualizzata assumono un ruolo funzionale. Ad es. corrispondono ad immagini cliccabili, a pulsanti, a etichette di controlli di form o a etichette di categorie di contenuti.

Categoria: utilizzazione

Immagini funzionali prive di testo alternativo

La pagina contiene delle immagini funzionali (link cliccabili, pulsanti di invio per form, mappe immagine) prive di testo alternativo. Analogamente per pulsanti in Flash.

Categoria: utilizzazione

Link generici

La pagina contiene dei link con etichette poco informative (ad es. "clicca qui", "dettagli", "di più").

Categoria: utilizzazione

Link ambigui

La pagina contiene dei link con etichette ambigue (ad es. "clicca qui", "dettagli", "di più" ripetuti più volte).

Categoria: utilizzazione

Menu dinamici in JavaScript

La pagina contiene del codice JavaScript che, non appena l'utente posiziona il focus dell'interazione su un elemento, viene aperto un menu in una determinata zona della pagina.

Categoria: utilizzazione

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

Categoria: utilizzazione

Form con redirect

La pagina contiene delle form in cui alcuni controlli (campi o menu a tendina implementati con SELECT), una volta che vengono utilizzati, causano un submit al server il quale spedisce una nuova pagina al browser. Questo comportamento è basato su gestori di eventi JavaScript.

Categoria: utilizzazione

Link non separati

La pagina contiene delle sequenze di link non separati tra loro da caratteri pronunciabili.

Categoria: utilizzazione

Nuove finestre

La pagina contiene del codice (HTML o JavaScript) che apre nuove finestre quando l'utente attiva dei link o pulsanti.

Categoria: utilizzazione

Form senza LABEL

La pagina contiene delle form i cui controlli sono privi del corretto markup LABEL/@FOR oppure è impaginata in maniera complessa (ad es. perché impaginata con una tabella il cui contenuto non si linearizza correttamente).

Categoria: utilizzazione

Temporizzazioni troppo brevi

Il comportamento del server è di causare un refresh della pagina, magari con modifica del contenuto, senza che ci sia stato un qualche evento causato dall'utente per attivare tale comportamento.

Categoria: utilizzazione

ASCII art

La pagina contiene del testo che invece di rappresentare parole, rappresenta decorazioni. Ad es. simboli come "==>" oppure uno smiley ;-) o linee orizzontali come "-----------------".

Categoria: comprensione

Titoli spaziati

La pagina contiene delle parole o termini spaziati in maniera artificiosa, ad es. "B E N V E N U T I" formattato con spazi artificiali tra le lettere.

Categoria: comprensione

Troppi link

Troppi link nella pagina, talvolta non bene organizzati in gruppi.

Categoria: comprensione, controllo da parte dell'utente

Tabelle dati

La pagina contiene delle tabelle dati (es. orari di autobus, calendari, elenchi, statistiche) non codificate appropriatamente (con TH/@SCOPE, @HEADERS).

Categoria: comprensione

Tabelle di impaginazione

La pagina viene impaginata con tabelle di layout che si linearizzano male (generazione del loro contenuto letto dall'alto verso il basso e da sx a dx, come se la tabella non ci fosse). In certi casi la tabella di layout contiene anche tag e attributi previsti solo per le tabelle dati (TH, HEADERS, SUMMARY).

Categoria: comprensione

Pagine senza titoli

La pagina è priva di tag TITLE, o esso contiene ad es. "Untitled document", oppure ce l'ha, ma il suo valore è lo stesso per tutte le pagine.

Categoria: comprensione

Frame senza titolo

La pagina è basata su frame e qualcuno dei tag FRAME (dentro FRAMESET) non contiene l'attributo TITLE; oppure il suo valore coincide con il valore di NAME.

Categoria: comprensione

Marcatura della lingua

La pagina manca di attributo LANG sia nel tag iniziale HTML, sia ogniqualvolta ci sono parole di una lingua diversa da quella della pagina.

Categoria: comprensione

Suddivisione in sezioni

La pagina non contiene tag tipo H1-H2...-H6 per suddividere in sezioni il suo contenuto.

Categoria: comprensione, controllo da parte dell'utente

Immagini come titoli

La pagina contiene dei titoli di categoria (ad es. di un gruppo di link tra loro correlati, o di un gruppo di news) implementati mediante delle immagini che sono prive di attributo ALT.

Categoria: comprensione

Mancanza di tasti rapidi

La pagina contiene dei link o pulsanti o controlli di form che sono ricorrenti nelle pagine del sito e che non hanno alcun tasto rapido associato (con @ACCESSKEY).

Categoria: controllo da parte dell'utente

Skip links

La pagina non permette di saltare direttamente al contenuto, evitando il materiale preliminare e ripetuto nelle pagine (logo, briciole di pane, pulsantiera globale).

Categoria: controllo da parte dell'utente

Pagina solo testo

La pagina contiene un link che porta ad una pagina solo del contenuto testuale. Talvolta c'è modo di cambiare i colori e la dimensione del testo. Spesso però la pagina solo testo contiene meno materiale, meno link e minori possibilità di accedere ai contenuti del sito di quanto permetta la pagina grafica.

Categoria: controllo da parte dell'utente

Controlli del browser disabilitati

La pagina è stata aperta in una nuova finestra del browser dove i controlli tipici del browser non ci sono (back, next, refresh, ecc).

Categoria: controllo da parte dell'utente




Utenti daltonici

Colore essenziale

La presenza di materiale (testo, immagini, sfondi, filmati) dove il colore viene usato come unico modo per distinguere due o più informazioni diverse. Ad es. righe in una tabella con dati di bilancio dove i valori positivi sono in nero e quelli negativi in rosso (senza il segno "-"). Un esempio comune è l'uso del solo colore per distinguere i link già percorsi.

Categoria: percezione

Contrasto visivo insufficiente

La pagina contiene materiale in primo piano su qualche tipo di sfondo e i colori usati per dipingere gli uni e l'altro sono troppo poco contrastati. Lo sfondo in questione può essere un riquadro colorato con tinta uniforme, a gradiente, con qualche trama, con un'immagine. E il materiale di primo piano può consistere in testo o in immagini. Il livello di contrasto troppo basso può essere dovuto ad insufficiente differenza di luminosità, o a cattiva scelta delle diverse tonalità di colore. Talvolta il problema sorge solo quando il contenuto della pagina viene riposizionato (ad es. perché si è cambiata la dimensione del testo, o la geometria della finestra).

Categoria: percezione




Utenti di browser senza javascript

Menu dinamici in JavaScript

La pagina contiene del codice JavaScript che, non appena l'utente posiziona il focus dell'interazione su un elemento, viene aperto un menu in una determinata zona della pagina.

Categoria: utilizzazione

Menu a cascata

La pagina contiene dei menu a cascata (implementati con delle SELECT annidate o mediante codice JavaScript).

Categoria: utilizzazione

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

Categoria: utilizzazione

Form popolata automaticamente

La pagina contiene delle form in cui alcuni campi o controlli vengono popolati automaticamente, mediante codice JavaScript. Ad es. una volta che viene scelta la provincia di residenza, la lista dei comuni viene ristretta solamente ai comuni della provincia scelta.

Categoria: utilizzazione

Form con redirect

La pagina contiene delle form in cui alcuni controlli (campi o menu a tendina implementati con SELECT), una volta che vengono utilizzati, causano un submit al server il quale spedisce una nuova pagina al browser. Questo comportamento è basato su gestori di eventi JavaScript.

Categoria: utilizzazione

Validazione dei campi

La pagina contiene una form i cui campi vengono validati esclusivamente mediante JavaScript.

Categoria: utilizzazione

Campi nascosti

La pagina contiene una form che ha dei controlli nascosti (HIDDEN) che vengono popolati mediante JavaScript subito prima dell'invio dei dati.

Categoria: utilizzazione

Nuove finestre

La pagina contiene del codice (HTML o JavaScript) che apre nuove finestre quando l'utente attiva dei link o pulsanti.

Categoria: utilizzazione

Controlli del browser disabilitati

La pagina è stata aperta in una nuova finestra del browser dove i controlli tipici del browser non ci sono (back, next, refresh, ecc).

Categoria: controllo da parte dell'utente


Torna su



TABELLE DI VALUTAZIONE

TABELLA PER UTENTI CIECHI
Barriera Impatto Frequenza Gravità
Marcatura della lingua 1 2 minore
Menu dinamici in JavaScript 1 1 minore
Eventi mouse 1 1 minore
Troppi link 1 1 minore
Form con redirect 1 1 minore
Suddivisione in sezioni 1 2 minore
Immagini come titoli 1 1 minore
Immagini senza ALT 2 2 serio
Nuove finestre 2 2 serio
Colore essenziale 2 3 critico
Immagini funzionali senza ALT 3 1 critico
Form senza LABEL 2 3 critico
Tabelle dati 3 3 critico
Tabelle di impaginazione 2 3 critico
Mancanza di tasti rapidi 1 3 critico
Skip links 2 3 critico

TABELLA PER UTENTI DALTONICI
Barriera Impatto Frequenza Gravità
Contrasto visivo insufficiente 1 1 minore
Colore essenziale 2 2 serio

TABELLA PER UTENTI SENZA JAVASCRIPT
Barriera Impatto Frequenza Gravità
Controlli del browser disabilitati 1 1 minore
Menu dinamici in JavaScript 1 1 minore
Nuove finestre 1 1 minore
Eventi mouse 3 3 critico


Torna su



DETTAGLIO BARRIERE RISCONTRATE

Di seguito si trova l'elenco delle barriere che abbiamo riscontrato all'interno del sito, accompagnato da immagini e frammenti di codice errato. Abbiamo ritenuto opportuno ordinare le barriere per categoria piuttosto che per utente, poichè alcune categorie si riferiscono a più tipologie di utenti.


Categoria: percezione

Immagini ricche senza testo alternativo

imagine funzionale senza attributo ALT

Queste piccole immagini di legenda, che sono l’unico strumento per capire da quale compagnia viene effettuato un volo, sono prive dell’attributo ALT.

imagine funzionale senza attributo ALT

La freccia a destra del campo di ricerca è un’immagine, ciccabile, che manca dell’attributo ALT; l’utente cieco percepirà quindi che è presente un’immagine, ma non sarà in gradi di capire di cosa si tratti, né che la destinazione del link è la medesima del link “ricerca”.


Colore essenziale

immagine in cui il colore funge da unico mezzo per distinguere due elementi diversi

Nelle pagine opzioni di volo e data, all’interno della procedura di prenotazione di un volo, il colore è usato come unico mezzo per evidenziare i voli più economici; un utente cieco, che chiaramente non può percepire questa differenza, impiegherà maggiore tempo nella fruizione. Allo stesso modo un utente daltonico potrebbe non essere in grado di percepire quel particolare colore, e quindi di capire quali sono i voli economici.

immagine di un calendario che evidenzia solo col colore il giorno

Nella form per la prenotazione di un volo, cliccando nei campi per la scelta delle date di partenza e arrivo, si aprono dei piccoli calendari, in cui il numero del giorno corrente viene evidenziato solo con l'uso del colore (arancio). Questo potrebbe causare dei problemi a un utente daltonico.





Categoria: utilizzazione

Immagini funzionali prive di testo alternativo

imagine funzionale senza attributo ALT

Quest’immagine, presente nella home page, nella pagina relativa alle offerte speciali e nella pagina informazioni e servizi, è priva dell’attributo ALT. Essendo inoltre quest’immagine un link, un lettore di schermo (come per esempio JAWS) leggerà, in mancanza dell’attributo ALT, l’URL della pagina di destinazione, impedendo ad un utente non vedente di percepire i contenuti della pagina di destinazione stessa.


Menu dinamici in Javascript

immagine di un menu dinamico in javascript presente nella pre-home del sito in 
	analisi

Nella pre-home è presente un menù dinamico in javascript, attivato al passaggio del mouse, impossibile da percepire per un utente cieco.

immagine del link per effettuare il login, presente in tutte le pagine del sito in analisi

In tutte le pagine valutate del sito ad eccezione della pre-home è presente il link per il login, che è strutturato come un menù dinamico, anche questo impossibile da percepire e usare da parte di un utente cieco.


Eventi mouse

Nella homepage e nelle pagine scelta del volo, elenco voli, opzioni volo, prezzo, dati passeggero non è possibile fare niente per prenotare o visualizzare i voli in quanto i link "continua" sono eventi java-scrpit che portano alla pagina successiva; in pratica un utente senza java-script non può prenotare e visualizzare i voli.

immagine del link per effettuare il login, presente in tutte le pagine del sito in analisi

Il link per il login è basato su dei gestori di eventi logici legati al mouse. Facendo clic su di esso viene aperta una piccola finestra che permette appunto il login. Un utente che non utilizza il mouse non ha la possibilità di fruire di questi contenuti.

Una valida soluzione potrebbe essere quella di introdurre, accanto ai gestori di eventi legati al mouse, dei gestori legati alla tastiera. L'utente cieco avrebbe così la possibilità di fruire ugualmente della funzionalità, pur non usando il mouse.


Form con redirect

Nella pre-home c’è una form composta da due menù a tendina, il primo per la scelta del paese, il secondo per la scelta della lingua. Dopo aver scelto il paese, la pagina viene ricaricata, e il secondo menù a tendina viene popolato con la lingua parlata nel paese scelto (scegliendo Italia dal primo menù, nel secondo automaticamente viene impostato l’italiano come lingua). A questo punto il focus viene riposizionato sulla scelta del paese, e l’utente cieco impiega del tempo per rendersene conto.

form per la prenotazione di un volo

Nella pagina del prezzo, all’interno della procedura di prenotazione di un volo, sono presenti due radio button, uno dei quali prevede di continuare con la prenotazione senza registrarsi. E’ necessario in questo caso scegliere il Paese; posizionandosi sul menù a tendina e cambiando Paese però, si viene rediretti nella pagina iniziale della procedura di prenotazione. Per un utente cieco risulta molto difficile capire in che pagina si trova, capire che c’è stato un cambio di contesto, ed eventualmente procedere con la prenotazione.


Nuove finestre

immagine che mostra l'apertura di una nuova finestra

Nella procedura di prenotazione di un volo, al momento di scegliere gli aeroporti di partenza e arrivo, è possibile scegliere questi ultimi da un elenco, ciccando sul link aeroporti; cliccando su questo link però viene aperta una nuova finestra, e questo causa non pochi problemi ad un utente cieco, che potrebbe non capire che il contesto è cambiato. Inoltre nella nuova pagina che viene aperta sono disabilitati i controlli del browser (avanti, indietro, aggiorna…), e anche questo comporta qualche difficoltà. C'è da sottolineare che perlomeno nella nuova finestra è presente un link che permette la chiusura della finestra stessa, anche se a nostro parere sarebbe stato opportuno posizionarlo all'inizio della pagina (in alto) e non in fondo.

Stessa cosa accade ciccando sulle piccole immagini (link) che si trovano a lato di ogni volo (nella pagina scelta del volo all’interno della procedura di prenotazione); anche qui viene aperta una piccola finestra che fornisce alcune informazioni.

Anche ciccando sui link che permettono la prenotazione di auto e hotel vengono aperte delle nuove pagine, senza che di ciò l'utente venga informato.


Form senza label

Nella pagina dati passeggero all’interno della procedura di prenotazione di un volo, è presente una form, che è priva dei tag LABEL/@FOR; fruendo della pagina con un lettore di schermo risulta difficile capire a quale campo fanno riferimento le diverse etichette, e altrettanto difficile risulta compilare correttamente la form.

immagine di un campo di una form privo del tag label

Il campo ricerca è privo del tag label, e l'etichetta è posizionata dopo il campo; un lettore di schermo come Jaws legge per prima cosa “edit”, e solo dopo “this page link ricerca”. Questo costringe l’utente ad “andare avanti e indietro,, per poter capire a cosa serve il campo ed eventualmente compilarlo.





Categoria: comprensione

Troppi link

pagina del sito con moltissimi link

Nella pagina informazioni e servizi, nonostante siano organizzati e suddivisi piuttosto bene, ci sono troppi link, che rendono difficile la navigazione per un utente cieco.


Tabelle dati

immagine di una tabella priva di TH/@SCOPE, @HEADERS

Questa tabella, presente nella pagina con l’elenco dei voli non è stata codificata usando TH/@SCOPE, @HEADERS; è dunque impossibile per un utente che usa un lettore di schermo capire in quale cella si trova, e quindi scegliere un volo. Navigando tra le celle con Jaws, all’utente non viene letto e specificato il significato di ogni cella (in questo caso la data di andata e ritorno).

immagine di una tabella priva di TH/@SCOPE, @HEADERS

Stessa cosa avviene nella pagina delle opzioni di volo, in cui sono presenti altre due tabelle, grazie alle quali l’utente può scegliere i voli di andata e di ritorno. Poiché le varie celle non sono state legate alle relative celle d’intestazione con gli adeguati attributi, è impossibile capire queste tabelle con un lettore di schermo; le tabelle vengono infatti lette riga per riga, dall’alto verso il basso. La prima parte della tabella verrà letta così: “table with five column and eight rows Milano aperta parentesi tonda MIL chiusa parentesi tonda a Pechino aperta parentesi tonda PEK chiusa parentesi tonda due punti dom quattro mar partenza arrivo volo durata radio button not checked milano virgola malpensa nove due punti cinquantacinque Francoforte undici due punti venti link LH3381 sedici h trenta francoforte diciassette due punti quindici Pechino virgola beiging capital zero nove due punti venticinque più uno link LH720... ”.


Tabelle di impaginazione

immagine di una form impaginata con una tabella

Nella home page è presente una form per la prenotazione di un volo, che è impaginata con diverse tabelle. L’utente, pur riuscendo ugualmente a fruire del contenuto, viene rallentato dalla presenza di queste tabella: il lettore di schermo leggerà infatti continuamente “table with tot columns and tot raws”, confondendo e appunto rallentando l’utente, che dovrà capire che si tratta evidentemente di tabelle utili solo all’impaginazione.


Marcatura della lingua

frammento di codice che riporta la mancanza dell'attributo LANG

All'interno del sito sono presenti diverse parole in una lingua diversa quella prescelta. Non essendo stato però usato per queste parole l'attributo LANG,il lettore di schermo le leggerà come se fossero in italiano, rendendo difficile la comprensione del testo. Nell'esempio sopra riportato, le parole "Online Check In" verrebbero lette da un lettore di schermo "online kek in".





Categoria: controllo da parte degli utenti

Controlli del browser disabilitati

immagine di una finestra del browser in cui sono disabilitati i controlli

Come già spiegato sopra, cliccando su alcuni link all'interno del sito, vengono aperte nuove finestre; in queste finestre sono stati disabilitati i controlli del browser (indietro, avanti, aggiorna...).


Torna su