Laboratorio avanzato di Progettazione Siti Web

Autori: Bove Simone e Damiani Andrea
simonebove@gmail.com, andriy85@gmail.com

Sei in: Home [h] sovrasezione disimulazione euristica ryanair.it

Simulazione Euristica

Sommario

  1. [i] Introduzione
  2. [p] Pagine analizzate
  3. [u] Categoria utenti
  4. [s] Software utilizzati
  5. [a] Barriere dell'utente non vedente
    1. [j] Percezione
    2. [k] Utilizzazione
    3. [l] Comprensione
    4. [z] Controllo
  6. [b] Barriere dell'utente ipovedente
    1. [x] Percezione
    2. [w] Utilizzazione
    3. [y] Comprensione
    4. [o] Controllo
  7. [c] Barriere dell'utente daltonico
    1. [q] Percezione
  8. [f] Conclusioni


Introduzione

Questo metodo di valutazione, offre la possibilità di colmare alcune delle lacune riscontrate con gli altri metodi usati fin ora. In questo metodo i principi adottati vengono sostituiti da un elenco di barriere di accessibilità, i valutatori esamineranno le pagine alla ricerca di tali barriere, che potrebbero impedire all'utente disabile la navigazione del sito. Per barriere di accessibilità si intende una qualsiasi condizione che rende difficile o impossibile il progredire verso l'ottenimento di un obiettivo da parte di una persona disabile che usa il sito mediante un qualche tipo di tecnologia.

Una barriera viene descritta in termini di: I livelli di gravità sono determinati dall'impatto e dalla frequenza.

[t] Torna al sommario

Pagine analizzate

La presente relazione e' stata realizzata tra il 26/02/2007 e il 02/03/2007.

[t] Torna al sommario

Categoria utenti

Categoria di utenti analizzate:

[t] Torna al sommario

Software utilizzati

Per aiutarci a svolgere questa relazione abbiamo introdotto l'uso di software specifici:

[t] Torna al sommario

Lista di barriere per Utenti non vedenti

BARRIERE NELLA PERCEZIONE
Immagini ricche senza testo alternativo
Impatto : 2
Frequenza : 2
Gravità : Seria

Tutte le immagini all'interno delle pagine visitate hanno un attributo Alt, quindi possono essere lette dal browser vocale. Va precisato che spesso il testo non è molto chiaro, le frasi non hanno un vero e proprio significato e la mancanza visiva potrebbe non far capire all'utente non vedente il messaggio che vorrebbe essere trasmesso.

Esempio di testo alternativo poco significativo
Mancanza di didascalie del video
Impatto : 0
Frequenza : 0
Gravità : Nessuna

Nel sito non sono presenti video.

Colore essenziale
Impatto : 1
Frequenza : 3
Gravità : Seria

L'uso del colore all'interno del sito per evidenziare possibili link o immagini, spesso non è accompagnato da nessun'altra forma di evidenza; la maggior parte dei link non presenta alcuna sottolineatura quando vengono selezioinati. I colori usati all'interno dei sito per evidenziare i link spesso non hanno un sufficiente contrasto visivo, come avviene ad esempio sul menù in alto della "Homepage". Non viene inoltre usata alcuna distinzione fra link da visitare e link già visitato.

Esempio di menu privo di sottolineatura per i link e con scarso contrasto visivo
Frame inaccessibili
Impatto : 2
Frequenza : 2
Gravità : Seria

Nel sito sono presenti frame, ma vengono visti dal lettore JAWS 8.0 normalmente. Chi suo malgrado possiede una versione meno recente di JAWS potrebbe avere problemi in quanto versione inferiori alla 3.5 causa l'inaccessibilità dei frame. Il sito dovrebbe essere costruito senza far uso di frame usando eventualmente dei DIV accoppiati ad opportune regole CSS per simularne gli effetti positivi.

Materiale in movimento
Impatto : 0
Frequenza : 0
Gravità : Nessuna

All'interno del sito troviamo pochi elementi in movimento come gif animate, e usando un lettore di schermo possiamo facilmente capire di cosa trattano e dove ci reindirizzano

[t] Torna al sommario

BARRIERE NELL'UTILIZZAZIONE
Immagini funzionali in sfondo
Impatto : 0
Frequenza : 0
Gravità : Nessuna

Non sono state trovate.

Immagini funzionali prive di testo
Impatto : 3
Frequenza : 2
Gravità : Critica

L'utente non vedente che utilizza un lettore di schermo (ad esempio Jaws 7.0) e usufruisce del sito non percepisce chiaramente di cosa tratti il link dell'immagine sottostante, in quanto non è fornito un testo altenativo sufficientemente informativo.

Esempio di testo alternativo poco significativo su immagine funzionale

In altri casi invece, il testo alternativo non viene nemmeno specificato rendendo cosi inaccessibile il link alla quale l'immagine è collegato.

Esempio di testo alternativo non specificato
Link generici
Impatto : 0
Frequenza : 0
Gravità : Nessuna

Le etichette dei link sono sempre ben definite ed informative. Non sono state trovate etichette poco chiare come ad esempio "clicca qui" o "dettagli". I link hanno sempre delle etichette che chiariscono il concetto come ad esempio quella illustrata qui sotto, dove il "clicca qui" e accompagnato da una descrizione più precisa di dove il collegamento manderà l'utente.

Esempio di etichette ben costruite
Link ambigui
Impatto : 1
Frequenza : 2
Gravità : Seria

Sono presenti link ambigui con la stessa etichetta in più di una occasione, rendendo difficile la navigazione mediante un browser vocale.I link nell'esempio sottostante portano alla medesima pagina ma l'utente non vedente dovrà provarli per conoscere l'esatta destinazione.

Esempio di etichetta ripetuta più volte
Menu dinamici in JavaScript
Impatto : 3
Frequenza : 2
Gravità : Critica

In alcune sezioni del sito come "noleggio auto" possiamo vedere come, disabilitando il javascript, non venga neanche visualizzato il menu con i link alle varie sottosezioni. E' consigliabile in questo caso permettere di accederne ai contenuti anche disattivando il javascript, magari offrendone la possibilità attraverso una sezione separata della pagina dei link.

Eventi mouse
Impatto : 3
Frequenza : 3
Gravità : Critica

Nel sito sono presenti molti menu e link ottenuti tramite javascript, ma non sono presenti attributi come "onfocus" o "onkeypress" quindi in assenza di mouse la navigazione è totalmente compromessa.

Form con redirect
Impatto : 2
Frequenza : 2
Gravità : Seria

All'interno del sito troviamo form che reinderizzano l'utente in pagine esterne senza avvertirlo. Bisognerebbe fare in modo di avvertire l'utente che il link cliccato è collegato ad un sito esterno e dare la possibilità di decidere se proseguire verso il nuovo sito o annullare l'operazione.

Link non separati
Impatto : 0
Frequenza : 0
Gravità : Nessuna

I link sono separati ed il lettore di schermo li legge separandoli, il problema è che ci sono troppi link non strutturati tramite sezioni o liste.

Nuove finestre
Impatto : 3
Frequenza : 2
Gravità : Critica

Molti link del sito reindirizzano l'utente in pagine esterne al sito o comunque in pagine nelle quali il menu di navigazione è completamente diverso, rendendo troppo difficile l'ambientazione e la facilità di navigazione. Un esempio è il link "Assicurazione" che apre una nuova pagina, con comandi visibilmente differenti dalla pagina di origine.

Form senza LABEL
Impatto : 3
Frequenza : 2
Gravità : Critica

L'utente di lettore di schermo non è in grado di usufruire agevolmente delle form, in quanto strutturate in maniera errata poichè prive del tag "Label". Bisognerebbe accoppiare a ciascun form un attributo di tipo LABEL per fare in modo che l'utente riesca a capire su quale form si trova.

Esempio di form prive del tag LABEL
Temporizzazioni troppo brevi
Impatto : 0
Frequenza : 0
Gravità : Nessuna

Non sono presenti refresh

[t] Torna al sommario

BARRIERE NELLA COMPRENSIONE
ASCII art
Impatto : 0
Frequenza : 0
Gravità : Nessuna

Non è presente all'interno del sito testo che serve a rappresentare decorazioni come ad esempio la sequenza dei carattteri "==>" per formare una freccia o la presenza di più caratteri uguali come questi "-----" per creare una linea orizzontale.

Titoli spaziati
Impatto : 0
Frequenza : 0
Gravità : Nessuna

Non sono presenti titoli spaziati all'interno delle pagine analizzate come ad esempio "B E N V E N U T I".

Troppi link
Impatto : 3
Frequenza : 3
Gravità : Critica

Nel sito c'è una presenza massiccia di link non catalogati in modo ottimale. Usando un lettore di schermo infatti ed entrando nel sito, vengono letti troppi links riducendo di gran lunga l'efficacia. Sarebbe consigliabile riuscire a suddividere i link in categorie o sezioni, introducendo magari delle liste separate e titoli ad ogni categoria. I link trovati sono spesso ripetuti più volte nella stessa pagina. Si dovrebbe cercare di organizzare il sito più in verso verticale che quello orizzontale, nel senso che andrebbero sviluppati pochi link inizili partendo da un menù semplice e poco dispersivo. A loro volta le diverse pagine che i collegamenti hanno aperto andrebbero sempre più approfondite migliorando così l'efficacia del sito e rendendolo più usabile.

Tabelle dati
Impatto : 2
Frequenza : 2
Gravità : Seria

Molte tabelle non sono codificate appropriatamente con i tag di intestazione e selezione (TH, SCOPE, HEADERS). La mancanza di questi marcatori porta alla mancata navigazione da parte dell'utente tra le celle che costituiscono la tabella stessa. Per ovviare al problema bisognerebbe dotare la tabella con particolari marcatori. 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 in HTML le celle dati alle correspondenti celle intestazione.

Esempio di tabella non strutturata

Di seguito è riportato il codice di costruzione della tabella. Come si può vedere non compaiono i tag menzionati sopra.

Esempio di codice per la creazione delle tabelle prive dei marcatori
Tabelle di impaginazione
Impatto : 3
Frequenza : 3
Gravità : Critica

Il sito è strutturato tramite tabelle di impaginazione, non tramite css. Il lettore di schermo infatti non capisce l'ordine corretto in cui i link sono presenti nella pagina.

Pagine senza titoli
Impatto : 3
Frequenza : 3
Gravità : Critica

Tutte le pagine hanno un titolo, ma rimane il medesimo per tutte le pagine. Questo provoca la disorientazione dell'utente che non capisce se il contenuto è cambiato. L'esempio che sugue mostra il codice che resta invariato nelle pagine analizzate.

Esempio di pagine avente lo stesso titolo
Marcatura della lingua
Impatto : 3
Frequenza : 3
Gravità : Critica

Lungo il sito non si trovano marcature del linguaggio, in quanto sono assenti gli attributi lang per facilitare la lettura del programma di lettura schermo.

Suddivisione in sezioni
Impatto : 3
Frequenza : 3
Gravità : Critica

Le pagine visitate non contengono tag tipo H1-H2...-H6 per suddividere in sezioni il loro contenuto. Il lettore di schermo non può passare da un contenuto ad un'altro saltando una sezione che non è ritenuto interessante per l'utente ciò rallenta di molto la sua navigazione. Andrebbero quindi aggiunti i tag H1...H6 per ogni tipo di contenuto.

Immagini come titoli
Impatto : 3
Frequenza : 1
Gravità : Critica

All'interno del sito sono presenti immagini come titoli che rendono impossibile all'utente l'identificazione della parte del sito in cui sta navigando, in quanto l'alt non specifica il contenuto della sezione.
Vi sono alcuni casi in cui viene inserita un'ummagine contenente del testo. Andrebbero sostituite queste immagini con del testo ed assegnare loro regole CSS per ottenere il desiderato effetto grafico. In questo modo si eviterebbe di far usare del software di ingrandimento allle persone ipovedenti, poichè tale scritta verrebbe ingrandita solo mediante un utility come ad esempio "ZoomText"

Esempio di immagine contenente un titolo che non è ridimensionabile

[t] Torna al sommario

CONTROLLO DA PARTE DELL'UTENTE
Mancanza di tasti rapidi
Impatto : 3
Frequenza : 3
Gravità : Critica

Mancano i tasti rapidi, l'utente deve per forza muoversi all'interno del sito tramite "tab" rallentando esageratamente i tempi di navigazione. Sarebbe opportuno l'inserimento di opportuni acceskey che permettano la navigazione del sito in maniera più semplice, almeno nei links principali del sito.

Skip links
Impatto : 3
Frequenza : 3
Gravità : Critica

All'interno del sito non è presente alcun "skip link" in quanto non cè nessun link che porta subito al nocciolo del sito, ma bisogna ascoltare l'elenco di tutti i link marginali che sono presenti e ricordarsi eventualmente quello che interessa.

Pagina solo testo
Impatto : 0
Frequenza : 0
Gravità : Nessuna

Il sito non presenta pagine alternative solo con contenuto testuale.

Controlli del browser disabilitati
Impatto : 0
Frequenza : 0
Gravità : Nessuna

Nel sito non sono presenti pagine in cui i controlli browser (back, next, refresh, ecc..) sono disibalitati.

[t] Torna al sommario


Lista di barriere per Utenti ipovedenti

BARRIERE NELLA PERCEZIONE
Immagini ricche malposizionate
Impatto: 3
Frequenza: 2
Gravità: Critica

Le pagine analizzate contengono molte immagini, nella maggior parte dei casi, sono dei collegamenti ad altri pagine del sito. Sono posizinate in ogni parte della pagina, quindi abbiamo riscontrato che quando analizziamo il sito con un ingranditore di schermo spesso le immagini escono fuori dal campo visivo. L'impatto è 3 poichè la maggior parte delle immagini sono fondamentali per raggiungere zone del sito altrimenti inaccessibili.

Immagini ricche incluse nello sfondo
Impatto: 3
Frequenza:2
Gravità: Critica

La maggior parte delle immagini sono caricate mediante il codice HTML e solo in rari casi vengono caricate mediante il css, per ovviare a questo problema bisognerebbe fare in modo che tutte le immagini presenti nel sito siano caricate mediante i tag "IMG" o "OBJECT" che permettono una descrizione dell'immagine.

Contrasto visivo insufficiente
Impatto: 3
Frequenza:2
Gravità: Critica

In molti casi misurando il contrasto visivo tramite un software dedicato, si è riscontrato un insufficienza del contrasto tra colore di sfondo e colore del carattere inoltre in alcune immagini il contrasto non è sufficiente a garantire la sua corretta visualizzazione ad un utente ipovedente. Una soluzione semplice ed efficace è quella di cambiare alcuni colori definiti nel css, impostado in alcune zone colori con un elevato contrasto.

Esempio di contrasto poco elevato tra sfondo e primo piano
Materiale in movimento
Impatto: 1
Frequenza: 2
Gravità: Minore

Nel sito sono presenti immagini in movimento. Spesso le immagini rappresentano una scritta lampeggiante che distogli l'attenzione dell'utente anche se esso e ipovedente. Il modo più semplice per risolvere il problema è quello di evitare di inserire immagini in movimento e limitarsi ad immagini statiche.

[t] Torna al sommario

BARRIERE NELL'UTILIZZAZIONE
Immagini funzionali in sfondo
Impatto: 1
Frequenza: 2
Gravità: Minore

Immagini funzionali prive di testo
Impatto: 1
Frequenza: 2
Gravità: Critica

Sono state torvate delle immagini funzionali prive di testo alterativo, bisognerebbe includere l'attributo ALT per la descrizione dell'immagine.

Menu dinamici in JavaScript
Impatto: 1
Frequenza: 2
Gravità: Minore

Vi sono rari casi di menu dinamici, e nei casi esistenti la presenza non è grave da pregiudicare all'utente ipovedente la fruizione del sito.

Mancanza di link interni
Impatto: 1
Frequenza: 2
Gravità: Minore

Vi sono pochi collegamenti interni. Non vi è alcun collegamento per andare ad una data sezione della pagina ne un link per tornare all'inizio. Una soluzione veloce ed efficace potrebbe essere nell'applicare a tutte le pagine un link che riporti l'utente all'inizio della pagina.

Form con redirect
Impatto: 2
Frequenza: 2
Gravità: Seria

Sono presenti form, che reindirizzano il sito verso un'altro. L'utente non viene avvisato, e si ritrova in un ambiente diverso senza averlo richiesto.

Form ampie
Impatto: 1
Frequenza: 2
Gravità: Minore

In alcuni casi sono presenti delle form su più di una colonna ma non tali da pregiudicare l'utilizzazione del sito.

Finestre sovrapposte
Impatto: 0
Frequenza: 0
Gravità: Nessuna

Nelle pagine analizzate non abbiamo riscontarto sovrapposizione di finestre. In alcuni casi però i link portavano all'apertura di una nuova pagina, e l'utente non veniva avvertito. Si dovrebbe avvertire l'utente che il contesto e la pagina è cambiata e dargli il modo di poterla chiudere.

Temporizzazioni troppo brevi
Impatto: 0
Frequenza: 0
Gravità: Nessuna

Non sono presenti refresh

[t] Torna al sommario

BARRIERE NELLA COMPRENSIONE
Troppi link
Impatto: 2
Frequenza: 2
Gravità: Seria

Nel sito c'è una presenza massiccia di link non catalogati in modo ottimale. Usando un lettore di schermo infatti ed entrando nel sito, vengono letti troppi links riducendo di gran lunga l'efficacia. Sarebbe consigliabile riuscire a suddividere i link in categorie o sezioni, introducendo magari delle liste separate e titoli ad ogni categoria. I link trovati sono spesso ripetuti più volte nella stessa pagina. Si dovrebbe cercare di organizzare il sito più in verso verticale che quello orizzontale, nel senso che andrebbero sviluppati pochi link inizili partendo da un menù semplice e poco dispersivo. A loro volta le diverse pagine che i collegamenti hanno aperto andrebbero sempre più approfondite migliorando così l'efficacia del sito e rendendolo più usabile.

Immagini come titoli
Impatto: 1
Frequenza: 2
Gravità: Minore

Vi sono alcuni casi in cui viene inserita un'ummagine contenente del testo. Andrebbero sostituite queste immagini con del testo ed assegnare loro regole CSS per ottenere il desiderato effetto grafico. In questo modo si eviterebbe di far usare del software di ingrandimento allle persone ipovedenti, poichè tale scritta verrebbe ingrandita solo mediante un utility come ad esempio "ZoomText"

Esempio di immagine contenente un titolo che non è ridimensionabile

[t] Torna al sommario

CONTROLLO DA PARTE DELL'UTENTE
Righe di testo lunghe
Impatto: 1
Frequenza: 2
Gravità: Minore

Non sono state trovate righe eccessivamente lunghe.

Mancanza di tasti rapidi
Impatto: 1
Frequenza: 3
Gravità: Seria

L'uso di tasti rapidi risulta del tutto assente nel sito.

Testo non ridimensionabile
Impatto: 1
Frequenza: 2
Gravità: Minore

Nel CSS è stato riscontrato l'uso di unità di misura assolute come px e pt. L'utente ipovedente che sfrutta l'opzione del browser per ingrandire il testo (ctrl++;ctrl--), in molti casi si trova nella situazione in cui il testo non viene correttamente visualizzato all'interno della tabella, costringendolo ad usare programmi esterni per ingrandire lo schermo. Si ricorda che l'opzione implementata dal browser per ingrandire, agisce solamente sul testo e non sulle immagini. Pochè nel sito è presente una grande quantità di immagini sarebbe comunque opportuno che l'utente facesse uso di software dedicato per agevolarsi nella lettura.

Layout non ridimensionabile
Impatto: 2
Frequenza: 2
Gravità: Seria

Si è riscontrato durante l'analisi del sito che le tabelle non vengono ridimensionate se viene ingrandito il testo. Questo porta ad una difficile lettura del loro contenuto poichè per ingrandimenti molto elevati il testo risulta completamente illeggibile. Si consiglia agli utenti ipovedenti di non esagerare con l'ingrandimento visto che non essendo ridimensionabile anche il campo, molte informazioni andrebbero perse se l'ingrandimento risultasse troppo eccessivo.

Esempio di mene con testo ingrandito ma layout uguale
Skip links
Impatto: 1
Frequenza: 3
Gravità: Seria

Questo sito presenta una quantità notevole di collegamenti senza un'opportuna suddivisione in sezioni o liste, rendendo quindi impossibile all'utente il raggiungimento al contenutoto primario del sito. Gli skip links infatti sono assenti.

Controlli del browser disabilitati
Impatto: 0
Frequenza: 0
Gravità: Nessuna

Nel sito non sono presenti pagine in cui i controlli browser (back, next, refresh, ecc..) sono disibalitati.

[t] Torna al sommario

Lista di barriere per Utenti daltonici

BARRIERE NELLA PERCEZIONE
Colore essenziale
Impatto: 3
Frequenza: 2
Gravità: Critica

L'uso del colore all'interno del sito per evidenziare possibili link o immagini, spesso non è accompagnato da nessun'altra forma di evidenza; la maggior parte dei link non presenta alcuna sottolineatura quando vengono selezioinati. Non viene inoltre usata alcuna distinzione fra link da visitare e link già visitato.

Esempio di menu privo di sottolineatura per i link e con scarso contrasto visivo
Contrasto visivo insufficiente
Impatto: 2
Frequenza: 2
Gravità: Seria

In molti casi misurando il contrasto visivo tramite un software dedicato, si è riscontrato un insufficienza del contrasto tra colore di sfondo e colore del carattere inoltre in alcune immagini il contrasto non è sufficiente a garantire la sua corretta visualizzazione ad un utente ipovedente. Una soluzione semplice ed efficace è quella di cambiare alcuni colori definiti nel css, impostado in alcune zone colori con un elevato contrasto.

Esempio di contrasto poco elevato tra sfondo e primo piano

[t] Torna al sommario

Conclusioni

Mediante la simulazione da noi effettuata abbiamo riscontrato che il sito presenta più lacune che andrebbeò ad intaccare l'usabilità se l'utente finale che andrebbe a visitare il sito fa parte di una delle categorie da noi prese in esame. L'utente non vedente infatti non potrà approfondire le proprie conoscenze poichè è stata notata una bassa descrizione delle immagini, inoltre non essendoci meccanismi di selezionamento rapido la navigazione viene compromessa. Gli utenti ipovedenti invece avranno grosse difficoltà nel visionare alcune parti del sito che non possono essere ingrandite con i tasti funzione del Browser (es. CTRL+). Di conseguenza è consigliabile l'uso di un ingraditore di testo (ex. ZoomText), che nelle prove da noi eseguite è stato uno strumento molto utile, grazie alla possibilità di ingrandire non solo il testo ma anche le immagini. Sono presenti due barriera per gli utenti daltonici, esse non sono da sottovalutare in quanto può limitare totalmente alcune funzionalità del sito. Si consiglia di sistemare al più presto il contrasto dei colori sopratutto per quanto riguarda i menu presenti nella home page ed i link.

[t] Torna al sommario

Valid HTML 4.01! Valid CSS! Level Double-A conformance icon,W3C-WAI Web Content Accessibility Guidelines 1.0