Relazioni per il corso di Laboratorio Progettazione Siti Web
Autori: Luca de Ruvo, Henry Bonamigo

Regione Puglia - Simulazione Euristica

Sommario

  1. Metodologia
  2. Pagine analizzate
  3. Tabella riassuntiva delle barriere e dei problemi incontrati
  4. Conclusioni

Metodologia

Per la simulazione sulle pagine abbiamo preso in esame la prospettiva di utilizzo del sito web della regione Puglia da parte di soggetti non vedenti utilizzatori di browser vocali (nella fattispecie Home Page Reader), ipovedenti che si appoggiano ad ingranditori di schermo e ad utilizzatori di browser testuali. Abbiamo deciso di classificare le barriere incontrate in livelli di gravitÓ, che sono derivati dall'impatto e dalla frequenza della barriere stesse.
L'impatto varia tra i valori numerici 1 e 3, secondo i seguenti criteri:

  1. il problema pu˛ essere notato dall'utent, per lui Ŕ facile aggirarlo e non influisce sul raggiungimento degli obiettivi
  2. il problema Ŕ complicato da risolvere per l'utente, pu˛ richiedere molto tempo per essere aggirato e pu˛ impedire il raggiungimento dell'obiettivo
  3. il problema Ŕ impossibile da aggirare, l'impatto negativo comporta il mancato raggiungmento dello scopo

Anche la frequenza varia tra i valori 1 e 3, in questo modo:

  1. il problema non si manifesta sempre e pu˛ non incidere sullo svolgimento del compito
  2. il problema si presenta ogni volta durante lo svolgimento del compito incidendo sulla soddisfazione dell'utente
  3. il problema si verifica pi¨ di una volta mentre si svolge un compito facendo calare la produttivitÓ

Per calcolare i livelli di gravitÓ siamo ricorsi a questa tabella:

impatto frequenza gravità
1,2,3 0 nessuna
1 1 bassa
1 2 bassa
1 3 media
2 1 media
2 2 media
2 3 alta
3 1 alta
3 2 alta
3 3 alta

E per finire abbiamo riassunto la gravitÓ della barriere nei seguenti livelli:

  1. gravità bassa: l'utente pu˛ accorgersi della barriera nello svolgimento del suo compito e in questo caso Ŕ in grado di aggirarla e raggiungere completamente i suoi obiettivi
  2. gravità media: la barriera impedisce all'utente di raggiungere l'obiettivo con facilitÓ; egli Ŕ costretto a spendere tempo per capire come aggirarla
  3. gravità alta: la barriera porta l'utente a compiere molti errori, che Ŕ frustrato perchŔ non riesce a portare a perseguire i suoi obiettivi

Pagine analizzate

  1. Home Page
  2. Struttue regionali
  3. CIFRA - Segreteria della giunta regionale
  4. Opere pubbliche
  5. Relazioni con il pubblico
  6. il presidente

Tabella riassuntiva delle barriere e dei problemi incontrati

Barriere alla Pecerzione

impatto frequenza gravità

Immagini ricche senza alt

Un utente non vedente di un lettore di schermo che non percepisce le informazioni presenti in un diagramma, istogramma, foto, organigramma. La causa Ŕ la mancanza di un'appropriato testo collegato all'immagine (alt, longdesc, D-link, testo adiacente all'immagine).

3 0 nessuna

Immagini ricche mal posizionate

Utente ipovedente di un ingranditore di schermo che non vede l'immagine (diagramma, istogramma, foto, organigramma) perchŔ plausibilmente posizionata al di fuori del campo visivo. La causa Ŕ il cattivo posizionamento dell'immagine, senza nessun indizio che faccia capire la sua presenza.

In alcune pagine del sito (ad esempio nella Home Page) le informazioni vengono disposte su tre colonne; in questo caso l'utente che utilizza un ingranditore di schermo pu˛ non accorgersi della presenza delle immagini sulla destra dello schermo perdendo le funzionalitÓ che queste convogliano essendo veri e propri collegamenti ad altre sezioni del sito.
2 1 media

Immagini ricche incluse nello sfondo

Talvolta immagini vengono incluse nello sfondo della pagina mediante proprietÓ CSS. In tali casi non Ŕ possibile specificare testo alternativo, e lettori di schermo o browser vocali non permettono all'utente nemmeno di percepire la presenza di tale immagine.

3 0 nessuna

No didascalie

Utente sordo che non percepisce la narrazione a voce in un file multimediale. La causa Ŕ l'assenza di sottotitoli, didascalie o di una trascrizione completa.

2 0 nessuna

No sincronizzazione

Utente sordo che non percepisce la narrazione a voce in un file multimediale mentre il video scorre. La causa in questo caso pu˛ essere anche data dalla mancanza di appropriata sincronizzazione tra audio-video e trascrizioni testuali (sottotitoli, didascalie).

2 0 nessuna

Colore

Utente daltonico che Ŕ incapace di capire la differenza tra due elementi informativi che si differenziano solo dal colore (e.g. due righe di una tabella che riporta le quotazioni di azioni di borsa).

Prendendo come esempio la Home Page, i titoli dei comunicati sono distinguibili dal testo normale sono in base al colore e alla grassettatura. Per l'utente di lettore di schermo questa differenziazione e nulla e per aiutarlo bisognerebbe identificarli con marcatori appropriati come <h3> o <fieldset>.
2 2 media

Contrasto

Utente ipovedente che non riesce a distinguere chiaramente le informazioni in primo piano dallo sfondo (perchŔ quest'ultimo Ŕ un'immagine o perchŔ il contrasto cromatico o luminoso tra i due componenti non Ŕ sufficiente).

3 0 nessuna

Frame

L'utente non vedente che utilizza una vecchia versione del lettore di schermo (es. Jaws 3.5) non riesce ad accedere al contenuto dei frame (se presenti nella pagina).

3 0 nessuna

Movimento

Titoli lampeggianti o oggetti in movimento possono non essere percepiti da utenti con problemi visivi (diversi da ipovedenti).

2 0 nessuna

Ascii art

Un utente cieco di un lettore di schermo che non capisce cosa significa la frase "uguale uguale parentesi angolare destra" pronunciata da un lettore di schermo a fronte del testo ==> trovato sulla pagina.

In molte sezioni del sito vengono usati i caratteri "|" come separatore e "@" nelle espressioni tipo "Mer, 12 Aprile 2006 @ 13:58:16".
Inoltre nel testo pu˛ capitare di trovare numerazioni scritte con numeri romani (ad esempio XVI, o addirittura III░): la pronuncia di questi caratteri da parte del browser vocale pu˛ creare confusione all'utente.
2 1 media

Titoli spaziati

Un utente cieco di un lettore di schermo che non comprende cosa significa la frase "bi e enne vi e enne u ti i" pronunciata dal lettore di schermo a fronte di un titolo nella pagina "B E N V E N U T I" formattato con spazi artificiali tra le lettere.

3 0 nessuna

Barriere all'Utilizzazione

impatto frequenza gravità

Immagini funzionali senza alt

Immagini funzionali (e.g. pulsanti) prive di ALT che non permettono ad un utente cieco di un lettore di schermo di sapere che link attivare. Analogamente per pulsanti Flash.

Manca il testo alternativo ad alcune immagini molto importanti, come quelle che fungono da bottone cerca nel form di ricerca che è presente in ogni pagina del sito; ecco come viene presentato da un browser testuale il form di ricerca che invece di due bottoni usa le due immagini senza descrizione testuale:

"_____________ [IMAGE]-SUbmit [IMAGE]-Submit"

L'utente pu˛ solo immaginare di fare una ricerca ma senza sapere cosa differenzia i due submit.
Inoltre nella pagina relazioni con il pubblico la mancanza di un alternativa testuale all'immagine con riportato il numero verde per le informazioni diventa critica perchŔ tale numero non Ŕ ripetuto in altre parti del testo e questo ne preclude la conoscenza agli utilizzatori di tecnologia assistiva o di browser testuali.

3 3 alta

Link generici

Link con etichette non informative (e.g. "clicca qui") che non permettono ad un utente cieco di un lettore di schermo di selezionare il link corretto quando viene usata la funzione link list.

Prendendo come esempio la Home Page, in questa sono presenti numerosi comunicati; di ognuno, oltre al titolo, viene presentato un breve estratto del testo. Per la lettura del testo completo del singolo comunicato l'utente deve cliccare sul link "continua...". Per un utente generico questi collegmenti hanno senso perchŔ vengono associati al relativo comunicato, ma per un utente che fruisce la pagina tramite un lettore di schermo utilizzando la funzione link list non avrebbe nessun senso sentire una lunga serie di link come questa:
"continua..." "Comunicati stampa" "segnala questa pagina..." "Versione stampabile"
"continua..." "Comunicati stampa" "segnala questa pagina..." "Versione stampabile"
"continua..." "Comunicati stampa" "segnala questa pagina..." "Versione stampabile"...
3 3 alta

Link ambigui

Link con diversa destinazione che hanno la stessa etichetta (e.g. ripetizioni di link "Buy" per vari prodotti) che non permettono ad un utente cieco di un lettore di schermo di selezionare il link corretto quando viene usata la funzione link list.

I collegamenti "Prima pagina" e "Home" riconducono entrambi alla home page del sito web; in realtÓ per un errore nella sintassi html questi collegamenti non funzionano correttamente, tecnicamente puntano alla pagina attuale e in pratica un utente normale non nota nessun cambiamento nella pagina, mentre ad un utente di lettore di schermo verrebbe "letta" da capo la pagina in cui si trova. In entrabi i casi se l'utente volesse tornare alla pagina iniziale, sarebbe costretto a muoversi utilizzando il tasto indietro del browser oppure le breadcrumbs (dove presenti).
3 3 alta

Rollover in JavaScript

Rollover che aggiungono men¨ alla pagina. Essi non permettono ad un utente di un browser privo di interprete JavaScript (e.g. perchŔ JavaScript Ŕ stato disabilitato per motivi di sicurezza, o perchŔ si tratta di un micro-browser di palmare) di vedere il men¨ e quindi di attivarne i comandi.

3 0 nessuna

Modifiche dinamiche

Rollover che aggiungono men¨ alla pagina. Essi non permettono ad un utente ipovedente di un ingranditore di schermo di percepire la modifica al documento (perchŔ presumibilmente fuori dal suo campo visivo) e quindi di utilizzare i comandi del men¨.

3 0 nessuna

Eventi mouse

Eventi JavaScript che si attivano solo tramite gestori di eventi dipendenti esclusivamente dal mouse. Un utente ipovedente di un ingranditore di schermo non potrÓ attivare dei men¨ a cascata: non appena scorre sul men¨ del primo livello e sceglie una voce che apre un men¨ di scondo livello, e deve scorrere verso destra lo schermo, il secondo men¨ scompare.

3 0 nessuna

Form popolata automaticamente

Form in cui alcuni dei campi/controlli sono automaticamente modificati da programma (via JavaScript). Ci˛ non permette ad un utente di un browser privo di interprete JavaScript di usare la form.

3 0 nessuna

Validazione controlli

Form in cui i valori immessi vengono validati esclusivamente dal browser (via JavaScript). Ci˛ pu˛ causare molto pi¨ facilmente delle immissioni di dati errati da parte dell'utente di un browser privo di interprete JavaScript.

2 0 nessuna

Form ampie

Form strutturate su una vasta area dello schermo possono creare problemi a utenti ipovedenti che non riescono a comprendere la struttura nella sua interezza.

2 0 nessuna

Campi nascosti in JavaScript

Similmente per form che usano JavaScript per calcolare dei valori di campi nascosti (ad es. per comunicare determinate informazioni di servizio al server, o per pseudo-sicurezza).

1 0 nessuna

Aggiornamenti e focus

Contenuti che vengono aggiornati automaticamente e modificano ogni volta il focus del lettore di schermo; questo rende difficile la navigazione di un utente non vedente che non riesce a raggiungere il contenuto che gli interessa (in quanto Ŕ obbligato a sentire sempre le stesse informazioni).

3 0 nessuna

Nuove finestre popup

Finestre pop-up che fanno sÝ che un utente cieco di un lettore di schermo non capisca che il contesto Ŕ cambiato, modificando sia il contenuto che viene letto sia i possibili comandi immettibili.

Non sono presenti vere e proprie finestre popup ma molti collegamenti aprono una nuova finestra senza avvisare l'utente. Inoltre due dei primissimi collegamenti ipertestuali della Home Page denominati "Il Nuovo Statuto della Regione Puglia" e "Dichiarazioni programmatiche" sono realtÓ dei collegamenti a dei file pdf. Attivarli significa avviare la relativa applicazione per l'apertura del documento con il conseguente cambio di contesto.
3 1 alta

Finestre sovrapposte

Finestre pop-up che fanno sÝ che un utente ipovedente di un ingranditore di schermo non riconosca che la scroll bar che vede sia quella della finestra nello sfondo. Quando ci clicca sopra (con l'intenzione di scorrere il contenuto della finestra pop-up in primo piano), ottiene come risultato lo scambio delle due finestre e quella di pop-up, che l'utente stava esaminando, passa dietro, senza permettergli di capire cosa sia successo.

2 0 nessuna

Lentezza finestre popup

Finestre pop-up che rallentano un utente con difficoltÓ motorie (perchŔ deve muovere il mouse sul pulsante, piccolo, di chiusura della finestra in alto a destra, nella barra del titolo). Ancora peggio se tali finestre si aprono ogni volta che si ritorna alla home page.

2 0 nessuna

Form senza label

Controlli di una form privi di associazione con le loro etichette (i.e. mancanza di label/for), che fanno sÝ che un utente cieco di un lettore di schermo non capisca come usare alcuni dei controlli (e.g. perchŔ tutte le etichette vengono lette una dopo l'altra e poi segue la lettura di tutti i controlli, uno dopo l'altro -- nel caso di una form impaginata con una tabella il cui contenuto non si linearizza correttamente).

L'utente di un browser vocale a cui viene presentato il campo di testo all'inizio delle pagine pu˛ solo intuire che serva per la ricerca in quanto questo Ŕ sprovvisto di etichetta descrittiva.
2 3 alta

Temporizzazioni troppo brevi

Form o comportamento del server tali per cui un utente che ci mette pi¨ tempo del previsto per svolgere una determinata azione (ad es. consultare una pagina e successivamente premere un pulsante "accetto") si trova nella situazione di non poter procedere perchŔ il sistema ha cambiato stato di propria iniziativa.

3 0 nessuna

Barriere alla Comprensione

impatto frequenza gravità

Tabelle dati

Tabelle dati (e.g. orari di autobus) non codificate appropriatamente (con TH, scope, headers) che non permettono ad un utente cieco di un lettore di schermo di navigare tra le celle delle tabelle in modo che gli venga ricordato il significato di ciascuna cella (leggendo anche le intestazioni della cella).

E' emblematica la tabella presente nella sezione "Sedute Giunta Regionale" CIFRA - Segreteria della giunta regionale Mancanza degli identificatori di colonna a parte, i dati non vengono incapsulati in singole celle, ma incolonnati con una serie di rinvio a capo (<br>). Così facendo, per l'utente di lettore di schermo la presentazione dei dati si traduce in un enorme fallimento di comprensione dei dati in quanto gli verrebbero letti tutti i dati della prima colonna, poi tutti quella della seconda e così via.
3 1 alta

Tabelle di impaginazione

Tabelle di impaginazione (gabbie grafiche) le quali, una volta che vengano linearizzate (cioŔ sostituite dal loro contenuto, togliendo la struttura a tabella, e procedendo dall'alto verso il basso, e da sinistra verso destra -- per noi occidentali), producono un ordine degli elementi che non Ŕ quello logico, e che quindi confonde l'utente di un lettore di schermo.

3 0 nessuna

Titoli

Pagine prive di titolo (o con titolo non informativo, come "Untitled document"), che fanno sÝ che utenti ciechi di lettori di schermo non capiscano su che pagina sono arrivati.

La maggioranza della pagine ha sempre lo stesso titolo "QUIregione" . Fortunatamente buona parte delle pagine è fornita delle breadcrumbs, le "briciole d pane" che indicano la posizione attuale e il percorso che conduce alla stessa.
3 3 alta

Lingua

In un sito privo dell'attributo lang, che specifica la lingua in cui il testo a scritto, un lettore di schermo utilizzato da utenti non vedenti non Ŕ in grado di risalire alla lingua a cui appartengono le parole incontrate, e quindi non sarÓ in grado di leggerle in modo corretto. Anche se il lettore Ŕ impostato per la lingua italiana, se incontra una parola straniera priva di attributi che ne specifichino la lingua, non la legge correttamente.

Non viene specificata la lingua di lettura per il documento e nemmeno quello per la corretta pronuncia di parole straniere.
1 3 media

Titoli frame

Frame privi di un nome coerente con il loro contenuto fa sý che utenti non vedenti che utilizzano un lettore di schermo possano essere disorientati.

2 0 nessuna

Suddivisione in sezioni

Pagine contenenti molto materiale, magari eterogeneo (come ad es. barre di navigazione, indici, news, ...) e prive di una loro suddivisione esplicita in gruppi usando i marcatori H2, fieldset, ... rendono complessa la loro consultazione. Un utente di un lettore di schermo potrebbe non rendersi conto di essere in una sezione non interessante. Questo Ŕ particolarmente grave quando l'utente esplora la pagina per cercare una determinata informazione.

Le pagine del sito web sono completamente sprovviste dei marcatori per l'identificazione dei titoli e dei paragrafi rendendo complicata, se non impossibile, la rapida esplorazione della pagina ad un utente che utilizza tecnologia assistiva.
3 3 alta

Immagini come titoli, non comprensibili

Talora Ŕ possibile vedere pagine web che usano immagini per presentare titoli di sezioni della pagina. Un utente di un lettore di schermo non potrÓ capire quel titolo a meno che l'immagine non sia corredata di testo alternativo nell'attributo ALT.

Nella pagina Canali le icone sono i link per le sotto-sezioni e sono sprovviste dell'attributo alt: fortunatamente ogni immagine è seguita dal testo con il titolo della sotto-sezione e questo sembra fondamentale anche per un utente comune in quanto le icone non riescono sempre a convogliare il significato a cui sono associate.
2 2 media

Immagini come titoli, non ingrandibili

Utente ipovedente non potrÓ ingrandire il testo del titolo che Ŕ codificato come un'immagine (quindi rappresentato come dei pixel); egli dovrÓ per forza usare un ingranditore di schermo per poterla ingrandire, con la conseguenza di ridurre il suo campo visivo, e quindi l'efficacia e l'efficienza con cui usa il sito web.

Nessuna immagine presente sul sito web Ŕ ridimensionabile.
1 3 media

Barriere al Controllo da parte degli Utenti

impatto frequenza gravità

Access key

Mancanza di tasti rapidi (access key) che fanno sÝ che disabili motori non possano attivare certi link in maniera rapida e sicura.

2 0 nessuna

Troppi link

Troppi link nella pagina, che fanno sÝ che utenti ipovedenti di un ingranditore di schermo impieghino tanto tempo e fatica a trovare il link che cercano.

Nel solo menu di sinitra sono presenti ben 45 collegamenti ipertestuali; se poi se ne aggiungono i 48 presenti nella colonna di destra nella home page il numero diventa spropositato. I progettisti del sito hanno cercato di raggrupparli in categorie ma non sempre Ŕ chiaro a cosa ogni link punti e non Ŕ assolutamente immediato rintracciarli. Sarebbe opportuno presentare all'utente solo i nomi delle sezioni principali: poi l'utente sceglierÓ la sezione che reputa pi¨ appropriata e in una seconda pagina troverÓ le sotto-sezioni che gli permetteranno di proseguire verso la pagina desiderata (seguendo una logica di diramazione ad albero).
3 3 alta

Testo non ridimensionabile

Testo che non Ŕ ridimensionabile, che non permette ad un utente ipovedente di usare la pagina anche senza ingranditore di schermo.

3 0 nessuna

Layout non ridimensionabile

Layout della pagina non ridimensionabile, che non permette ad un utente ipovedente di un ingranditore di schermo di incrementare la dimensione della finestra o del testo senza scompaginare l'impaginazione in maniera tale da comprometterne la comprensione.

2 0 nessuna

Skip links

Mancanza di skip links nascosti che fanno sÝ che utenti non vedenti di lettori di schermo non possano velocemente saltare il materiale preliminare di una pagina.

Il menu sulla sinistra presenta moltissimi link, che se ascoltati con un browser vocale diventano un lungo elenco di collegamenti. Considerando che questo men¨ é presente in ogni pagina del sito, ad un utente di Home Page Reader o di Jaws (ma volendo anche di un browser testuale) per arrivare al contenuto vero e proprio della pagina è necessario oltre un minuto per l'ascolto di tutte le voci. Sarebbe auspicabile l'uso di uno skip link che porti direttamente al contenuto principale della pagina.
3 3 alta

Versione solo testo

La versione testuale del sito non aggiornata e non contenente tutte le informazioni disponibili nella versione grafica pu˛ portare gli utenti che, per vari motivi hanno deciso di utilizzarla, a credere che il sito sia carente di contenuto.

1 0 nessuna

Controlli del browser disabilitati

Le finestre che vengono aperte dal browser (non per iniziativa dell'utente) e che sono prive degli usuali controlli, come il tasto "indietro", "ricarica", "home", barra dell'URL, rende pi¨ difficile e faticosa la ricerca del link "indietro" da parte di un utente di ingranditore di schermo, il quale si trova costretto ad esplorare tutta la finestra per trovarlo.

2 0 nessuna

Conclusioni

Se per un utente normale la navigazione del sito web della regione puglia pu˛ risultare semplice, questo non si traduce in un esperienza appagante per gli utilizzatori di tecnologia assistiva o di browser testuali: i maggiori problemi riscontrabili da questi ultimi sono il grandissimo numero di collegamenti presenti nel menu di sinistra che rimane fisso in quasi tutte le pagine del sito e la mancanza di opportuni skip links atti ad evitare la lettura di questa lista di link all'apertura di ogni nuova pagina, la mancanza di una descrizione appropriata per il campo di ricerca, la presenza di link generici e di una tabella veramente mal realizzata nella sezione Segreteria della giunta regionale

validxhtmlvalidcss