Laboratorio progettazione siti web

Liguria:Simulazione Euristica

Introduzione

La simulazione euristica è un metodo sperimentale sviluppato dal Professor Giorgio Brajnik per permettere ai valutatori di eseguire indagini sull'accessibilità di un sito web. Questo metodo nasce per consentire ai valutatori di evidenziare delle barriere d'accessibilità che possono incidere in modo negativo sulla navigazione da parte di utenti disabili o di utenti che utilizzano tecnologie disabilitanti. Viene considerato barriera tutto quello che può infastidire o addirittura compromettere la navigazione di un sito web. Una barriera viene descritta in termini di:

  • il tipo di utente e di disabilità
  • il tipo di tecnologia assistiva
  • il fallimento, ovvero l'attività che viene ostacolata dalla barriera.
  • le caratteristiche della/e pagina/e che erigono la barriera.
La simulazione euristica include la scelta di una determinata situazione d'uso, la scelta di una o più categorie di disabili di cui tenere conto ed infine la verifica della presenza o meno delle barriere d'accessibilità che corrispondo allo scenario e agli utenti disabili scelti. Quando una barriera viene accertata, il valutatore prosegue valutando l'impatto e la frequenza di tale barriera che corrisponde ad un livello di gravità. L'accessibilità di un sito web fa riferimento alla sua capacità di essere fruibile da persone disabili. In particolare un sito accessibile deve poter essere percepibile, comprensibile e utilizzabile indipendentemente da limitazioni tecnologiche, psicologiche o fisiche dei visitatori. Maggiori informazioni su questo tipo di simulazione euristica si possono trovare nelle pagine del corso di Progettazione Siti Web (http://www.dimi.uniud.it/wq/metodo-barriere.html) del professor Giorgio Brajnik dedicate all'argomento.

Pagine analizzate:

Per l'analisi della simulazione euristica del sito della Regione Liguria sono state prese in considerazione le seguenti pagine:

Le pagine analizzate presentano tutte un layout simile formato da un'intestazione e da un riquadro centrale. L'intestazione contiene il logo della regione ed il titolo della pagina, ed è costituita da due barre contenenti i link alle altre pagine del sito, poste sopra e sotto un'immagine puramente decorativa (la barra sopra ospita i link di servizio ed informativi, mentre la barra sotto ospita il menù contenente i link alle 6 sezioni principali del sito). Nel riquadro centrale, vengono visualizzate alcune notizie di particolare interesse con i relativi link diretti agli articoli accennati per quel che riguarda la home page, mentre per tutte le altre pagine, in questa parte viene visualizzato il contenuto dei vari articoli e notizie.

Assegnazione di livelli di gravità ai problemi.

Ogni pagina è stata analizzata e sono state evidenziate le possibili barriere indicando sia l'impatto che queste possono avere sulla navigazione sia la frequenza con cui si ripetono all'interno del sito.

Per valutare la gravità di un problema di usabilità, vengono considerati due parametri, l'impatto che un problema può avere sull'efficacia, produttività e sicurezza di un utente che sta svolgendo un determinato compito in una determinata situazione operativa e la frequenza con cui quel problema si presenta all'utente durante lo svolgimento di quel compito. Viene usata una scala da 1 a 3 (3 per l'effetto peggiore) associata sia all'impatto che alla frequenza del problema. Dopodiché si utilizza la seguente tabella per calcolare la gravità di un problema che permette di distinguere tra problemi minori, seri e critici.

Tabella riassuntiva dei livelli di 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

Per quanto riguarda l'impatto, i valori vengono assegnati usando i seguenti criteri di massima:

  • 1. la presenza del problema viene notata dall'utente considerato, ma ci sono facili modi per aggirarla od evitarla. Esso non incide significativamente sulle capacità dell'utente di raggiungere con successo il termine del compito. Può invece incidere sull'efficienza con cui l'utente svolge il compito e/o sulla sua soddisfazione.
  • 2. la presenza del problema è notata ed incide significativamente sull'efficacia e/o sicurezza. L'utente non riesce ad aggirarlo facilmente, o ad evitarlo. Per uscire dalla situazione problematica l'utente può necessitare di notevole tempo, vari tentativi e ingegno. Il problema rende difficile, faticoso e/o rischioso il proseguimento del compito, ed è facile che l'utente compia degli errori. Il problema incide sicuramente e marcatamente su efficacia e/o sicurezza.
  • 3. si tratta di una barriera che porta molto spesso a rinunciare al raggiungimento dello scopo: gli errori possono essere molti e con gravi conseguenze; vie alternative non esistono. L'impatto negativo su efficacia e sicurezza è elevato.

Per la frequenza (riferita al numero di volte in cui il problema compare durante l'esecuzione di un compito) invece i valori possono essere:

  • 1. il problema si manifesta raramente e non sempre durante lo svolgimento del compito; in pochi e marginali casi esso si manifesta. Dunque esso incide in maniera molto limitata sulla produttività e sulla soddisfazione.
  • 2. il problema si verifica ogni volta che si svolge quel compito. Può incidere significativamente su produttività e su soddisfazione.
  • 3. il problema si verifica più volte durante lo svolgimento del compito. Sicuramente incide sulla produttività, facendola calare marcatamente; e altrettanto di sicuro incide sulla soddisfazione.

Categorie di utenti disabili e scenari d'uso.

Le categorie di utenti considerate per la simulazione euristica sono:

Utente ipovedente

Francesco è un professore di 50 anni con medie conoscenze dell'uso del computer e di internet, che utilizza per alcune ore a settimana solamente per motivi personali. Sul suo PC è installato Windows Xp, utilizza Opera versione 8.5 come browser e l'ingranditore di schermo ZoomText.

Utente non vedente

Martina è una studentessa universitaria di 22 anni, non vedente che utilizza il lettore di schermo Home Page Reader. Conosce bene il computer e si connette ad Internet quasi tutti i giorni per motivi di studio. Su suo PC portatile è installato Windows Xp con Internet Explorer versione 6.0 come browser.

La simulazione è stata effettuata utilizzando Opera versione 8.5 (e relative opzioni, quali: no immagini, no foglio di stile, disattiva tabelle, emula browser testuale e anche come ingranditore di schermo), il lettore di schermo Home Page Reader versione 3.04 e l'ingranditore di schermo ZoomText versione 9.0.

Lista delle barriere

Lista delle barriere per utenti non vedenti.

Categoria di utenti: Utenti di lettori di schermo o di browser parlanti; utenti di barre Braille; tipicamente ciechi, talvolta ipovedenti. Questa categoria potrebbe includere anche utenti vedenti ma costretti ad usare qualche tecnologia disabilitante: browser che non visualizzano immagini, portali vocali

Lista delle barriere per utenti non vedenti.

Categoria di utenti: Utenti ipovedenti di ingranditori di schermo; talvolta utenti degli strumenti di accessibilità offerti direttamente dal sistema operativo. Questa categoria potrebbe includere anche utenti disabilitati da tecnologie quali cellulari e PDA con schermi ridotti, con una ridotta possibilità di interagire.

Analisi delle barriere

Barriera 1 – Immagini ricche senza testo alternativo
Ad ogni immagine presente nel sito viene associato un testo equivalente e comprensibile tramite l'utilizzo dell'attributo alt. In alcuni casi però, come ad esempio nel immagine illustrata qui sotto, dove viene usata un'immagine per il titolo "Scuola e formazione", vengono utilizzate più immagini messe vicine (una per ogni carattere), e solamente le immagini rappresentanti le due parentesi quadre contengono l'attributo alt con il valore "Scuola e formazione", mentre le immagini rappresentanti gli altri caratteri sono sprovviste di alt.
Immagine che evidenzia un'errore nell'uso dell'attributo alt

L'inconveniente sta nel fatto che un utente che usa un lettore di schermo si sente ripetuto "Scuola e formazione" due volte (una per ogni parentesi quadra). Questa particolare procedura viene usata per tutti i titoli simili in molte altre pagine del sito.

Soluzione: sarebbe più opportuno e semplice utilizzare un'unica immagine raffigurante il titolo provvista del suo attributo

alt="Scuola e formazione"
Barriera 2 – Mancanza di didascalie del video
Nessuna delle pagine prese in esame contengono contenuti video. Nella home page è presente un'animazione realizzata in Flash contenente un rappresentazione cartografica dei capoluoghi della regione Liguria con relative previsioni meteo. Questa animazione è priva di descrizione testuale e quindi un utente non vedente non ha modo di accedere al contenuto.

Soluzione: Arricchire il materiale multimediale con descrizioni testuali.

Barriera 3 – Colore essenziale
Barriera non presente in quanto il colore non viene mai utilizzato come unico modo per distinguere due o più informazioni diverse.

Barriera 4 – Frame inaccessibili
Barriera non presente perché le pagine del sito non sono basate su frame.

Barriera 5 – Materiale in movimento
Nella home page, sotto l'intestazione, è presente una linea di testo in movimento contenente le ultime notizie, realizzata tramite JavaScript. Questo può diventare problematico per un utente che utilizza un lettore di schermo perchè l'utente non in grado di sapere se il testo è cambiato da quando l'ha sentito l'ultima volta.

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

Barriera 6 – Immagini funzionali in sfondo
Barriera non presente in quanto le pagine non contengono nello sfondo delle immagini che assumono un ruolo funzionale.

Barriera 7 – Immagini funzionali prive di testo
Tutte le immagini funzionali presenti nel sito possiedono l'attributo alt, e nella maggior parte dei casi questo attributo rappresenta in modo appropriato il link che descrive. In alcuni casi però l'attributo alt è errato ed ingannevole, come ad esempio per l'immagine presente nella parte superiore della pagina che ricopre il ruolo di barra dei pulsanti.

Immagine di un menù provvisto di un attributo alt ingannevole

Questa barra rappresenta 8 pulsanti distinti, ma essendo un'unica immagine, dispone solamente di un attributo alt
<img src="img/menu.gif" alt="mappa" border="0" USEMAP="#">
La barriera di accessibilità è rappresentata dal fatto che tutti i pulsanti (tranne quello che porta alla mappa) non sono azionabili da parte di un utente non vedente che utilizza un lettore di schermo dal momento che l'intera barra viene considerata un unico pulsante.

Soluzione: suddividere l'immagine in tante immagini quanti sono i link, e inserire tra ogni link un'immagine separatore dotata di un alt pronunciabile.

Un altro problema per quanto riguarda le immagini funzionali con l'attributo alt non appropriato, è dato da immagini raffiguranti piccole frecce bianche su sfondo arancio (come si può vedere dalla figura riportata sotto) usate per rappresentare una lista puntata di link a varie pagine. Ogni piccola freccia non è altro che un link ridondante, in quanto sia l'immagine che il link testuale alla sua destra portano alla stessa pagina. Il problema sta nel fatto che le immagini sono provviste di un attributo alt avente come valore il testo "Freccia"(alt="Freccia"), e non di una descrizione del link.

Immagine di un menù con link rindondanti sprovvisti di descrizione del link

Soluzione: riportare la stessa scritta del link testuale posizionato a destra dell' immagine, per l'attributo alt di ogni immagine raffigurante una freccia. Un'altra possibile soluzione è quella di eliminare le immagini e rimpiazzarle con una lista puntata.

Barriera 8 – Link ambigui
Barriera non presente dal momento che le etichette dei link identificano in modo adeguato i link in questione. Nessuna pagina analizzata contiene dei link con etichette ambigue (come ad es. "clicca qui", "dettagli", "di più").

Barriera 9 – Menu dinamici in JavaScript
Barriera non presente in quanto nessuna pagina contiene del codice JavaScript che, non appena l'utente posiziona il focus dell'interazione su un elemento, apre un menu in una determinata zona della pagina.

Barriera 10 – Eventi del mouse
Barriera non presente in quanto nessuna delle pagine esaminate si basa su codice JavaScript per ottenere determinati effetti. Come ad esempio routine che vengono invocate mediante gestori di eventi legati al mouse (es. "onclick", "onmouseover", "onmouseout", ...).

Barriera 11 – ASCII art
Barriera non presente perché le pagine del sito non contengono testo che invece di rappresentare parole, rappresenta decorazioni.

Barriera 12 – Titoli spaziati
Barriera non presente perché nessun titolo contiene delle parole o termini spaziati in maniera artificiosa, come ad es. "H O M E P A G E" formato con spazi artificiali tra le lettere, e non usando regole CSS.

Barriera 13 – Troppi link
In molte pagine (principalmente nella home page) sono presenti troppi link non bene organizzati in gruppi. Questo forza l'utente ad un'analisi lunga e faticosa di ciascuno di essi. Gli utenti devono ascoltare tutti i link prima di decidere se continuare e poter scegliere quello più rilevante per loro. Inoltre i link non sono raggruppati in categorie tramite l'uso di tag H2-H3.

Soluzione: Riorganizzare i link suddividendoli in sezioni/categorie introducendo delle liste o dei titoli di categoria (con degli H2-H3).

Barriera 14 – Link non separati
Questo problema è presente in ogni pagina del sito, in quanto l'intestazione (in figura) contiene sei link non separati tra loro da caratteri pronunciabili, e quindi l'utente si sente pronunciare un elenco di link senza alcuna separazione o pausa tra uno e l'altro, ed avrà difficoltà nel capire dove uno finisce e l'altro inizia.

Immagine di alcuni link non separati da caratteri pronunciabili dal lettore di teso

Soluzione: Separare i link da un carattere pronunciabile (ad es. "|", " - ") od un'immagine (dotata di ALT pronunciabile). In questo modo il lettore di schermo può segnalare il passaggio da un link al successivo.

Barriera 15 – Nuove finestre
Alcune pagine contengono codice JavaScript che apre una nuova finestra quando l'utente attiva dei link o pulsanti (come ad esempio il pulsante "versione stampabile")
<a href="#" onClick="javascript:openIt('VersioneStampabile.asp',600,400);">
Questa causa un cambiamento del contesto di interazione che l'utente non percepisce e che può contribuire a disorientarlo.

Soluzione: Evitare di aprire nuove finestre in generale. Se lo si deve proprio fare, fare in modo che sin dall'inizio della nuova pagina sia chiaro all'utente che si tratta di una nuova finestra.

Barriera 16 – Form senza Label
La pagina per le richieste di delibere online contiene delle form i cui controlli sono privi del corretto markup LABEL oltre ad essere impaginata in maniera complessa tramite l'utilizzo di una tabella.

Soluzione: Aggiungere sempre il tag LABEL/@FOR attorno alle etichette di ciascun controllo. Nei casi in cui questo non è possibile usare l'attributo TITLE.

Barriera 17 – Tabelle dati
Nella pagina dedicate alle tasse sulle concessioni regionali è presente una tabella nella quale non vengono usati i tag TH e questo comporta per l'utente l'inconveniente che non può navigare tra le celle della tabella in modo che gli venga ricordato il significato di ciascuna cella (leggendo anche le intestazioni della cella).

Soluzione: 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 corrispondenti celle intestazione. Aggiungere l'attributo SUMMARY ed usare il tag CAPTION.

Barriera 18 – Tabelle di impaginazione
Le pagine sono impaginate con tabelle di layout che in alcuni casi si linearizzano male. L'utente non capisce come le informazioni o i link sono disposti nella pagina, dato che l'ordine con cui vengono letti dal lettore di schermo differisce da quello previsto dalla gabbia grafica implementata con la tabella. In particolare nella home page, la sezione FOCUS (come si vede dall'immagine riportata sotto) contiene quattro notizie impaginate mediante una tabella, che vengono lette da un lettore di schermo nel seguente modo:
  • prima viene letto il link "in mostra la rinascita del parlamento" e la relativa notizia
  • poi viene letto il link "obiettivo lavoro" e la relativa notizia
  • a questo punto viene letto il link contraddistinto dal numero 1 (in figura) che è relativo al articolo "in mostra la rinascita del parlamento"
  • e poi viene letto il link contraddistinto dal numero 2 (in figura) che è relativo al articolo "obiettivo lavoro"
Lo stesso discorso vale per le altre due notizie che vengono lette una dopo l'altra, e solo dopo vengono letti i link 3 e 4. È quindi facile rendersi conto che in questo modo l'utente si ritrova ad essere decisamente disorientato.
Immagine di parte del sito con link poco chiari

Soluzione: Ridurre, o meglio ancora eliminare, tutte le tabelle di layout e sostituirle con corrispondenti regole CSS, o in questo caso specifico, eliminare i link ridondanti.

Barriera 19 – Pagine senza titoli
La maggior parte delle pagine esaminate è provvista di un tag TITLE appropriato, tranne le pagine contenenti la mappa del sito e l'iscrizione alla newsletter che riportano lo stesso titolo della home page.

Soluzione: Fare in modo che il titolo di ciascuna pagina sia unico ed informativo, e quindi modificare i titoli delle due pagine non corrette nel seguente modo:

<title>Regione Liguria - Mappa del sito</title>
<title>Regione Liguria - Informazioni ed iscrizione alla newsletter</title>
Barriera 20 – Marcatura della lingua
Ogni pagina del sito è provvista di attributo LANG nel tag iniziale HTML, ma non ogni volta che ci sono parole di una lingua diversa da quella della pagina. In questo modo il lettore di schermo pronuncia le parole con i fonemi della lingua preselezionata anche quando deve leggere parole di un'altra lingua.

Soluzione: Ogni volta che si è presente una parola con una lingua diversa, usare del markup come ad es:

<span lang="en">Newsletter<span/>

Barriera 21 – Suddivisione in sezioni
Le pagine non contengono tag tipo H1-H2...H6 per suddividere in sezioni il suo contenuto e questo non permette all'utente di ottenere velocemente una panoramica del contenuto della pagina e di poter scegliere la parte da esaminare con attenzione.

Soluzione: Per ogni tipo di contenuto aggiungere un tag H1-H6, rispettando l'ordine di questi tag.

Barriera 22 – Mancanza di tasti rapidi
Nessuna pagina tra quelle analizzate contiene dei link o pulsanti o controlli di form che sono ricorrenti nelle pagine del sito e che hanno un tasto rapido associato (con ACCESSKEY). L'utente, che usa solo la tastiera, è costretto ad usare sempre il tasto TAB e muoversi in modo sequenziale.

Soluzione: 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. È importante che i tasti rapidi vengano descritti in qualche pagina di aiuto e che siano sempre gli stessi per un determinato link/pulsante/controllo.

Barriere specifiche per utenti ipovedenti

Barriera 23 – Contrasto visivo insufficiente
Barriera non presente dal momento che le pagine non contengono materiale in primo piano su qualche tipo di sfondo (visto che lo sfondo è sempre bianco) ed i colori usati per dipingere gli uni e l'altro non sono troppo poco contrastati.

Barriera 24 – Righe di testo lunghe
Barriera non presente in quanto nessuna pagina contiene righe di testo troppo lunghe rispetto al campo visivo. Non è presente neanche l'eventuale problema di dover fare scrolling orizzontale della pagina.

Barriera 25 – Form ampie
La pagina per le richieste di delibere online contiene una form i cui controlli sono posizionati in modo logico dall'alto verso il basso, e quindi è molto improbabile che l'utente possa cercare di inviare i dati senza aver compilato completamente la form.

Barriera 26 – Finestre sovrapposte
Alcune pagine contengono codice JavaScript che apre nuove finestre che si sovrappongono quasi del tutto con la finestra usata sino a quel momento. In questo modo può accadere che l'utente non distingua la nuova finestra dalla precedente, e quindi si trovi del tutto disorientato dal nuovo contesto di interazione.

Soluzione: Evitare di aprire nuove finestre. Se questo è proprio indispensabile, fare in modo che sin dall'inizio della nuova pagina sia chiaro all'utente che si tratta di una nuova finestra e dandogli anche la possibilità di chiuderla, e soprattutto evitare di sovrapporle quasi del tutto con la finestra principale.

Barriera 27 – Testo non ridimensionabile
Le pagine del sito contengono del testo per il quale sono state usate delle modalità di presentazione tali per cui non può essere ridimensionato. Nell'intestazione di ogni pagina è presente il pulsante riportato sotto, che rappresenta l'unico modo per aumentare la dimensione dei caratteri (passando da 11pt a 15pt).

Immagine di un tasto per la ridimensione del testo

Soluzione: Usare sempre unità di misura CSS di tipo relativo, come em e %.

Barriera 28 – Layout non ridimensionabile
Le pagine del sito hanno una struttura di impaginazione non fluida, che non permette di modificare le dimensioni della finestra o quelle del testo senza compromettere la comprensibilità e fruibilità del contenuto, lasciando inutilizzata una grossa parte dello schermo. In questo modo, l'utente non può massimizzare la finestra, né aumentare la dimensione del carattere, ed è quindi costretto ad usare un ingranditore di schermo.

Soluzione: Usare regole CSS per posizionare gli elementi della pagina ed usare delle unità di misura relative. Non devono essere usate tabelle di impaginazione che siano dimensionate mediante delle immagini spaziatrici estese usando delle unità di misura assolute. Inoltre bisogna supportare un layout liquido in modo che l'utente possa ingrandire il testo a piacimento, accorciando le righe di testo (utile per gli utenti di ingranditori di schermo) senza richiedere scrolling orizzontale.

Tabelle di valutazione.

Tabella di valutazione per utenti non vedenti.

Barriera  Impatto  Frequenza         Gravità       
Immagini ricche senza alt 1 2 Minore
Mancanza di didascalie del video 2 3 Critico
Colore essenziale Assente Assente Assente
Frame inaccessibili Assente Assente Assente
Materiale in movimento 2 3 Critico
Immagini funzionali in sfondo Assente Assente Assente
Immagini funzionali prive di testo 3 3 Critico
Link ambigui Assente Assente Assente
Menu dinamici in JavaScript Assente Assente Assente
Eventi mouse Assente Assente Assente
ASCII art Assente Assente Assente
Titoli spaziati Assente Assente Assente
Troppi link 2 3 Critico
Link non separati 2 2 Serio
Nuove finestre 3 2 Critico
Form senza LABEL 1 3 Serio
Tabelle dati 1 2 Minore
Tabelle di impaginazione 2 2 Serio
Pagine senza titoli 1 2 Minore
Marcatura della lingua 1 2 Minore
Suddivisione in sezioni 2 3 Critico
Mancanza di tasti rapidi 1 2 Minore

Tabella di valutazione per utenti ipovedenti.

Barriera  Impatto  Frequenza            Gravità         
Contrasto visivo insufficiente Assente Assente Assente
Righe di testo lunghe Assente Assente Assente
Form ampie Assente Assente Assente
Finestre sovrapposte 2 2 Serio
Testo non ridimensionabile 3 3 Critico
Layout non ridimensionabile 3 3 Critico