Simulazione Euristica

Sito analizzato: Università di Bolzano

Sito Uni Bolzano

Introduzione

La simulazione euristica guidata da barriere è un metodo di valutazione di accessibilità che colma alcune lacune lasciate fuori da altre valutazioni come la verifica di conformità e il test con utenti. Il metodo deriva dall'adattamento della simulazione euristica dove i principi adottati vengono sostituiti da un elenco di barriere di accessibilità.
Per barriera di accessibilità si intende ogni possibile ostacolo che può ridurre i livelli di efficacia e di sicurezza rendendo difficile o impossibile l'ottenimento di un obiettivo da parte di una persona disabile che usa il sito mediante una tecnologia assistiva.

Una barriera viene descritta in base ai seguenti aspetti:

  • tipo di disabilità dell'utente
  • tipo di tecnologia assistiva
  • l'attività ostacolata dalla barriera
  • caratteristiche della pagina che erigono la barriera

Le barriere, inoltre, si suddividono in quattro aree:

  • barriere della percezione
  • barriere all'utilizzo
  • barriere alla comprensione
  • barriere al controllo da parte dell'utente

Descrizione del metodo

Per applicare questo metodo bisogna definire un contesto di valutazione, ovvero riferirsi a una o più delle categorie di disabilità e considerare un catalogo di possibili scopi finali.
Una volta scelto lo scenario d'uso le pagine devono venir esaminate per ciascuna delle categorie di utenti cercando di determinare se si presenta qualche barriera tra quelle elencate. Se sono presenti delle barriere occorre attribuire ad esse una gravità in base all'impatto che ha rispetto allo scopo e all'utente, e alla frequenza con cui si manifesta durante lo svolgimento dei compiti necessari per il raggiungimento dello scopo.

La gravità viene stabilita in base a questa tabella:

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 verranno assegnati in base ai seguenti criteri:

  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.

Perimetro dell'indagine

Scenario d'uso: narrazione di persone e delle loro attività mentre utilizzano un sistema. Può includere la situazione operativa; il personaggio e le sue caratteristiche fisiche e mentali; i suoi scopi, motivazioni, modelli mentali; azioni e compiti; eventi esterni.

Le categorie di utenti prese in considerazione sono:
UTENTE NON VEDENTE: Elisa, studentessa ceca, vuole informarsi sui corsi offerti dall'università di Bolzano. Utilizza il lettore di schermo Jaws su sistema operativo Windows e browser Firefox. Livello di conoscenza del computer media.
UTENTE DISABILE MOTORIO: Marco è affetto da menomazione fisica e non ha il pieno controllo delle braccia. Esperienza bassa nell'uso del computer.

Pagine analizzate:

Home (http://www.unibz.it/it/public/university/default.html)
Facoltà di scienze e tecnologie informatiche (http://www.unibz.it/it/inf/welcome/default.html)
Tasse e aiuti economici (http://www.unibz.it/it/students/fees/default.html)
Tirocini e opportunità di lavoro (http://www.unibz.it/it/students/internships/default.html)
Offerta formativa (http://www.unibz.it/it/prospective/prog/default.html)
Alloggi (http://www.unibz.it/it/prospective/housingfa/housing/default.html)

Pagine analizzate nel gennaio 2011.

Strumenti utilizzati:

-Mozilla Firefox
-Microsoft Internet Explorer
-Firebug 1.5.4
-Lettore di schermo Jaws 10.0

CASO 1: UTENTE NON VEDENTE

Lista di barriere per utenti non vedenti:

Barriere nella percezione

Immagini ricche senza testo alternativo

Impatto: 2
Frequenza: 2
Gravità: serio

Nelle pagine esaminate sono spesso presenti immagini con campo alt non specificato, come ad esempio le immagini associate ai link della barra di navigazione.

Esempio immagine link senza alt
<img src="/_styles/Images/it/nav/public_on.gif">

Soluzione: usare in maniera oppurtuna l'attributo alt.

Mancanza di didascalie del video

Gravità: nessuna

Non sono presenti video nelle pagine.

Colore essenziale

Gravità: nessuna

Nel sito non c'è una distinzione visiva tra link visitati e non ancora visitati, essendo caratterizzati sempre dallo stesso colore.
L'unica distinzione viene fatta per il menù relativo alle varie facoltà.

Esempio menu facolta link

I link vengono evidenziati con il colore o la sottolineatura quando il mouse viene passato sopra, ma ad esempio i colori per evidenziare i link del menù relativo alle varie facoltà non presentano un sufficiente contrasto visivo. Nonostante questo, se un link è stato visitato, jaws pronuncia "visitato link" dopo aver letto il link, quindi il problema per un non vedente,non è stato riscontrato.

Frame inacessibili

Impatto: 3
Frequenza: 1
Gravità: critico

La pagina "Facoltà di Scienze e Tecnologie informatiche" presenta un iFrame.

<iframe id="4wnet-feed" src="http://www.facebook.com/plugins/likebox.php?id=112663098759375&width=495&connections=8&stream=true&header=true&height=587" framespacing="0" frameborder="no" scrolling="no" width="620" height="180" style="background-color: #fff; margin; margin: 10px 0px 0px 0px;"> </iframe>

Utenti di vecchie versioni di lettori di schermo non possono accedere ai singoli frame portando all'azzeramento dell'efficacia.
Soluzione: fare in modo di togliere i frame, usando dei DIV accoppiati a regole CSS.

Materiale in movimento

Gravità: nessuna

Non è presente materiale in movimento.

Barriere dell'utilizzazione

Immagini funzionali in sfondo

Gravità: nessuna

Problema non presente nel sito

Immagini funzionali prive di testo

Impatto: 2
Frequenza: 2
Gravità: serio

La pagina contiene delle immagini funzionali come link cliccabili prive di testo alternativo. Infatti i link relativi alla barra di navigazione contengono immagini con attributo alt non specificato.

Esempio menu facolta link

Soluzione: includere nelle immagini l'attributo ALT e fare in modo che il testo sia informativo e che quindi permetta di capire l'effetto dell'attivazione del link.

Link generici

Gravità: nessuna

Problema non riscontrato.

Link ambigui

Gravità: nessuna

Problema non riscontrato.

Menú dinamici in javascript

Gravità: nessuna

Problema non riscontrato in quanto i menu non sono realizzati con codice javascript.
Codice JavaScript utilizzato nel form di ricerca e per l'invio mail.

Eventi mouse

Impatto: 3
Frequenza: 2
Gravità: critico

Le routine legate alle voci di menu vengono invocate mediante gestori di eventi del mouse come onmouseover e onmouseout, mentre il form per la ricerca è gestito da onkeypress.

<a class="MenuMainLevel1First" onmouseover="this.className='MenuMainLevel1Hover'" onmouseout="this.className='MenuMainLevel1'" href="/it/students/welcome/default.html">Benvenuti</a>

L'utente che usa solo la tastiera non ha modo di attivare quegli eventi.
Soluzione: usare anche i gestori di eventi logici come onfocus, onkeypress.

Form con redirect

Impatto: 3
Frequenza: 1
Gravità: critico

Nella sezione studenti nel campo relativo a ICT Services, selezionando alcune voci, come ad esempio Student Portal,viene aperta una nuova pagina web.

Esempio ICT service link

Soluzione: avvertire l'utente che la voce selezionata è collegata ad una pagina esterna e dargli la possibilità di decidere se proseguire verso il nuovo sito o annullare l'operazione.

Link non separati

Gravità: nessuna

Problema non riscontrato in quanto jaws separa i vari link e non li legge tutti attaccati, quindi l'utente riesce a distinguere le varie voci.

Nuove finestre

Impatto: 2
Frequenza: 1
Gravità: serio

Nella sezione Studenti la scelta di una voce nella sezione ICT Services fa sì che l'utente venga indirizzato in una nuova pagina. L'utente non si accorge che il contesto di interazione è cambiato, e che quindi è cambiato sia il contenuto che i comandi possibili.
Stessa cosa per le sezioni in home "Clima runner", "Unishop-Hoodies" e "Lavorare all'università", la cui selezione dei link porta a nuove pagine senza che l'utente sia avvisato.

Esempio finestre

Soluzione: evitare di aprire nuove finestre. Se ciò non è possibile fare in modo che l'utente possa capire di essere in una nuova pagina e possa chiudere la finestra.

Form senza label

Gravità: nessuna

Non ci sono form.

Temporizzazioni troppo brevi

Gravità: nessuna

Non sono presenti dei refresh nelle pagine.

Barriere della comprensione

ASCII art

Gravità: nessuna

Problema assente in quanto le pagine non contengono testo che rappresenta decorazioni come ad es. il simbolo "= =>".

Titoli spaziati

Gravità: nessuna

Non sono presenti parole o termini formattati con grandi spazi tra le varie lettere.

Troppi link

Impatto: 3
Frequenza: 3
Gravità: critico

Le pagine presentano molti link. Infatti oltre ad esserci due menu (barra di navigazione, e menu verticale), anche nell'area del contenuto sono presenti molti link. Ad esempio in home sono presenti solo link.

Soluzione: riorganizzare i link suddividendoli in sezione/categorie. Nella stessa pagina introdurre liste o DIV separate, introducendo dei titoli di categoria.
Deve essere possibile per l'utente esaminare sinteticamente un blocco di link e decidere solo dal titolo del blocco se i link che esso contiene sono rilevanti o meno.

Tabelle dati

Gravità: nessuna

Problema non riscontrato.

Tabelle di impaginazione

Impatto: 1
Frequenza: 2
Gravità: minore

I contenuti delle pagine sono strutturati attraverso delle tabelle invece che con opportune regole css.

Pagine senza titoli

Gravità: nessuna

Tutte le pagine hanno titoli distinti che fanno capire all'utente dove si trova.

Frame senza titoli

Impatto: 2
Frequenza: 1
Gravità: serio

Nella pagina relativa alla facoltà di scienze e tecnologie informatiche è presente un frame privo sia dell'attributo title che dell'attributo name.

Frame senza titolo
<iframe style="border-right: medium none; border-top: medium none; overflow: hidden; border-left: medium none; width: 500px; border-bottom: medium none; height: 587px" src="http://www.facebook.com/plugins/likebox.php?id=112663098759375&width=495&connections=8&stream=true&header=true&height=587" frameborder="0" scrolling="no" allowtransparency="true"></iframe>

Soluzione: aggiungere sempre l'attributo TITLE a ciascuno dei frame ed assicurarsi che il suo valore sia comprensibile e informativo, rispetto alla scelta del frame da visitare.

Marcatura della lingua

Impatto: 2
Frequenza: 2
Gravità: serio

In presenza di parole in lingua straniera manca la marcatura del linguaggio, in quanto sono assenti gli attributi lang necessari. Questo fa sì che il lettore di schermo pronuncerà le parole con i fonemi della lingua preselezionata e quindi in italiano.

Marcatura della lingua
Marcatura della lingua

Soluzione: aggiungere l'attributo HTML/@LANG con valore, nel nostro caso, "en" e "de".

Suddivisione in sezioni

Impatto: 2
Frequenza: 2
Gravità: serio

Le pagine non contengono tag tipo H1 H2...H6 per suddividere in sezioni il testo.

Soluzione: aggiungere al contenuto tag H1-H6 in modo che il lettore di schermo permetta all'utente di listare tutti i titoli e di saltare da uno all'altro, permettendo quindi di poter fare una panoramica dei contenuti e scegliere la parte che interessa.

Immagini come titoli

Gravità: nessuna

Problema non riscontrato.

Barriere al controllo da parte dell'utente

Mancanza di tasti rapidi

Impatto: 3
Frequenza: 2
Gravità: critico

Mancano i tasti rapidi, quindi l'utente che usa solo la tastiera deve per forza muoversi tra i controlli usando il tasto tab.
Nelle pagine è presente solo un input con attributo accesskey ed è quello relativo alla ricerca.

Cerca tasti rapidi
<input type="text" maxlength="200" accesskey="S" title="Immettere le parole da cercare" class="ms-sbplain" alt="Immettere le parole da cercare" onkeypress="javascript:return S6F789EBA_OSBEK(event);" style="width:237px;" />

Soluzione: inserire opportuni accesskey soprattutto per i link in modo da garantire una navigazione più semplice.

Skip links

Impatto: 2
Frequenza: 2
Gravità: serio

Le pagine non permettono di saltare direttamente al contenuto, costringendo l'utente a sentirsi leggere ogni volta tutti i link presenti prima di arrivare al contenuto vero e proprio.
Soluzione: aggiungere un link visibile a inizio pagina che permetta di saltare direttamente al nocciolo della pagina.

Pagina solo testo

Gravità: nessuna

Barriera non riscontrata in quanto non sono presenti pagine alternative di solo testo.

Controlli del browser disabilitati

Gravità: nessuna

Nel sito non sono presenti pagine in cui i controlli tipi ci del browser come back, next e refresh, sono disabilitati.

Riassunto barriere riscontrate:

Barriera Impatto Frequenza Gravità
Immagini ricche senza testo alternativo 2 2 serio
Frame inacessibili 3 1 critico
Immagini funzionali prive di testo 2 2 serio
Eventi mouse 3 2 critico
Form con redirect 3 1 critico
Nuove finestre 2 1 serio
Troppi link 3 3 critico
Tabelle di impaginazione 1 2 minore
Frame senza titolo 2 1 serio
Marcatura della lingua 2 2 serio
Suddivisione in sezioni 2 2 serio
Mancanza di tasti rapidi 3 2 critico
Skip links 2 2 serio

CASO 2: UTENTE DISABILE MOTORIO

Lista di barriere per utenti disabili motori:

Barriere dell'utilizzazione

Menu a cascata

Impatto: 3
Frequenza: 1
Gravità: critico

Sono presenti menu a cascata implementati tramite delle select che fan si che l'utente disabile possa avere difficoltà nel posizionare il puntatore nelle voci giuste.

Menu cascata

Il primo menu ad esempio rimane aperto solo se con il cursore è sopra l'area contenente le voci. Soluzione: evitare i menu a cascata oppure realizzare dei menu piatti o basati su radiobutton.

Eventi mouse

Impatto: 1
Frequenza: 2
Gravità: minore

Le routine legate alle voci di menu vengono invocate mediante gestori di eventi del mouse come onmouseover e onmouseout, mentre il form per la ricerca è gestito da onkeypress.

Eventi mouse
<a class="MenuMainLevel1First" onmouseover="this.className='MenuMainLevel1Hover'" onmouseout="this.className='MenuMainLevel1'" href="/it/students/welcome/default.html">Benvenuti</a>

L'utente che usa solo la tastiera non ha modo di attivare quegli eventi. Soluzione: usare anche i gestori di eventi logici come onfocus, onkeypress.

Mancanza di link interni

Impatto: 2
Frequenza: 2
Gravità: serio

Mancano link interni alla pagina che permettano all'utente di saltare tra le varie sezioni o di ritornare in testa alla pagina. L'utente è quindi costretto a muovere continuamente il puntatore dalla pagina alla barra di scorrimento e viceversa o di usare di più i tasti nel caso dell'uso della tastiera.
Le pagine non sono molto lunghe ma sarebbe molto utile un link a fine pagina che permetta all'utente di ritornare all'inizio.

Link troppo vicini

Impatto: 2
Frequenza: 1
Gravità: serio

Link en e de troppo piccoli, in quanto i link possono essere selezionati solo se il puntatore è sopra alla scritta, che però è molto corta.

Link troppo vicini

Nuove finestre

Impatto: 1
Frequenza: 1
Gravità: minore

Nella sezione Studenti la scelta di una voce nella sezione ICT Services fa sì che l'utente venga indirizzato in una nuova pagina. L'utente non si accorge che il contesto di interazione è cambiato, e che quindi è cambiato sia il contenuto che i comandi possibili.
Stessa cosa per le sezioni in home "Clima runner", "Unishop-Hoodies" e "lavorare all'università", la cui selezione dei link porta a nuove pagine senza che l'utente sia avvisato.

Nuove finestre

Nuove pagine obbligano l'utente a dover spostare il mouse sul pulsante di chiusura che è molto piccolo.
Soluzione: evitare di aprire nuove finestre oppure, se proprio necessario, fare in modo che sia chiaro all'utente che si tratta di una nuova finestra e dargli modo di chiuderla.

Form senza label

Gravità: nessuna

Non ci sono form.

Temporizzazioni troppo brevi

Gravità: nessuna

Non sono presenti dei refresh nelle pagine.

Barriere alla comprensione

Troppi link

Gravità: nessuna

Non c'è un numero elevato di link, che fan si che l'utente debba effettuare lo scrolling.

Barriere al controllo da parte dell'utente

Mancanza di tasti rapidi

Impatto: 3
Frequenza: 2
Gravità: critico

Mancano i tasti rapidi, quindi l'utente che usa solo la tastiera deve per forza muoversi tra i controlli usando il tasto tab. Nelle pagine è presente solo un input con attributo accesskey ed è quello relativo alla ricerca.

Cerca
<input type="text" maxlength="200" accesskey="S" title="Immettere le parole da cercare" class="ms-sbplain" alt="Immettere le parole da cercare" onkeypress="javascript:return S6F789EBA_OSBEK(event);" style="width:237px;" />

Soluzione: l'uso della tastiera è spesso preferito; pertanto la presenza dei tasti rapidi migliora di molto l'usabilità del sito.

Inserire opportuni accesskey soprattutto per i link in modo da garantire una navigazione più semplice.

Controlli del browser disabilitati

Gravità: nessuna

Nel sito non sono presenti pagine in cui i controlli tipici del browser come back, next e refresh, sono disabilitati.

Riassunto barriere riscontrate:

Barriera Impatto Frequenza Gravità
Menu a cascata 3 1 critico
Eventi mouse 1 2 minore
Mancanza di link interni 2 2 serio
Link troppo vicini 2 1 serio
Nuove finestre 1 1 minore
Mancanza di tasti 3 2 critico