Simulazione Euristica

Introduzione

La simulazione euristica è stata svolta a cavallo tra i mesi di Settembre e Ottobre 2005.

Nel valutare lo stato delle pagine del sito della Regione Emilia Romagna, abbiamo fatto riferimento alle barriere descritte dal prof. Giorgio Brajnik, ma è stato frequente trovarne di nuove.

Sono stati stesi tre scenari, uno per ogni categoria di utenza e relativa tecnologia assistiva. Nello scenario abbiamo descritto le caratteristiche fisiche e mentali dell'attore.
Per ogni scenario sono stati previsti sempre gli stessi tre compiti. In ogni compito abbiamo descritto lo scopo dell'utente e le azioni che portano al raggiungimento dello scopo.

Ad ogni barriera è stato associato un livello di gravità (minore, serio o critico), sulla base dei valori di frequenza e impatto, nel seguente modo:

  1. Frequenza 1: la barriera è emersa una sola volta durante lo svolgimento del compito.
  2. Frequenza 2: la barriera è emersa più di una volta durante lo svolgimento del compito.
  3. Frequenza 3: la barriera è emersa in tutte le pagine coinvolte nel compito.
  1. Impatto 1: la presenza della barriera viene notata dall'utente, ma ci sono facili modi per aggirarla od evitarla.
    Essa non incide significativamente sulle capacità dell'utente di raggiungere con successo il termine del compito.
  2. Impatto 2: la barriera non è facilmente aggirabile o evitabile dall'utente.
    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.
  3. Impatto 3: la barriera porta l'utente a rinunciare al raggiungimento dello scopo: gli errori possono essere molti e con gravi conseguenze; vie alternative non esistono.
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

Struttura della relazione

Scenario 1

  • Primo Compito:
    • Pagina in esame: descrizione dello stato della pagina relativamente alle problematiche dell'accessibilità e di come l'utente interagisce con la pagina, attraverso l'interfaccia della tecnologia assistiva, verso il raggiungimento dell'obiettivo.
      1. Prima barriera riscontrata: tipo, nome completo, impatto, frequenza, gravità.
      2. ...
      3. Ultima barriera riscontrata: tipo, nome completo, impatto, frequenza, gravità.
  • Secondo Compito: vedi sopra
  • Terzo compito: vedi sopra

Scenario 2

  • Come sopra.

Scenario 3

  • Come sopra.

Per ogni compito le barriere sono numerate, la numerazione parte da 1 per la prima barriera riscontrata nella prima pagina in esame e prosegue fino all'ultima barriera riscontrata nell'ultima pagina coinvolta nel compito. Ogni barriera viene formalizzata nel momento in cui la si incontra. Per questo motivo può succedere che la struttura di ogni Pagina Coinvolta non sia perfettamente uniforme allo schema appena descritto, e si trovino delle barriere mentre viene descritto lo stato della pagina e l'interazione pagina-utente.
Siamo comunque sicuri che il testo sarà sufficientemente scansionabile, e anzi la lettura risulterà più logica. Mettiamo comunque a disposizione l'elenco delle barriere riscontrate.

Gli Scenari

Scenario 1: L'utente è affetto da cecità totale.

Utilizza il browser vocale IBM Home Page Reader, versione 3.04. È abituato ad usare questa tecnologia assistiva, sa perciò usare con dimestichezza tutte le funzionalità che questa offre. Si trova a casa propria, a Bologna, senza fonti di disturbo ambientale.

Scenario 2: L'utente è ipovedente.

Utilizza l'ingranditore di schermo Zoom Text versione 9. È abituato ad usare questa tecnologia assistiva. Si trova a casa propria, a Bologna, senza fonti di disturbo ambientale. Possiede uno schermo 17'' con risoluzione 1280x1024 pixel.

Scenario 3: L'utente utilizza un PDA Asus 730 w, senza javascript.

Il palmare ha sistema operativo Microsoft Windows Mobile TM 2003. Il display 3.7'' con risoluzione 640x480.
Si trova in aeroporto, il suo volo è in ritardo, il disturbo ambientale è notevole. Naviga sul portale della Regione per reperire le informazioni di cui ha bisogno il più velocemente possibile.
Per connettersi a internet sfrutta la tecnologia WLan integrata e si connette all'hot spot pubblico dell'aeroporto che è basato sullo standard a banda larga 802.11b. Come browser utilizza Microsoft Internet Explorer 4.01 SP1 che non supporta javascript.

I Compiti

Compito 1

Partendo dalla home page l'utente vuole reperire il numero di telefono dell'ARDSU (azienda regionale per il diritto allo studio universitario) di Bologna. Per farlo l'utente seleziona Telefoni e indirizzi" dal menu "La regione". Clicca poi su "vai all'organigramma". Quindi clicca sul pulsante con il simbolo + vicino a Regione Emilia Romagna. Clicca sul + posto vicino a "Autorità, Aziende, Enti"e su quello posto vicino a "Ardsu - Aziende Regionali per il diritto allo studio universitario". Infine seleziona Ardsu di Bologna - Azienda Regionale per il diritto allo studio universitario. Nella pagina è ora disponibile il numero di telefono desiderato.

Compito 2

L'utente parte dalla home page del portale dell'Emilia Romagna e clicca su "Il mondo delle imprese", linkdisponibile nel menu "Per i cittadini". Deve trovare il "Programma regionale per la concessione di contributi per interventi di assistenza tecnica a carattere sovraprovinciale realizzati dai CAT di livello regionale". Un amico gli ha detto che il programma si trova in una pagina dal nome "Centri di assistenza Tecnica". L'utente clicca quindi su "Centri di assistenza tecnica" ma nella pagina che si apre non trova il documento cercato. Torna alla pagina precedente e solo a questo punto si accorge della presenza di un altro linkcon la stessa etichetta. Vi accede e sotto al paragrafo intitolato "Modulistica online" trova il programma. Infine clicca su "scheda" per leggere i dettagli di suo interesse.

Compito 3

L'utente vuole iscriversi alla newsletter di Ermes per ricevere informazioni e notizie dal portale della regione Emilia-Romagna. Per farlo, dalla home page del portale della Regione, seleziona il link"Iscriviti alla newsletter". Si apre la pagina Newsletter con le ultime notizie dal portale. L'utente seleziona "per iscriverti" dal menu a sinistra. Compila il form e clicca sul pulsante "Iscrivimi".

Torna a inizio pagina

Scenario 1

Compito 1.1

Partendo dalla home l'utente vuole reperire il numero di telefono dell'ARDSU (azienda regionale per il diritto allo studio universitario) di Bologna. Per farlo l'utente seleziona Telefoni e indirizzi" dal menu "La regione". Clicca poi su "vai all'organigramma". Quindi clicca sul pulsante con il simbolo + vicino a Regione Emilia Romagna. Clicca sul + posto vicino a "Autorità, Aziende, Enti"e su quello posto vicino a "Ardsu - Aziende Regionali per il diritto allo studio universitario". Infine seleziona Ardsu di Bologna - Azienda Regionale per il diritto allo studio universitario. Nella pagina è ora disponibile il numero di telefono desiderato.

Pagina: Home page

Analizzando l'home page del sito della Regione Emilia Romagna è emersa una barriera di gravità minore. Di seguito presentiamo un elenco di considerazioni, raccolte in brevi paragrafi, che descrivono come gli sviluppatori siano riusciti ad evitare l'insorgere di barriere gravi all'accessibilitÀ.

L'ordine di presentazione dei contenuti e gli skip links

Dopo la lettura del titolo della pagina, sono subito a disposizione due skip links: "vai al contenuto" e "vai ai menu".

  • Se il primo collegamento viene attivato il lettore di schermo procede con la lettura di "Attualità", cui segue "La Regione Per", "Incontri", poi si prosegue con la lettura dei menu.
  • Se il collegamento "vai ai menu" viene attivato, si saltano le parti appena menzionate relative alle notizie, e si comincia dal menu "Per i cittadini". Seguono: "portali tematici", "notizie dai portali", "primo piano", "La Regione", "Servizi Online", "link", e infine i collegamenti presenti a fondo pagina che sono "Privacy", "Copyright", "credits", "Intranet", "Accessibilità".
  • Se invece non si attiva nessuno skip links, si avrà la lettura del form di ricerca, poi l'indirizzo dell'Ufficio Relazioni con il pubblico e la lettura procede come se si fosse partiti dal contenuto (quindi notizie e poi tutti i menu).

L'ordine dei contenuti è quindi:

  1. Intestazione: form di ricerca e indirizzo dell'URP
  2. notizie
  3. menu

Grazie allo skip link"vai al contenuto" si può saltare direttamente al punto 2, grazie allo skip link "vai ai menu" si salta al punto 3.

Abbiamo compreso l'ordine di presentazione dei contenuti fin dal primo ascolto della pagina con il lettore di schermo; riteniamo quindi che quest'ordine sia sufficientemente chiaro e ragionevole.

E' durante la lettura del menu "per i cittadini" che emerge la prima e unica barriera: se proviamo ad ascoltare quanto pronuncia il lettore di schermo, noteremo che è difficile distinguere tra la fine di un collegamento e l'inizio del successivo.
Per questo, potrà sembrare che "Il mondo delle imprese" e "il lavoro e le professioni" siano in realtà un unico collegamento, e così anche per tutti gli altri collegamenti che il lettore di schermo pronuncia senza effettuare alcuna pausa.

La soluzione sarebbe mettere un carattere stampabile tra due spazi, e magari renderlo invisibile tramite foglio di stile (come suggerisce il W3C nel punto di controllo 10.5 nelle WCAG 1.0). Così il lettore di schermo pronuncerà, per esempio, "Il mondo delle imprese, punto, Il lavoro e le professioni, punto" ecc. La barriera cui ci troviamo di fronte è la seguente:

1) Barriera all'utilizzazione: mancanza di caratteri stampabili (delimitati da spazi), non facenti parte dei collegamenti, per separare i collegamenti adiacenti.

Utenti utilizzatori di lettori di schermo non riescono a distinguere tra la fine di un collegamento e l'inizio del successivo, non riuscendo a capire quindi quali sono le etichette dei collegamenti e rischiando di attivare il collegamento sbagliato.

  • impatto = 1
  • frequenza = 2
  • gravità = minore

Assegniamo impatto = 1 alla barriera, perché se si imposta la lettura del lettore di schermo per item, e quindi si preme la freccia destra ogni volta che si vuole ascoltare un item, allora le etichette dei collegamenti saranno chiaramente distinguibili.

Accesskeys e struttura degli heading

Gli sviluppatori del sito hanno messo a disposizione tre accesskeys:

  • k, per saltare all'inizio dei contenuti
  • n, per andare all'inizio dei menu
  • c, per utilizzare il form di ricerca

L'ordine di lettura dei menu prevede che menu importanti come "La Regione" debbano essere letti dopo che ogni singola voce de "per i cittadini", "portali tematici" e "notizie dai portali" siano state lette.
È comunque possibile muoversi da header a header fino a raggiungere il menu prescelto. È importante far notare che tutti e soli i nomi dei menu hanno heading 2, cosa che facilita molto la navigazione.

Il form di ricerca

L'unico form presente in home page è quello che permette la ricerca: la casella di testo editabile è associata alla label "Cerca", ed inoltre è possibile editare il text field e attivare la ricerca grazie ad un accesskey, premendo alt+shift+c.

Le immagini presenti nel sito

Tutte le immagini sono dotate di attributo ALT. Spesso il testo incluso nell'attributo ALT è molto ricco e dettagliato (si considerino per esempio gli ALT delle immagini presenti nella sezione "News").
Esistono immagini incluse nello sfondo, ma non si tratta mai di immagini ricche.
Non ci sono immagini funzionali senza attributo ALT.
Non sono usate immagini come titoli.

La lingua del documento e le parole straniere

È qui che troviamo la barriera che l'home page fa emergere. La pagina ha un titolo ("Emilia Romagna: il portale dell'Emilia Romanga - Ermes), ma l'elemento <title> è privo di attributo LANG: questo fa sì che la lettura del titolo della pagina sia effettuata con pronuncia inglese. Il testo è comunque perfettamente comprensibile.
È specificato il linguaggio della pagina, e tutte le parole straniere sono incluse nell'elemento <span> con attributo "lang", come per esempio <span lang="en" xml:lang="en">Privacy</span>

I collegamenti

Non sono presenti link generici, ogni linkha di solito un'etichetta sufficientemente lunga che lo descrive esattamente.
Si noti, inoltre, che accanto ad ogni collegamento a un sito esterno, c'è una piccola immagine (a forma di chiocciolina, con freccia) che, pur non essendo un'immagine ricca, è dotata di attributo "alt=sito esterno": ciò fa sì che l'utente abbia più tempo per selezionare il collegamento cui l'immagine si riferisce.
Infatti l'immagine è essa stessa un collegamento, e quindi mentre il lettore di schermo legge "sito esterno", si ha ancora la possibilità di scegliere se attivare o meno quel collegamento.
Per esempio, nel menu "Portali tematici" il lettore di schermo pronuncia quanto segue:

  • Autonomie [sito esterno]
  • Cartellone [sito esterno]
  • ecc..

E per accedere al Cartellone, si può premere "invio" anche durante la lettura di "sito esterno".

È solo il caso di menzionare che:
  • L'home page non fa uso di frame.
  • Non ci sono ascii art.
  • Non ci sono titoli spaziati; il numero della partita iva è costituito da cifre separate da spazi, ma questo risulta molto utile perché in questo modo il lettore di schermo pronuncia le cifre separatamente anziché l'intero numero.
  • Il caricamento dell'home page non genera l'apertura di finestre di pop-up.
  • Non sono usate tabelle per la disposizione dei contenuti nella pagina.
  • Non è presente una versione solo testo della pagina, ma effettivamente non riteniamo che sia necessaria: nell'home page un utente utilizzatore di lettore di schermo non si trova in difficoltà.

Quindi, immedesimandoci nello scenario dell'utente che vuole raggiungere la voce "telefoni e indirizzi" nel menu "La Regione", possiamo immaginare che l'utente ascolti la lettura della pagina, eventualmente andando avanti di paragrafo in paragrafo oppure di collegamento in collegamento.
Se l'utente sapesse già dove si trova il collegamento, gli basterebbe usare lo skip-link "vai ai menu" e poi procedere di heading in heading fino a raggiungere il menu "La Regione".

Pagina: Telefoni e Indirizzi

Le considerazioni da fare sono le stesse fatte per l'home page.
La pagina non mette a disposizione nessuna funzionalità che non sia accessibile. Nonostante non rientrassero nel compito, abbiamo valutato anche i due form per la "Ricerca persone" e per la "Ricerca strutture", e abbiamo appurato che questi sono perfettamente accessibili.

Uno degli skip link, che ha etichetta "vai ai menu", invece di far leggere l'insieme di collegamenti presenti nella barra di navigazione, che sono i titoli dei menu presenti in home page (Per i Cittadini, La regione, Servizi on-line, link, Portali tematici) più il collegamento a Notizie, fa ripartire la lettura da inizio pagina. Vengono quindi riproposti gli skip links "vai al contenuto" e "vai ai menu" stesso.
Questo può generare confusione nell'utente, ma soprattutto rischia di indurlo a pensare che nella pagina in cui si trova non sia possibile accedere direttamente ai menu presenti in home page e di costringerlo quindi a tornare alla pagina precedente, per accedervi.
Tuttavia, nello svolgimento del compito l'utente non ha bisogno di tornare ai menu sopra indicati.
Di seguito formalizziamo la barriera appena descritta.

2) Barriera all'utilizzazione: cattivo funzionamento degli skip links

L'attivazione di uno skip link non produce l'effetto atteso dall'utente.

  • impatto = 1
  • frequenza = 2
  • gravità = minore

Quindi, per proseguire verso l'obiettivo, l'utente potrà scegliere di usare lo skip link "vai al contenuto", leggerà il contenuto della pagina (che comincia con la lettura del percorso fatto sotto forma di breadcrumbs), sarà aiutato a scegliere la modalità di ricerca più appropriata nel suo caso grazie ai testi esplicativi che seguono il nome del tipo di ricerca, che sono:

  • Struttura organizzativa: Se non avete idea di come è organizzata la Regione, vi consigliamo un percorso che parte dall' organigramma.
  • Ricerca persone: Per chi vuole cercare un dipendente regionale, e ne conosce anche parzialmente il nome, abbiamo previsto un percorso abbreviato sulle persone.
  • Ricerca strutture: il terzo percorso prevede una ricerca multipla: per nome di struttura (se lo si conosce con buona approssimazione); per competenze (tramite l'uso di parole significative); per località dove ha sede la struttura

Al termine dell'ascolto comprenderà che deve usare la ricerca attraverso l'organigramma, e potrà tornare indietro di heading in heading, fino a selezionare la Struttura Organizzativa; in quest'operazione sarà aiutato dal fatto che tutti e soli i nomi dei tipi di ricerca hanno heading 3.
Tornato al primo degli heading che hanno valore 3, selezionerà il collegamento "vai all'organigramma".

Pagina: Organigramma 1

Anche in questa pagina si manifesta la barriera all'utilizzo che abbiamo chiamato "cattivo funzionamento degli skip-links".

Per proseguire nello svolgimento del compito, immaginiamo che l'utente scelga di selezionare lo skip link "vai al contenuto", gli verrà letta la sua posizione corrente nel sito, dopodichè quanto pronunciato dal lettore di schermo sarà: "Cartella. Cartella. Regione Emilia Romagna".
La versione grafica è la seguente:

versione grafica di quanto descritto

La prima occorrenza di "cartella" corrisponde all'alt dell'immagine costituita dal simbolo "+". La seconda occorrenza di "cartella" corrisponde all'alt dell'immagine della cartella. Solo la prima immagine (la prima occorrenza di "cartella") è anche un collegamento. Se selezionato porta all'apertura delle sotto-voci che costituiscono l'organigramma.
Se viene selezionato il collegamento "REGIONE EMILIA ROMAGNA", l'effetto sarà l'apertura di una pagina in cui vengono descritte in un paragrafo di testo le competenze della Regione.

L'attributo "cartella" non evoca alcun profumo dell'informazione. Per di più occorre due volte, e per denotare oggetti diversi (un collegamento e una semplice immagine).
L'utente si troverà disorientato, sarà costretto ad attendere la terminazione della lettura della pagina. Terminata questa, potrà scegliere di far pronunciare al lettore di schermo la link list.
Nella migliore delle ipotesti, comprenderà quindi che, a meno di non voler selezionare i collegamenti ai menu, dovrà scegliere tra il collegamento denominato "cartella" e quello denominato "Regione Emilia Romagna". Se sceglierà di attivare il primo collegamento, che non evoca alcun profumo dell'informazione, proseguirà correttamente verso il raggiungimento dell'obiettivo, perché si aprirà un menu di sotto-voci (si veda l'analisi della pagina seguente).
Se non dovesse essere così, ipotesi perfettamente realistica, l'utente potrà pensare che la modalità di ricerca non funziona, oppure selezionerà il collegamento a "Regione Emilia Romagna", trovandosi in una pagina il cui contenuto non lo interessa e sarà costretto a tornare indietro.

Riassumiamo queste considerazioni nelle seguenti barriere:

3) Barriera all'utilizzazione: presenza di immagini, una funzionale e una non, con medesimo valore dell'attributo ALT, posizionate una di seguito all'altra

L'utente cieco si trova impossibilitato a distinguere tra le due immagini. È costretto ad utilizzare funzionalità del lettore di schermo (come la links list) per comprendere gli effetti prodotti dal selezionamento delle diverse immagini.

  • impatto = 2
  • frequenza = 2
  • gravità = serio
3) Barriera all'utilizzazione: immagine funzionale con alt inutile/disorientante

L'immagine funzionale possiede un ALT che impedisce all'utente cieco di avere un'idea chiara della pagina che si aprirà dopo l'attivazione del collegamento costituito dall'immagine.

  • impatto = 2
  • frequenza = 2
  • gravità = serio

Supponendo che l'utente selezioni il collegamento rappresentato dall'immagine funzionale "+", che ha ALT ambiguo, si aprirà un sotto menu, che analizziamo nella pagina successiva.

Pagina: Organigramma 2

La versione grafica dell'organigramma che si presenta ora all'utente è la seguente:

immagine dell'organigramma aperto

Il lettore di schermo pronuncerà questo contenuto nel seguente modo:
"Cartella. Cartella. Regione Emilia Romagna.
Cartella. Cartella. Autorità, Aziende, Enti.
Carella. Cartella. Assemblea Legislativa.
Cartella Cartella. Giunta Regionale."

Quindi ci troviamo di nuovo di fronte alle barriere 2 e 3.
Ma questa volta, per l'utente è anche impossibile discriminare tra l'immagine con il segno "-", e quella con il segno "+", che sono entrambe collegamenti, ma con effetti diversi.
Selezionando l'immagine con il simbolo "-" si ottiene che le voci che compaiono sotto a Regione Emilia Romagna scompaiano per essere riassorbite da questa macrocategoria.
Selezionando l'immagine con il simbolo "+" si ottiene la visualizzazione delle voci presenti nella sotto-sotto-categoria.

Se l'utente non dovesse comprendere che i collegamenti sono strutturati in categorie e sotto categorie, potrebbe rischiare di premere il collegamento con il simbolo "-", ritrovandosi ad avere un'unica voce nell'organigramma, con conseguente disorientamento.
Questa considerazione ci ha portato a stabilire impatto = 2 nelle barriere numero 2 e 3.

Ma ci troviamo di fronte anche ad un'altra barriera: ogni immagine con il simbolo "+" genera effetti diversi.
Cliccare sul simbolo "+" accanto ad Autorità, Aziende, Enti, genera l'apertura di un sotto menu che non è lo stesso rispetto a quello che si aprirebbe selezionando l'immagine "+" accanto a Biblioteche, e così via.

Quindi, se anche l'utente intuisse la struttura dell'organigramma, sarebbe comunque costretto a rileggere più volte la pagina per memorizzare tutti i collegamenti disponibili, in modo da selezionare esattamente l'immagine "+" vicina alla voce di cui vuole visualizzare le sotto-categorie.
Formalizziamo la barriera:

5) Barriera all'utilizzazione: linkambigui.

linkrappresentati da immagini che hanno lo stesso valore dell'attributo ALT, che non permettono ad un utente cieco di un lettore di schermo di selezionare il linkcorretto quando viene usata la funzione link list.

  • impatto = 2
  • frequenza = 2
  • gravità = serio

Ci pare però il caso di aggiungere che questa modalità di ricerca non solo è molto complessa e costringe l'utente ad uno sforzo significativo, ma viene anche utilizzata da un utente non sicuro di trovare l'informazione che cerca.
Più ci addentriamo nell'organigramma, insomma, e più aumenta il nervosismo dell'utente. Tuttavia, proseguire verso lo scopo non è impossibile, e nonostante le barriere emerse siano decisamente sentite, non possiamo assegnare loro gravità massima.

Supponiamo che l'utente sia stato in grado di capire la struttura dell'organigramma, e che facendo ripetere più volte il contenuto della pagina al lettore di schermo sia riuscito a selezionare esattamente l'immagine con attributo "cartella" vicina a "Autorità, Aziende, Enti".
Il fatto che questa possibilità non sia poi così remota, ci ha fatto assegnare valore 2 all'impatto della barriera numero 4.

Ora la versione grafica della pagina in cui si trova l'utente è:

altra immagine dell'organigramma aperto

Come si può immaginare, le barriere che si presenteranno saranno sempre la numero 2, 3 e 4.
A peggiorare le cose c'è il numero maggiore di collegamenti che verranno letti dal lettore di schermo, ma almeno questa volta compare il collegamento ad ARDSU, e quindi l'utente sa che sta procedendo nel modo giusto e che molto probabilmente l'informazione che cerca è presente.

Supponendo che ormai l'utente abbia capito come comportarsi, possiamo immaginare che riesca a selezionare l'immagine "+" accanto alla voce "ARDSU - Aziende Regionali Per il Diritto allo Studio Universitario" e quindi ad aprire un ulteriore livello del sotto menu, come mostra l'immagine seguente.

ultima immagine dell'organigramma aperto

Supponendo che l'utente riesca a selezionare il collegamento esatto, finalmente si aprirà la pagina Ardsu di Bologna - Azienda Regionale per il diritto allo studio universitario.

Pagina ARDSU Bologna

Il template della pagina è sempre lo stesso, abbiamo quindi lo skip link che permette di saltare al contenuto, la lettura della posizione corrente, e infine la lettura del paragrafo in cui si trova il numero di telefono desiderato.

L'unica barriera presente nella pagina è la numero 1 (funzionamento scorretto dello skip links "vai ai menu"), ma in questo scenario non è previsto che l'utente debba utilizzare lo skip links

Torna a inizio pagina

Compito 1.2

Pagina: Home page

Si vedano le considerazioni fatte per il primo compito.

Immaginiamo che l'utente usi lo skip link "vai ai menu"; la lettura comincia dal menu "Per i Cittadini". L'utente ascolta attentamente ogni voce del menu; raggiunta l'ultima voce viene letto con un diverso tono di voce il nome del menu successivo, che è Portali Tematici.
L'utente comprende che il menu che lo interessa è terminato, e può premere shift + H affinché gli venga letto lo heading precedente, ovvero per ricominciare da Per i Cittadini.
Come abbiamo fatto notare esaminando l'home page nel primo compito, tutti e soli i nomi dei menu hanno heading 2. Avvia di nuovo la lettura delle voci che compaiono in Per i Cittadini, e seleziona "Il mondo delle imprese".

Pagina: Il mondo delle Imprese

L'utente usa lo skip link "vai ai contenuti" e la lettura comincia da "Sei in: home page >> Il mondo delle Imprese". La pagina è costituita da un elenco di collegamenti, di cui vediamo una parte nell'immagine seguente:

parte dei collegamenti in Il mondo delle Imprese

Come abbiamo spiegato nel testo del compito, l'utente sa che deve selezionare la voce "Centri di assistenza tecnica"; perciò, non appena il lettore di schermo lo pronuncia, preme invio per selezionare il collegamento.

Se però avesse atteso la lettura di tutti i collegamenti, si sarebbe accorto che è presente un altro collegamento con etichetta "Centri di assistenza tecnica".
I due collegamenti rimandano a pagine diverse. Siamo perciò di fronte alla seguente barriera:

1) Barriera all'utilizzazione: link ambigui

link con diversa destinazione che hanno la stessa etichetta e che non permettono ad un utente cieco di un lettore di schermo di selezionare il link corretto quando viene usata la funzione link list.

  • impatto = 2
  • frequenza = 1
  • gravità = minore

Non soltanto, ma nella pagina sono presenti ben 46 collegamenti, suddivisi in gruppi sulla base dell'argomento di cui trattano le pagine cui ognuno di essi rimanda.
Nella links list del lettore di schermo questi 46 collegamenti compaiono uno di seguito all'altro.
L'utente abile è aiutato ad orientarsi e a distinguere tra gruppi diversi di collegamenti grazie alla loro struttura ad elenco puntato, non percepibile dall'utente cieco.

Sarà difficile capire, per esempio, che i collegamenti "Agroindustria" e "Cooperazione" fanno parte del gruppo "Imprese / industria" (si veda la figura).
Tuttavia, le etichette dei collegamenti sono sufficientemente lunghe da evocare un buon profumo dell'informazione. Per questo motivo abbiamo assegnato alla barriera un impatto 2.

2) Barriera al controllo da parte dell'utente: troppi link, non strutturati in gruppi

Troppi link nella pagine, che fanno sì che utenti ciechi impieghino tanto tempo e fatica a trovare il link che cercano e non riescano a distinguere tra i diversi gruppi di link.

  • impatto = 2
  • frequenza = 2
  • gravità = serio

Nella pagina non è presente nessuna altra barriera.

Pagina: Centri di Assistenza Tecnica 1

Supponiamo che l'utente abbia selezionato il primo dei due collegamenti "Centri di assistenza tecnica". Si trova perciò nella pagina http://www.regione.emilia-romagna.it/wcm/ERMES/Canali/imprese/commercio/centri_assistenza_tecnica.htm la cui posizione nel sito è: home page -> Il mondo delle imprese -> Commercio -> Centri di assistenza tecnica.

Non sono emerse barriere di alcun tipo durante l'analisi di questa pagina, anzi si è appurato come per l'utente sia facile muoversi all'interno della pagina.
Se l'utente sfrutta lo skip link "vai ai contenuti", il lettore di schermo inzierà dalla lettura del percorso finora intrapreso (breadcrumbs), per proseguire con la lettura dei paragrafi che compongono la pagina.
Ogni titolo di paragrafo ha heading 2, perciò viene pronunciato con una voce diversa, ed è facile saltare da un paragrafo all'altro.

Tuttavia, nella pagina non c'è traccia del Programma regionale per la concessione di contributi per interventi di assistenza tecnica. Eppure il suo amico aveva esplicitamente parlato di una pagina dal nome "centri di assistenza tecnica".
L'utente potrebbe fare ripartire la lettura da capo perché gli vengano riletti il titolo della pagina e le breadcrumbs; se lo facesse, si accerterebbe che la pagina si chiama effettivamente "Centri di Assistenza tecnica" e potrebbe essere indotto a pensare che il suo amico è in errore.

Supponiamo comunque che torni indietro, e che abbia lo scrupolo di fare rileggere da capo l'elenco di collegamenti presenti nella pagina IL MONDO DELLE IMPRESE.
A questo punto si accorgerà che esistono due occorrenze de "Centri di assistenza tecnica", e selezionerà la seconda.
Il suo stato d'animo sarà probabilmente buono, perché nonostante la pagina lo abbia indotto in errore e costretto ad un passaggio inutile, almeno è praticamente certo che il suo amico non si sbaglia e che nella pagina che andrà a visitare troverà il Programma Regionale.

Pagina: Centri di Assistenza Tecnica 2

La struttura di questa pagina è la stessa della pagina "Centri di Assistenza 1". Anche qui, quindi abbiamo una struttura a paragrafi facilmente navigabile, con etichette dei collegamenti abbastanza lunghe e chiare, che permetteranno al nostro utente di selezionare esattamente il collegamento alla scheda del Programma regionale per la concessione di contributi per interventi di assistenza tecnica a carattere sovraprovinciale realizzati dai CAT di livello regionale, (LR 41/1997, art.11, lett.a).

Pagina: Scheda

La struttura della pagina è esattamente come la stessa delle pagine appena viste: stessi skip links, stessi menu, presenza di breadcrumbs e stessi collegamenti a fondo pagina (links, privacy, credits, ecc.).
Il contenuto della pagina è costituito semplicemente da un paragrafo di testo, che è esattamente quello che interessa all'utente. Quindi, non si segnala la presenza di barriere.

  • impatto = 2
  • frequenza = 2
  • gravità = serio

Torna a inizio pagina

Compito 1.3

l'utente vuole iscriversi alla newsletter di Ermes per ricevere informazioni e notizie dal portale della regione Emilia-Romagna. Per farlo, dalla home page del portale della Regione, seleziona il link "Iscriviti alla newsletter". Si apre la pagina Newsletter con le ultime notizie dal portale. L'utente seleziona "per iscriverti" dal menu a sinistra. Compila il form e clicca sul pulsante "Iscrivimi".

Pagina: Home page

Si vedano le considerazioni fatte per il primo compito. Non emerge nessuna barriera.

L'utente a cui pensiamo non usa alcuno skip link e aspetta finchè il browser pronuncia "iscriviti alla newsletter". Sarà comunque uno dei primi collegamenti disponibili, quindi il fatto di non poter usare uno skip link non comporta in questo caso uno spreco di tempo.

Il lettore di schermo pronuncia:
"vai ai contenuti,
vai ai menu,
logo regione Emilia Romagna,"
il form per la ricerca,
"aiuto alla navigazione,
Ermes, il portale della regione Emilia Romagna,"
l'indirizzo dell'URP,
"Iscriviti alla Newsletter"

A questo punto l'utente preme invio e si trova nella pagina http://newsletter.regione.emilia-romagna.it/

Pagina: Newsletter

La pagina presenta un template diverso dalle altre del sito della Regione Emilia Romagna, perciò faremo un'analisi completa di questa pagina.

È presente un header con 2 immagini incluse nello sfondo, che vediamo nell'immagine:

immagini nello header della newsletter

Si tratta rispettivamente di collegamenti all'home page della Regione e alla pagina newsletter stessa.
Il fatto che si tratti di immagini incluse nello sfondo e usate come titoli (è il caso dell'immagine Newsletter) non costituisce una barriera all'accessibilità, visto che senza foglio di stile i collegamenti vengono comunque presentati e che la pagina ha l'elemento TITLE e che il testo "Informazioni e notizie dal portale della Regione Emilia-Romagna" non è un'immagine.

Lo header contiene quindi poche informazioni, che vengono lette del lettore di schermo abbastanza velocemente da non rendere necessaria la presenza di skip links.
Dopo la lettura dello header si prosegue con l'elenco dei collegamenti disponibili nel menu di sinistra; sono 4 collegamenti, quindi neanche la lettura di questi non costringe l'utente a perdere del tempo nel caso non fosse interessato a selezionarne uno.

Le notizie (che vediamo a centro pagina) sono suddivise in categorie. Il nome di ogni categoria ha heading 1, e per ogni categoria possono essere riportate una o più notizie, tutte con heading 2. Risulta quindi facile per l'utente non vedente muoversi fino a raggiungere la categoria o la singola notizia che lo interessa, nonostante manchino accesskeys e skip links.

Di ogni notizia è riportata in prima pagina solo l'introduzione, per leggere il testo completo è necessario selezionare il collegamento "segue...".
Siamo di fronte ad una barriera, dal momento che nella link list del lettore di schermo troviamo ben 12 occorrenze di questo tipo di collegamento (il numero è chiaramente variabile a seconda del numero di notizie presenti nella pagina, ma si tratterà sempre di un numero elevato). Ovviamente ogni occorrenza rimanda ad una destinazione diversa.

Barriera all'utilizzazione: link ambigui.

link con diversa destinazione che hanno la stessa etichetta e che non permettono ad un utente cieco di un lettore di schermo di selezionare il link corretto quando viene usata la funzione link list.

  • impatto = 2
  • frequenza = 1
  • gravità = serio

Tutte le immagini sono dotate di attributo "alt". I collegamenti che aprono nuove finestre del browser avvisano l'utente tramite l'attributo title="Il link verrà aperto in una nuova finestra" interno all'elemento <A>.
La pagina non utilizza frame né tabelle per l'impaginazione.
Non ci sono immagini in movimento.
Non sono presenti titoli spaziati né ascii art.
La lingua del documento è specificata, e tutte le parole straniere sono segnalate.

All'utente in cui ci immedesimiamo serve accedere alla prima voce del menu che viene letto subito dopo l'header.

Pagina: Iscrizione

Il template della pagina è esattamente quello della pagina precedente, ma qui non sono ovviamente presenti le notizie a centro pagina, bensì un form da riempire per poter iscriversi alla newsletter. Non è stata riscontrata alcuna barriera di accessibilità, ed anzi ci troviamo di fronte ad un form da prendere a modello (sempre che javascript sia abilitato), vediamo perché:

C'è un breve paragrafo di testo, interno alla form, che ne descrive il funzionamento (Per iscriversi alla newsletter di Ermes e ricevere ogni settimana nella propria casella di posta elettronica le notizie della Regione Emilia-Romagna, basta inserire i propri dati nel modulo seguente.
L'unico campo obbligatorio è quello dell'e-mail, ma gli altri dati che vorrete inviarci ci serviranno per conoscervi meglio e realizzare così una newsletter più utile e più vicina ai vostri interessi.)

Ogni label è esplicitamente associata al proprio controllo, ogni campo di testo editabile possiede già un testo di default, ogni label è posizionata esattamente prima del campo di testo editabile e l'ordine di percorrimento della form attraverso il tasto tab è perfettamente logico.

C'è anche un'area di testo (non editabile) in cui viene riportato il testo dell'informativa per il trattamento dei dati personali per il servizio. L'utente è costretto a leggerla (certo può saltare di paragrafo in paragrafo), ma certamente non ci si può aspettare la presenza di uno skip link per arrivare direttamente al pulsante "iscrivimi", visto che si suppone che tutti gli utenti leggano l'informativa.

Supponiamo che l'utente immetta solo l'email, prema il tasto "iscrivimi" e raggiunga con successo il proprio scopo.

Torna a inizio pagina

Torna a inizio pagina

Scenario 2

Compito 2.1

Partendo dalla home l'utente vuole reperire il numero di telefono dell'ARDSU (azienda regionale per il diritto allo studio universitario) di Bologna. Per farlo l'utente seleziona Telefoni e indirizzi" dal menu "La regione". Clicca poi su "vai all'organigramma". Quindi clicca sul pulsante con il simbolo + vicino a Regione Emilia Romagna. Clicca sul + posto vicino a "Autorità, Aziende, Enti"e su quello posto vicino a "Ardsu - Aziende Regionali per il diritto allo studio universitario". Infine seleziona Ardsu di Bologna - Azienda Regionale per il diritto allo studio universitario. Nella pagina è ora disponibile il numero di telefono desiderato.

Pagina: Home page

Le pagine prese in esame per lo svolgimento di questo e degli altri compiti non hanno generato alcuna barriera di accessibilità nei confronti di un utente ipovedente che utilizza un ingranditore di schermo.

Abbiamo perciò individuato non delle vere e proprie barriere, ma degli accorgimenti che si sarebbero potuti adottare per rendere ancora più facile la navigazione all'interno del sito.

I problemi che possono nascere per questo tipo di utenza sono perlopiù dovuti al fatto che i contenuti sono disposti in una vasta area, alle estremità della quale si trovano i menu principali.
Questo costringe l'utente a percorrere lunghe distanze per raggiungerli, ma riteniamo sia abituato a questo tipo di problemi.
Inoltre, ogni contenuto nella pagina ha caratteristiche grafiche (colore, forma, ecc.) che lo distinguono e che permettono all'utente ipovedente di sapere quale zona sta visualizzando, senza che si crei confusione.

Tutti i contenuti appaiono posizionati correttamente, nel senso che non ci sono vaste aree vuote che potrebbero indurre l'utente a pensare che non ci sia altro contenuto.
Il contrasto nella pagina è decisamente buono.
Tutti i contenuti della pagina si ingrandiscono correttamente. Le immagini accanto alle notizie in centro pagina se ingrandite risultano un po' sfuocate, ma sono immagini decorative accanto alle quali è comunque presente una descrizione dettagliata.

Supponiamo quindi che l'utente riesca a trovare facilmente la voce "telefoni e indirizzi" nel menu "La Regione" e che la selezioni.

Pagina: Telefoni e Indirizi

Si potrebbe obiettare che i testi che descrivono il funzionamento delle tre modalità di ricerca si espandono per tutta la larghezza della pagina.
Si potrebbe ridurre la larghezza dei box azzurri in modo da far stare tutto il contenuto della pagina in un'area meno vasta, senza costringere l'utente a spostarsi da un'estremità all'altra della finestra del browser per leggere una riga di testo. Nell'immagine seguente abbiamo rappresentato quest'idea (nota bene: non si tratta dello screenshot della schermata, quindi).

immagine con le tre modalità di ricerca più strette

In ogni caso, non consideriamo questa una barriera all'accessibilità, poiché crediamo che l'utente sia (purtroppo) abituato a questo tipo di situazione.

Per ottenere una schermata esattamente uguale a quella che abbiamo presentato noi, basta ridimensionare la finestra del browser. Si noti però che l'utene ha appena abbandonato l'home page, dove più la finestra del browser è grande e meno c'è bisogno di usare la barra di scorrimento di quest'ultimo.
Quindi, se con una piccola accortezza si può evitare all'utente di raggiungere la barra di navigazione ed effettuare il ridimensionamento, perché non farlo?

Le altre considerazioni da fare sono le stesse fatte per l'home page: tutti gli elementi presenti nella pagina si ingrandiscono perfettamente, il contrasto è buono e la pagina si è aperta nella stessa finestra di browser in cui prima si trovava l'home page.
Proseguendo verso il soddisfacimento dell'obiettivo, l'utente capirà di dover selezionare "vai all'organigramma".

Pagina: Organigramma 1

Neanche questa pagina genera barriere. Il contenuto è ridotto e si ingrandisce perfettamente. L'utente clicca sull'immagine del simbolo "+" accanto al collegamento "Regione Emilia Romagna".

Pagina: Organigramma 2

Dall'attivazione del collegamento che ha per etichetta l'immagine "+" si ottiene l'apertura di un sotto elenco di voci. L'organigramma è ben posizionato all'interno dell'area visualizzata dall'ingranditore di schermo, e per l'utente non è necessario effettuare alcuno scrolling.
Cliccando più volte sul simbolo "+" accanto al collegamento interessato, l'utente raggiungerà il collegamento all'ARDSU di Bologna. Non emerge nessuna barriera.

Pagina: ARDSU Bologna

La pagina http://www.regione.emilia-romagna.it/ermes/cercaregione/dettaglio_struttura.asp?rootRicerca=R0000001&cod_unita=URP00049 presenta il contenuto nella stessa area dove, nell'ultima pagina visitata, si trovava l'organigramma. Questo significa che per recuperare il numero di telefono cercato, l'utente non deve neanche muovere il cursore.
Le caratteristiche grafiche della pagina sono le stesse delle pagine visualizzate (ottimo contrasto, testo ingrandito perfettamente, ecc.).

Torna a inizio pagina

Compito 2.2

L'utente parte dalla home page del portale dell'Emilia Romagna e clicca su "Il mondo delle imprese", link disponibile nel menu "Per i cittadini". Deve trovare la scheda del "Programma regionale per la concessione di contributi per interventi di assistenza tecnica a carattere sovraprovinciale realizzati dai CAT di livello regionale", in modo da sapere il termine e la modalità di presentazione delle domande. Un amico gli ha detto che il programma si trova in una pagina dal nome "Centri di assistenza Tecnica". Trovato il Programma, clicca su "scheda" per leggere i dettagli di suo interesse.

Pagina: Home page

Si veda l'analisi della pagina effettuata nel compito 2.1.

L'utente nel quale ci immedesimiamo riesce a trovare facilmente il collegamento a "Il mondo delle imprese" nel menu "Per i cittadini".

Pagina: Il mondo delle Imprese

La pagina è priva di barriere per l'utente ipovedente. Tuttavia mentre la analizzavamo con l'ingranditore di schermo, abbiamo fatto non poca fatica.
Spieghiamo qui le cause delle difficoltà incontrate.

Il template della pagina è lo stesso dell'home page.
ù Il contenuto della pagina è costituito da un insieme di collegamenti, organizzati in elenco puntato. I collegamenti sono 46, e per visualizzarli tutti è necessario effettuare uno scrolling verso il basso usando la barra di scorrimento del browser (questo anche per utenti abili).
Analizziamo le azioni dell'utente per capire quale problema può derivare da quest'osservazione.

L'utente legge un primo gruppo di collegamenti, tutti quelli visualizzati nella finestra di explorer. Per visualizzare quelli seguenti, ha bisogno di abbandonare l'area in cui i collegamenti sono visibili e spostarsi a destra per raggiungere la barra di scorrimento.
Ora sul suo schermo vede una parte a sinistra completamente bianca e vuota, e a destra la barra di scorrimento che vuole usare. Effettuato lo scrolling l'utente si risposta a sinistra verso il gruppo di collegamenti.
Dovrà spostarsi verso l'alto, cercando l'ultima voce letta per riprendere la lettura da quel punto. Se ha fatto scorrere troppo la barra del browser, è probabile che l'ultima voce letta non sia più visibile all'interno della finestra di explorer.
Quindi potrebbe succedere che per visualizzare l'ultima voce letta non basti spostare il puntatore verso l'alto, ma sia necessario un nuovo scrolling (verso l'alto) della barra del browser.
Questo significa spostarsi a destra per raggiungere di nuovo la barra di scorrimento, poi tornare di nuovo verso il gruppo di link, e sperare di riconoscere tra questi quelli già letti.
È possibile che i collegamenti che si trovano al centro dell'intero elenco di collegamenti non vengano letti dall'utente, proprio perché tra uno spostamento e l'altro l'utente non si rende conto della loro presenza.

Ora, per evitare questo modo di procedere laborioso e rischioso, serve avvicinare la barra di scorrimento del browser all'elenco puntato di collegamenti, per esempio ridimensionando la finestra del browser.
È possibile che l'utente ipovedente sia abituato a questo tipo di situazioni, e nonostante abbia appena lasciato l'home page, in cui anzi più la finestra di browser era grande e più contenuti si potevano raggiungere, sappia che per procedere ordinatamente è necessario ridimensionare la finestra.

Non considereremo questa una barriera, ma è stato interessante scoprire quest'inconveniente frequentissimo per gli ipovedenti.

Supponiamo quindi che l'utente riesca a visualizzare da subito il collegamento "Centri di Assistenza Tecnica". Nel suo campo visivo però ci sono due occorrenze di "Centri di Assistenza Tecnica":
la prima si trova sotto alla macro-voce "Commercio", l'altra sempre sotto a "Commercio" ma anche a "Finanziamenti".

Siamo di fronte alla seguente barriera:

2) Barriera all'utilizzazione: link ambigui

link con diversa destinazione che hanno la stessa etichetta, e per i quali all'utente (disabile e non) risulta impossibile desumere dal contesto l'effetto che l'attivazione di questi produrrà.

  • impatto = 2
  • frequenza = 1
  • gravità = serio

Immaginiamo che l'utente attivi il primo collegamento.

Pagina: Centri di assistenza tecnica 1

La pagina in cui si trova l'utente presenta lo stesso template dell'home page. I contenuti sono strutturati in paragrafi, ben leggibili.
Anche qui il problema contro cui l'utente si scontra è il testo che si espande orizzontalmente e che lo costringe a spostare il puntatore per leggerlo.
Ma come sempre l'ostacolo è aggirabile ridimensionando la finestra del browser, e si noti che l'utente avrebbe già dovuto farlo nella pagina precedente.

Possiamo immaginare che l'utente legga il contenuto dei paragrafi di testo, non veda alcun programma regionale per la concessione di contributi per interventi di assistenza tecnica e decida quindi di tornare indietro, per provare a selezionare il secondo collegamento dal nome "Centri di Assistenza tecnica".

Pagina: Centri di assistenza tecnica 2

Stesse considerazioni fatte per la pagina precedente. Questa volta l'utente riuscirà a trovare il programma che lo interessa, e a selezionare l'icona della scheda sotto al paragrafo "Modulistica online".

Pagin: Scheda

Grazie alla struttura a paragrafi del testo che costituisce il contenuto della pagina, e grazie a poche frasi in grassetto, per l'utente è facile orientarsi nella pagina e scansionare il testo.

Torna a inizio pagina

Compito 2.3

l'utente vuole iscriversi alla newsletter di Ermes per ricevere informazioni e notizie dal portale della regione Emilia-Romagna. Per farlo, dalla home page del portale della Regione, seleziona il link "Iscriviti alla newsletter". Si apre la pagina Newsletter con le ultime notizie dal portale. L'utente seleziona "per iscriverti" dal menu a sinistra. Compila il form e clicca sul pulsante "Iscrivimi".

Pagina: Home page

Si vedano le considerazioni fatte per il compito 2.1. Non emerge alcuna barriera, anzi per l'utente è facile orientarsi all'interno della pagina. Riuscirà a individuare il collegamento "Iscriviti alla Newsletter" presente in prima pagina.

La pagina si aprirà e non sarà subito visibile il menu di sinistra dove si trova il collegamento che l'utente deve attivare ("per iscriverti"). Basterà che sposti il puntatore verso sinistra perchè venga visualizzato.
I contenuti della pagina sono tutti perfettamente ingrandibili, comprese le immagini che costituiscono il titolo della pagina. Le immagini accanto ad ogni notizia risultano leggermente sfuocate, ma si tratta solo di complementi grafici alla notizia che hanno a fianco.
Sono presenti diversi paragrafi di testo, ognuno fa parte di uno dei seguenti gruppi: Primo piano, Il punto, Attualità, La regione per, Da oggi su Ermes, o Incontri; il nome di questi gruppi è scritto in grassetto su sfondo colorato, come si vede nell'immagine:

struttura a paragrafi di newsletter

Per un utente abile è immediato associare un determinato paragrafo al gruppo di cui fa parte, proprio grazie ad elementi di presentazione. Per esempio il testo è incluso esattamente sotto alla striscia colorata dove è presente la scritta "Primo piano", quindi questo testo fa parte di "Primo Piano".
Per un utente ipovedente la cosa non è così scontata, ma essendo i paragrafi di testo ridotti, la famosa striscia colorata in cui compare il nome del gruppo, è sempre visibile.
Risulta perciò facile associare ogni paragrafo di testo al gruppo di cui fa parte.

La lettura è sequenziale (dal basso verso l'alto), gli unici due gruppi di testo che si trovano uno a fianco all'altro hanno colori di sfondo diversi. Questi due box di colore diverso costituiscono un punto di riferimento per l'utente, che è così aiutato nel capire se si trova nella parte alta, centrale o bassa della pagina.
Il fatto che siano presenti collegamenti con la stessa etichetta e che rimandano a pagine diverse, stiamo parlando dei molteplici "segue..." alla fine di ogni paragrafo di testo, non costituisce una barriera visto che come abbiamo spiegato è facile per l'utente associarli alla notizia a cui si riferiscono.

Se l'utente non volesse selezionare il collegamento "per iscriverti", ma volesse seguire altri collegamenti, come quello all'home page della regione o quello che rimanda al sito www.donaresangue.it, questi si aprirebbero in nuove finestre del browser.
Non appena il cursore si posiziona sopra uno di questi collegamenti, compare un "alt" che spiega che la pagina si aprirà in una nuova finestra.

Immaginiamo che l'utente clicchi su "per iscriverti".

Pagina: Home page

La pagina contiene un form, tutte le label sono posizionate esattamente vicino al campo di testo cui si riferiscono, e questo è già editato con un testo di default, che aiuta l'utente ad avere conferma di quello che deve scrivere nel campo di testo.
La form si espande in verticale, per visualizzarla l'utente deve solo spostare il proprio cursore verso il basso.

L'unico fastidio potrebbe emergere dal fatto che, come già accaduto nello svolgimento dei precedenti compiti, il testo che spiega il funzionamento delle form si espande in orizzontale, costringendo l'utente ad abbandonare la zona dove la form è visibile. Tuttavia in questo brevissimo paragrafo di testo è presente una frase in grassetto, che può essere presa come punto di riferimento dall'utente.

Immaginiamo quindi che l'utente non si scontri contro alcuna barriera mentre riempie i text field della form, e che porti a termine il compito con successo e con grande facilità.

Torna a inizio pagina

Scenario 3

Partendo dalla home l'utente vuole reperire il numero di telefono dell'ARDSU (azienda regionale per il diritto allo studio universitario) di Bologna. Per farlo l'utente seleziona Telefoni e indirizzi" dal menu "La regione". Clicca poi su "vai all'organigramma". Quindi clicca sul pulsante con il simbolo + vicino a Regione Emilia Romagna. Clicca sul + posto vicino a "Autorità, Aziende, Enti"e su quello posto vicino a "Ardsu - Aziende Regionali per il diritto allo studio universitario". Infine seleziona Ardsu di Bologna - Azienda Regionale per il diritto allo studio universitario. Nella pagina è ora disponibile il numero di telefono desiderato.

Compito 3.1

Pagina: Home page

Il foglio di stile associato a tutte le pagine del sito non prevede alcuno stile specifico per i dispositivi portabili (non sono specificate regole di presentazione del tipo @media handheld { ).

Per questo motivo il sito visualizzato su palmare presenta un layout disordinato che rende la navigazione estremamente difficile.
Cominciamo mostrando come appare la prima pagina all'utente:

parte in alto a sinistra dell'home page visualizzata su palmare

L'utente potrebbe a questo punto capire che gli conviene impostare la visualizzazione del palmare in maniera orizontale, visto che altrimenti i contenuti appaiono troppo schiacciati tra loro, e per saltare quelli che sono brevi paragrafi di testo è costretto ad un interminabile scolling verso il basso.

Cambiata la modalità di visualizzazione la pagina gli apparirà così:

parte in alto a sinistra dell'home page visualizzata su palmare in modalità orrizontale

Leggermente meglio, quindi, ma ancora molto male.

Siamo di fronte alla seguente barriera:

1)Barriera alla percezione: testo e immagini mal posizionati

L'utente di un dispositivo portabile con schermo ridotto non riesce a capire la struttura della pagina, di conseguenza non riesce a fruire i contenuti in maniera ordinata.

  • impatto = 2
  • frequenza = 3
  • gravità = critico

Per raggiungere il menu "La Regione" l'utente sarà costretto ad effettuare uno scrolling verso il basso superando, nell'ordine:

  • lo header della pagina, che ha dimensioni molto grandi
  • il menu "per i cittadini" a sinistra e le notizie di attualità a destra
  • il box "portali tematici" a sinistra e quello "Notizie dai portali" a destra

Ora troverà la parte sinistra dello schermo vuota e nella parte destra prima il box "primo piano" e, infine, il menu La Regione che vediamo nell'immagine seguente:

come appare il menu La Regione su palmare

Lo scrolling impegna l'utente per circa 15 secondi (considerando che deve leggere velocemente il contenuto che appare sullo schermo), fino a poter cliccare sul collegamento "telefoni e indirizzi".

Pagina: Telefoni e Indirizzi

Anche in questa pagina la disposizione dei contenuti è pessima; per poter visualizzare le tre modalità di ricerca l'utente è costretto ad un continuo scrolling sia verticale che orizzontale, come possiamo vedere dalle seguenti due immagini:

prima immagine della pagina telefoni e indirizzi su palmare seconda immagine della pagina telefoni e indirizzi su palmare

Siamo sempre di fronte alla barriera 1 (segnalata nella pagina precedente).

In ogni caso, con un maggiore sforzo, l'utente dovrebbe comunque riuscire a capire che deve scegliere l'organigramma e a selezionare il collegamento opportuno.

Pagina: Organigramma

Dato il poco contenuto della pagina, possiamo dire che la disposizione grafica degli elementi in questa pagina potrebbe essere migliorata, per esempio eliminando l'immagine nello header, ma in generale la pagina è navigabile.
Ecco come appare l'organigramma:

prima immagine dell'organigramma

L'utente dovrebbe riuscire a selezionare l'immagine con il simbolo "+" per aprire le sotto voci de "Regione Emilia Romagna".
Ecco come appare l'organigramma aperto fino a che è stata raggiunga la voce "ARDSU DI BOLOGNA":

immagine organigramma completamente aperto su palmare

Il fatto che la struttura sia ad elenco puntato e che le macrocategorie abbiano accanto all'immagine della cartella il simbolo "-" aiuta l'utente nell'orientarsi all'interno dell'organigramma.
Questo comporta anche uno spreco di spazio sulla sinistra, che si potrebbe eliminare spostando l'organigramma verso il margine sinistro della pagina.

Pagina: ARDSU Bologna

Anche in questa pagina il contenuto è poco, l'unico difetto della pagina è la presenza dello header ed in particolare dell'immagine che lo costituisce, che è troppo grande.
Per il resto, il contenuto viene visualizzato tutto entro un'unica schermata.

pagina con indirizzo e numero di telefono

Torna a inizio pagina

Compito 3.2

L'utente parte dalla home page del portale dell'Emilia Romagna e clicca su "Il mondo delle imprese", link disponibile nel menu "Per i cittadini". Deve trovare la scheda del "Programma regionale per la concessione di contributi per interventi di assistenza tecnica a carattere sovraprovinciale realizzati dai CAT di livello regionale", in modo da sapere il termine e la modalità di presentazione delle domande. Un amico gli ha detto che il programma si trova in una pagina dal nome "Centri di assistenza Tecnica". Trovato il Programma, clicca su "scheda" per leggere i dettagli di suo interesse.

Pagina: Home page

Si vedano le considerazioni fatte per il compito 3.1. L'utente in cui ci immedesimiamo dovrebbe riuscire a trovare il collegamento "il mondo delle imprese" abbastanza velocemente.

Pagina: Il mondo delle Imprese

La pagina appare nel seguente modo:

pagina il mondo delle imprese su palmare

Si noti che a differenza di quanto accade con un normale browser su pc, qui non è più disponibile a sinistra il menu "per i cittadini".
Ci sembra la soluzione ottimale, anche se inconsapevolmente adottata dagli sviluppatori, perché grazie alle breadcrumbs l'utente conosce esattamente la sua posizione all'interno del sito, e grazie alla barra di navigazione in alto può scegliere di abbandonare la pagina in cui si trova attualmente, per esempio per raggiungere di nuovo il menu "per i cittadini", senza usare il pulsante back del mouse.

Tuttavia, dall'immagine si nota anche la disposizione confusa dei collegamenti, proprio nella barra di navigazione menzionata poco fa. Si noti come "Servizi on-" e "line" sono disposti su due righe, lontani tra loro. Siamo sempre di fronte alla barriera già definita (Testo e immagini mal posizionati).

Ora l'utente dovrà selezionare il collegamento "Centri di assistenza tecnica", e solo se sarà fortunato effettuerà abbastanza scrolling verticale da vedere anche la seconda occorrenza del collegamento "Centri di assistenza tecnica", come possiamo vedere nell'immagine seguente:

pagina il mondo delle imprese

In ogni caso, non saprà quale dei due collegamenti attivare, e siamo perciò di fronte alla seguente barriera:

2) Barriera all'utilizzazione: link ambigui

link con diversa destinazione che hanno la stessa etichetta, e per i quali all'utente (disabile e non) risulta impossibile desumere dal contesto l'effetto che l'attivazione di questi produrrà.

  • impatto = 2
  • frequenza = 1
  • gravità = serio

Supponiamo che attivi il primo collegamento.

Pagina: Centri di assistenza tecnica 1

La pagina visualizzata dal palmare compare nel seguente modo:

assistenza tecnica 1 su palmare

Ora è di nuovo visibile il menu "per i cittadini" sulla sinistra. Questo può causare disorientamento nell'utente che potrebbe chiedersi se quel menu sia parte della pagina in esame e non del template, come invece è.
Non consideriamo questa come un'ulteriore barriera, poiché è presumibile che dalle voci presenti nel menu l'utente capisca che non ha a che fare con un menu relativo all'Assistenza Tecnica, e magari si ricordi di averlo già visto in home page. Inoltre, supponiamo sia focalizzato nella ricerca del Programma regionale per la concessione di contributi per interventi di assistenza tecnica, e che non vada a cercare altri collegamenti.

Si renderà in ogni caso conto, che in questa pagina non c'è traccia del Programma che cerca. Quindi, usando il pulsante indietro del mouse, tornerà alla pagina "Il mondo delle Imprese" e selezionerà la seconda occorrenza del collegamento "centri di assistenza tecnica".

Pagina: Centri di assistenza tecnica 2

La pagina in esame apparirà esattamente come la pagina precedentemente visualizzata, per cui non mostriamo alcuno screenshot.
Nel paragrafo "modulistica online" l'utente troverà il programma che cerca e cliccherà su "scheda" per visualizzarlo. Il collegamento a "scheda" appare vicino al nome completo del Programma.

Pagina: Scheda

La pagina appare nel seguente modo:

pagina scheda su palmare

Grazie alla suddivisione in paragrafi del testo, e al fatto che i titoli di questi sono scritti in grassetto, l'utente riuscirà facilmente a reperire l'informazione che cerca.

Torna a inizio pagina

Compito 3.3

l'utente vuole iscriversi alla newsletter di Ermes per ricevere informazioni e notizie dal portale della regione Emilia-Romagna. Per farlo, dalla home page del portale della Regione, seleziona il link "Iscriviti alla newsletter". Si apre la pagina Newsletter con le ultime notizie dal portale. L'utente seleziona "per iscriverti" dal menu a sinistra. Compila il form e clicca sul pulsante "Iscrivimi".

Pagina: Home page

Si vedano le considerazioni fatte nel compito 3.1. L'utente deve in questo caso andare alla ricerca del collegamento "iscriviti alla newsletter", che si trova subito dopo l'header. Perciò non sarà necessario alcuno scrolling per raggiungere quel collegamento.

Pagina: Newsletter

Neanche il foglio di stile di questa pagina possiede regole di presentazione specifiche per dispositivi portabili, e questo è il risultato:

pagina newsletter per palmare

Il collegamento "per iscriverti" è subito visibile, ma l'utente che non ha ancora visto l'intera pagina non può essere certo che quello sia effettivamente il link da attivare.
Tramite uno scrolling verso il basso, ecco che cosa visualizzerà:

pagina newsletter con notizia di attualità visualizzata su palmare

Come possiamo vedere, la parte sinistra dello schermo è completamente vuota e sprecata. Il fatto che le notizie si susseguano l'un l'altra verticalmente, fa aumentare il tempo necessario a visualizzare tutta la pagina, ma almeno i contenuti sono disposti ordinatamente.
Dopo aver visualizzato tutta la pagina, l'utente sarà sicuro che l'unico menu a disposizione è quello che viene visualizzato in alto, e che quindi il collegamento più appropriato da attivare è proprio "per iscriverti".

Pagina: Iscrizione

La pagina contenente il form si presenta particolarmente male. Di seguito presentiamo tre screenshot per fare capire quali spostamenti l'utente è costretto a compiere per avere una visione d'insieme.

Prima che il form sia visualizzato (e che quindi l'utente capisca di essere arrivato alla pagina giusta), è costretto a leggere il paragrafo "iscrizione":

paragrafo iscrizione nella pagina iscrizione su palmare

Poi finalmente saranno visibili i campi del form, che l'utente riempirà:

campi del form in pagina iscrizione su palmare

Successivamente sarà costretto a leggere tutto il testo dell'Informativa sul trattamento dei dati personali, o comunque a fare uno scrolling che dura 10 secondi.
Certo, potrebbe direttamente posizionare la barra di scorrimento alla fine della pagina, ma di solito un utente di palmare sa di dover procedere con maggior cautela per non rischiare di non vedere informazioni importanti e di perdere quindi ancora più tempo alla ricerca delle informazioni non visualizzate.

Alla fine dell'informativa, la schermata visualizzata dall'utente sarà:

fine dell'informativa su palmare, il pulsante iscrivimi non è visibile

Come possiamo vedere non è visibile alcun pulsante per inviare i dati immessi nel form. Solo se l'utente sa di dover premere un pulsante per inviare al server i dati immessi, andrà alla ricerca di un pulsante.
Siamo di fronte alla seguente barriera:

1) Barriera all'utilizzazione: Form ampie

Form strutturate su una vasta area dello schermo possono indurre utenti ipovedenti o utilizzatori di dispositivi mobili, a non riempire tutti i campi di testo o a non premere i pulsanti opportuni.

  • impatto = 2
  • frequenza = 1
  • gravità = serio

Se l'utente non è principiante, è plausibile che effettui uno scrolling verso destra per cercare il pulsante di invio form. Lo troverà proprio nel riquadro che si vede in fondo alla schermata precedente. Quando proverà a premerlo, però, non accadrà nulla.
Questo perché il suo browser non supporta javascript, mentre il form è controllato da uno script.
Siamo di fronte alla seguente barriera:

2)Barriera all'utilizzazione: uso di tecnologie non supportate dal browser

Per qualsiasi tipo di utenza che utilizzi un browser che non supporta o ha disabilitato una determinata tecnologia, l'utilizzo delle funzionalità da questa messe a disposizione è impossibile.

  • impatto = 3
  • frequenza = 1
  • gravità = critico

Torna a inizio pagina

Elenco barriere riscontrate

Barriera all'utilizzazione: mancanza di caratteri stampabili (delimitati da spazi), non facenti parte dei collegamenti, per separare i collegamenti adiacenti

Utenti utilizzatori di lettori di schermo non riescono a distinguere tra la fine di un collegamento e l'inizio del successivo, non riuscendo a capire quindi quali sono le etichette dei collegamenti e rischiando di attivare il collegamento sbagliato.

  • impatto = 1
  • frequenza = 2
  • gravità = minore

Emerge nello scenario 1 (utente affetto da cecità totale), durante lo svolgimento dei primi due compiti.

Barriera all'utilizzazione: cattivo funzionamento degli skip links

L'attivazione di uno skip link non produce l'effetto atteso descritto dall'etichetta dello skip link.

  • impatto = 1
  • frequenza = 2
  • gravità = minore

Emerge nello scenario 1 (utente affetto da cecità totale), durante lo svolgimento di tutti i compiti.

Barriera all'utilizzazione: presenza di immagini, una funzionale e una non, con medesimo valore dell'attributo ALT, posizionate una di seguito all'altra

L'utente cieco si trova impossibilitato a distinguere tra le due immagini. È costretto ad utilizzare funzionalità del lettore di schermo (come la link list, se l'immagine funzionale è un link) per attivare solo l'immagine funzionale.

  • impatto = 2
  • frequenza = 2
  • gravità = serio

Emerge nello scenario 1 (utente affetto da cecità totale) durante lo svolgimento del primo compito nella pagina organigramma.

Barriera all'utilizzazione: immagine funzionale con alt inutile/disorientante

L'immagine funzionale possiede un ALT che impedisce all'utente cieco di avere un'idea chiara della pagina che si aprirà dopo l'attivazione del collegamento costituito dall'immagine.

  • impatto = 2
  • frequenza = 2
  • gravità = serio

Emerge nello scenario 1 (utente affetto da cecità totale) durante lo svolgimento del primo compito, nella pagina organigramma.

Barriera all'utilizzazione: link ambigui

link rappresentati da immagini che hanno lo stesso valore dell'attributo ALT, che non permettono ad un utente cieco di un lettore di schermo di selezionare il link corretto quando viene usata la funzione link list.

  • impatto = 2
  • frequenza = 2
  • gravità = serio

Emerge nello scenario 1 (utente affetto da cecità totale) durante lo svolgimento del primo compito, nella pagina organigramma 2

Barriera all'utilizzazione: link ambigui

link con diversa destinazione che hanno la stessa etichetta e che non permettono ad un utente cieco di un lettore di schermo di selezionare il link corretto quando viene usata la funzione link list.

  • impatto = 2
  • frequenza = 1
  • gravità = serio

Emerge in tutti gli scenari durante lo svolgimento del secondo compito, nella pagina il mondo delle imprese.

Barriera al controllo da parte dell'utente: troppi link, non strutturati in gruppi

Troppi link nella pagine, che fanno sì che utenti ciechi impieghino tanto tempo e fatica a trovare il link che cercano e non riescano a distinguere tra i diversi gruppi di link.

  • impatto = 2
  • frequenza = 2
  • gravità = serio

Emerge nello scenario 1 (utente affetto da cecità totale) durante lo svolgimento del secondo compito, nella pagina il mondo delle imprese .

Barriera alla percezione: testo e immagini mal posizionati

L'utente di un dispositivo portabile con schermo ridotto non riesce a capire la struttura della pagina, di conseguenza non riesce a fruire i contenuti in maniera ordinata.

  • impatto = 2
  • frequenza = 3
  • gravità = critico

Emerge nello scenario 3 (utente utilizzatore di palmare) durante lo svolgimento di tutti i compiti.

Barriera all'utilizzazione: Form ampie

Form strutturate su una vasta area dello schermo possono indurre utenti ipovedenti o utilizzatori di dispositivi mobili, a non riempire tutti i campi di testo o a non premere i pulsanti opportuni.

  • impatto = 2
  • frequenza = 1
  • gravità = serio

Emerge nello scenario 3 (utente utilizzatore di palmare) durante lo svolgimento del compito 3, nella pagina iscrizione.

Barriera all'utilizzazione: uso di tecnologie non supportate dal browser

Per qualsiasi tipo di utenza che utilizzi un browser che non supporta o ha disabilitato una determinata tecnologia, l'utilizzo delle funzionalità da questa messe a disposizione è impossibile.

  • impatto = 3
  • frequenza = 1
  • gravità = critico

Emerge nello scenario 3 (utente utilizzatore di palmare) durante lo svolgimento del compito 3, nella pagina iscrizione.

Torna a inizio pagina