Valutazione di conformità del sito Regione Marche  [1]

Simulazione euristica guidata da barriere del sito Regione Umbria  [2]

Introduzione [i]
Perimetro d'indagine [p]
Sommario risultati [s]
Dettaglio risultati [d]

User testing del sito Regione Marche  [3]

Valid XHTML 1.0 Strict

Valid CSS!

Simulazione Euristica Guidata da Barriere del sito http://www.regione.umbria.it

di Abele Matthias e Vettorello Marco

25/11/2007

Introduzione

Di seguito verrà presentata una relazione sull'accessibilità del sito della Regione Umbria che segue il metodo della Simulazione euristica guidata da Barriere proposto dal Professor Giorgio Brajnik.

Questo metodo è un adattamento del metodo della simulazione euristica, che presenta, al posto dei principi, delle barriere di accessibilità alle quali si può andare incontro visitando un sito web. Le barriere comprendono qualsiasi condizione che rende difficile o impossibile raggiungere un obiettivo da parte dell'utente con particolari disabilità, incluse quelle derivanti dall'uso di tecnologie assistive.

Le barriere sono categorizzate a seconda del tipo di utente, del tipo di disabilità, del tipo di tecnologia assistiva utilizzata, dall'attività che viene ostacolata dalla barriera e dalle caratteristiche della/e pagina/e che erigono lo barriera. Nella nostra analisi abbiamo preso in considerazione solamente alcune delle categorie proposte da Brajnik:

Per ogni categoria d'utente abbiamo ipotizzato un caso d'uso del sito in questione e abbiamo analizzato una a una le pagine interessate, verificando le possibili barriere, la gravità di ciascuna barriera (basandoci sull'impatto e la frequenza), le possibili conseguenze e i possibili rimedi.

Come è stato detto in precedenza le gravità di ciascuna barriera si basano su due fattori:

In seguito la tabella per il calcolo delle gravità di una barriera.

Tabella per il calcolo delle gravità
ImpattoFrequenzaGravità
11minore
12minore
13serio
21serio
22serio
23critico
31critico
32critico
33critico

Gli strumenti utilizzati per l'analisi del sito sono i seguenti:

|

Perimetro d'indagine

Per ogni categoria di utente sono stati considerati i seguenti casi d'uso:

Le pagine sono state scelte in riferimento alle diverse categorie d'utenti; sono state scelte determinate pagine che, in una preliminare analisi del sito, presentavano delle possibili barriere. Inoltre si è cercato di analizzare più pagine possibili, e di diversa fattura per avere un'analisi ad ampio raggio.

Le pagine sono state analizzate nella seconda settimana di Novembre 2007

| |

Sommario dei risultati

Dopo aver analizzato ciascuna pagina a seconda del caso d'uso preso in considerazione, sono stati riscontrati alcuni problemi gravi comuni a più pagine e altri solamente specifici del particolare scenario d'uso. Tutto sommato il sito non presenta troppi casi critici, ciò significa che, nella sua progettazione, si è pensato all'accessibilità, anche se non abbastanza.

La barriera riscontrata più frequentemente con un livello di gravità medio-alto (con i termini che abbiamo utilizzato nell'introduzione possiamo indicare il livello di gravità tra serio e critico) è quella relativa a pagine che presentano troppi link. Infatti per 3 casi su 4 (utente non vedente, utente disabile motorio e disabile cognitivo) si è riscontrato che la maggior parte delle pagine analizzate presentano numerosi link, forse troppi per essere analizzati e utilizzati dall'utente in modo produttivo. Difatti un numero eccessivo di link distrae l'utente, lo costringe ad una attenta analisi per individuare la strada verso il suo obiettivo: creando più profondità nelle pagine del sito si riesce a creare percorsi logici che evitano l'analisi di troppi link non necessari al proprio scopo. La seconda barriera più ricorrente è quella relativa alla suddivisione in sezioni del contenuto informativo della pagina: tutte le pagine analizzate non utilizzano i tag H1,H2,...H6 per dividere il testo in sezioni, per evidenziare titoli di categoria e di paragrafo. La mancanza di titoli ben marcati per distinguere le varie parti della pagina crea non pochi problemi, sia per un utente non vedente che non riesce a prefigurarsi la pagina, sia per un disabile cognitivo che non riesce a distinguere nettamente i confini tra i vari contenuti; è scorretta la soluzione puramente grafica a questa barriera, la migliore, invece, è l'utilizzazione degli headers H1,H2...H6 per dividere le varie sezioni e enfatizzare i titoli.

Le pagine solo testo, proposte dal sito Regione Umbria, sono realizzate solamente utilizzando fogli di stile per eliminare le immagini della pagina originale, in alcuni casi le immagini sono ancora presenti, mentre in altri casi addirittura non esistono pagine solo testo. Anche questo è un grave difetto; se con la visualizzazione standard ci si confonde troppo, causa immagini o link mal posizionati, con le pagine solo testo si ha una linearizzazione totale che permette di scorrere in modo fluido la pagina, evitando immagini decorative e sezioni interattive inutili. Un grosso difetto, presente in tutto il sito, è quello di realizzare pagine con layout diversi a seconda della sezione o dell'area tematica in cui ci si trova, vanificando l'uso delle pagine solo testo perchè l'utente si trova di fronte a pagine solo testo con i link principali, i titoli e le sezioni, sempre in posizioni differenti.

Le pagine non hanno un titolo adeguato a seconda del loro contenuto, ognuna presenta lo stesso titolo, creando confusione e disagio sia ad utenti non vedenti che ad utenti non disabili: la prima cosa che viene caricata (o lette se si utilizza un lettore di schermo) è il titolo, essendo sempre lo stesso, prima di aprire tutta la pagina non saprò se mi trovo in quella giusta.

Senza JavaScript, alcune funzioni importanti per cui è stato realizzato il sito, come la visualizzazione dei Bollettini Ufficiali della Regione, non possono essere eseguite, non sono stati inoltre realizzati metodi alternativi per ovviare a questo problema in caso di mancanza di plugin JavaScript.

I problemi riscontrati quindi riguardano principalmente la logica utilizzata per la disposizione e la redazione delle informazioni, e problemi riguardanti la progettazione "fisica" delle pagine, dove sono stati lasciati in disparte alcuni aspetti importanti di accessibilità.

Di seguito vengono presentati in dettaglio i risultati delle barriere riscontrate suddivisi per tipologia d'utente e di barriera riscontrata. Infine, per ogni tipologia d'utente, viene presentata una tabella riassuntiva con i valori di gravità di ogni barriera riscontrata.

Di seguito viene presentata una tabella con le barriere più gravi riscontrate:

Barriere gravi per un utente non vedente
BarrieraImpattoFrequenzaGravità
Pagine senza titoli23Critica
Immagini come titoli31Critica
Colore essenziale13Seria
Troppi link22Seria
Suddivisione in sezioni22Seria

Barriere gravi per un disabile motorio
BarrieraImpattoFrequenzaGravità
Link troppo vicini e troppo piccoli23Critica
Troppi link22Seria

Barriere gravi per un utente disabile cognitivo
BarrieraImpattoFrequenzaGravità
Pagine solo testo32Critica
Troppi link23Critica
Testo complesso22Seria
Suddivisione in sezioni22Seria
Barriere gravi per un utente di browser senza JavaScript
BarrieraImpattoFrequenzaGravità
Eventi del mouse33Critica

Dettaglio dei risultati

Utente non vedente

| |

Immagini ricche senza testo alternativo


Pagine analizzate in cui si presenta la barriera
Gravità: MINORE

Impatto:1 Frequenza:1

Descrizione della barriera riscontrata:

L'unica pagina del sito che presenta delle immagini ricche senza testo alternativo è l'Home Page. Difatti nella parte destra della pagina è presente un immagine (ogni volta che si accede alla pagina, quest'immagine cambia) che rappresenta sia un immagine decorativa del sito, che un immagine significativa ai fini culturali, infatti raffigura delle foto di paesaggi e luoghi caratteristici dell'Umbria. Di seguito due esempi:

Figura 1: Esempio di immagine priva di testo alternativo

Immagine significativa culturalmente ma priva di testo alternativo

Figura 2: Altro esempio di immagine priva di testo alternativo

Immagine significativa culturalmente ma priva di testo alternativo

Esempio di codice:

<img src="http://www.regione.umbria.it/resources/hp/home1.jpg" alt="Regione Umbria"/>
Osservazioni:

Effettivamente esiste un testo alternativo per l'immagine ma è troppo generico e non aiuta di certo a capire di che immagine si tratta. Per un utente non vedente, che utilizza un lettore di schermo, sentirsi dire dallo stesso: "immagine: Regione Umbria" è privo di significato e ambiguo, lo può interpretare come una foto della regione,una cartina geografica o una scritta Regione Umbria.

Rimedi:

È da preferirsi un testo alternativo che descriva sommariamente l'immagine, per evitare ambiguità. Se l'immagine è a puro scopo decorativo è preferibile lasciare vuoto l'attributo ALT, in modo da permettere ad un lettore di schermo di passare oltre senza soffermarsi sull'immagine. Se invece l'immagine è troppo dettagliata per una descrizione sommaria è consigliato l'uso del tag OBJECT per scrivere, al suo interno, una descrizione dettagliata dell'immagine. In alternativa è possibile creare una piccola didascalia a lato, o subito prima o dopo, che descriva l'immagine.

| |

Colore essenziale

Gravità: SERIA

Impatto:1 Frequenza:3

Pagina/e analizzata/e in cui si presenta la barriera
Descrizione della barriera riscontrata:

Nella pagina Vivere in salute, viene utilizzato il colore per evidenziare l'apertura di un sotto menu nella barra di navigazione di sinistra. Viene colorato di rosso il titolo della pagina e vengono inseriti, con uno sfondo grigio scuro, i link principali presenti all'interno della pagina.

Figura 3: Uso del colore per evidenziare i sottomenu

Uso del colore per info essenziali nel menu

Esempio di codice:

<li class="def"> <a href="/canale.asp?id=157">Essere Cittadini</a></li>

<li class="def-sel"> <a href="/canale.asp?id=154">Vivere in salute</a></li>

<li class="fig"> <a href="http://sanita.regione.umbria.it/canale.asp?id=101">Aziende Sanitarie Umbre</a></li>

<li class="fig"> <a href="http://sanita.regione.umbria.it/canale.asp?id=105"<Osservatorio epidemiologico</a></li>

<li class="fig"> <a href="http://sanita.regione.umbria.it/canale.asp?id=200">Osservatorio prezzi e tecnologie</a></li>

<li class="fig"> <a href="http://sanita.regione.umbria.it/canale.asp?id=109">118</a></li>

<li class="fig"> <a href="http://sanita.regione.umbria.it/canale.asp?id=110">Donazione degli organi</a></li>

<li class="fig"> <a href="http://sanita.regione.umbria.it/canale.asp?id=256">Donazione del sangue</a></li>

<li class="fig"> <a href="http://sanita.regione.umbria.it/canale.asp?id=106">Educazione Continua in Medicina (ECM)</a></li>

<li class="fig"> <a href="http://sanita.regione.umbria.it/canale.asp?id=214">In agenda</a></li>

<li class="def"> <a href="/canale.asp?id=163">Avere una casa</a></li>

Osservazioni:

Come si può notare dall'esempio di codice riportato sopra, vengono utilizzati "stratagemmi" CSS per visualizzare,con colori differenti, il menu e il sotto menu: utilizzando la classe "def-sel" si colora il titolo in rosso, utilizzando la classe "fig" si definisce l'a partenenza al sottomenu con colorazione di sfondo grigio scuro e con la classe "def" si indicano i link del menu non a partenenti alla pagina selezionata. Questo metodo è poco efficace, un lettore di schermo infatti non riuscirebbe a percepire i colori, leggendo ogni volta un menu diverso a seconda della pagina in cui ci si trova, l'utente può rimanere disorientato e non capire il motivo del cambiamento del menu. È d'aiuto per un utente vedente, è di supporto alle breadcrumbs nella parte alta della pagina, ma per un utente non vedente può risultare molto scomodo: se scorre la pagina in modo tabulato, si trova link ripetuti sia nella sezione centrale che nella barra di navigazione.

Rimedi:

Evitare di utilizzare il colore per enfatizzare le informazioni importanti, usare altri mezzi per rappresentarle, aggiungendo, nel caso in esame, un paragrafo con su scritto "Sottomenu della pagina" oppure utilizzare delle liste annidate. Usare il colore solo come decorazione grafica.

| |

Link generici

Pagina/e analizzata/e in cui si presenta la barriera
Gravità: MINORE

Impatto:1 Frequenza:1

Descrizione della barriera riscontrata:

Nella prima pagina riportata sopra, Cittadini, è presente un collegamento con un etichetta "Links", troppo generica; non si riesce a capire a che cosa si riferisca, se c'è stato un errore di scrittura, o se è un collegamento ad altri collegamenti, pagine o contatti.

La pagina In agenda invece presenta numerosi collegamenti dall'etichetta "Programma", che fanno riferimento al programma del rispettivo convegno o del corso indicato sopra e non forniscono sufficienti informazioni se posti fuori contesto.

Figura 4: Etichetta di un link generica nella pagina Cittadini

Link generico nella pagina Cittadini

Figura 5: Etichette generiche nella pagina In Agenda

Link generici nella pagina In Agenda
Osservazioni:

Nel primo caso l'etichetta del link è troppo generica e porta ad ambiguità ( e per evitare ripetizioni non verrà riproposta la stessa barriera anche per i link ambigui), non si intuisce al primo istante dove porta quel collegamento,solo una volta entrati si riesce a capire cos'è effettivamente. Il secondo caso, quello dei link "programma" è preoccupante, perchè se un utente non vedente che utilizza un lettore di schermo, scorre solamente i link presenti all'interno della pagina, si trova ad ascoltare per parecchie volte di seguito la parola Programma senza capire di che convegno,corso o quant'altro si tratti.

Rimedi:

In entrambi i casi è preferibile specificare meglio dove porterà quel link, ad esempio utilizzare l'etichetta Contatti oppure Collegamenti Istituzionali esterni al posto di Links e per ogni programma specificare a che corso o a che convegno fa riferimento.

| |

ASCII art

Pagina/e analizzata/e in cui si presenta la barriera
Gravità: MINORE

Impatto:1 Frequenza 2

Descrizione della barriera riscontrata:

Nelle pagine riportate sopra vengono utilizzare i caratteri ">>" per indicare che si tratta di un elemento in una lista.

Figura 6: Lista di link con caratteri non pronunciabili per indicare gli elementi

Osservazioni:

Queste liste di link separate da caratteri non pronunciabli sono difficili da leggere per un lettore di schermo, rallentano la lettura e diminuiscono la soddisfazione dell'utente.

Rimedi:

Rimuovere tutti i caratteri non pronunciabili, eventualmente inserire delle immagini prive di attributo ALT. Si può evitare nel codice HTML usando la proprietà list-style-type nel CSS.

| |

Pagine senza titoli

Pagina/e analizzata/e in cui si presenta la barriera
Gravità: CRITICA

Impatto: 2 Frequenza: 3

Descrizione della barriera riscontrata:

Le pagine Home,Cittadini e Vivere in salute hanno sempre lo stesso titolo: "Regione Umbria sito Istituzionale". Nella pagina In Agenda il titolo cambia, e passa dal titolo generale "Regione Umbria sito Istituzionale" a "Servizio sanitario Regionale - www.regione.umbria.it" che non rispecchia il contenuto della pagina.

Figura 9: Titolo generico della pagina Vivere in salute

Figura 10: Titolo generico della pagina In Agenda

Osservazioni:

Il problema che viene creato inserendo titoli non informativi del contenuto delle pagine è grave: il lettore di schermo legge per primo il titolo della pagina, se questo non è informativo l'utente può non capire a che pagina è arrivato, se non leggendo titoli, link e contenuti della pagina.

Rimedi:

Evitare titoli generici e ambigui, e renderli più possibile informativi in riferimento al contenuto della pagina.

| |

Marcatura della lingua

Gravità: ininfluente
Descrizione della barriera riscontrata:

Quando si scrive un testo dove sono presenti termini stranieri, o comunque differenti dalla lingua principale adottata dal documento, è necessario inserire degli attributi lang all'interno di tag span per specificare il cambiamento della lingua. Il cambiamento di lingua è necessario al lettore di schermo per cambiare impostazioni di lettura delle parole in modo da pronunciare le parole a seconda della lingua utilizzata.

Osservazioni:

Nelle pagine analizzate non sono presenti termini stranieri diversi dall'italiano, a parte alcune parole ormai diventate d'uso comune come link, privacy, copyright, che dovrebbero essere comunque racchiuse da un tag, ad esempio SPAN, per specificare che sono termini inglesi da pronunciare in modo differente. Siccome sono effettivamente poche le occasioni in cui si presentano questi casi, si è considerata nulla e ininfluente la gravità, ma abbiamo comunque voluto segnalarlo.

| |

Suddivisione in sezioni

Pagina/e analizzata/e in cui si presenta la barriera
Gravità: SERIA

Impatto: 2 Frequenza: 2

Descrizione della barriera riscontrata:

Nelle pagine Cittadini e Vivere in salute non vengono utilizzati i tag di sezione H1,H2...H6 per suddividere i titoli dal contenuto, al contrario vengono utilizzati accorgimenti grafici come bold, il grassetto, per evidenziare i titoli, oppure utilizzando CSS per impostare le dimensioni dei caratteri dei titoli


Esempio di codice HTML:

<div class="boxcentro1-titolo">Cittadini</div>

Esempio di codice CSS:

.boxcentro1-titolo {background-color:#8296A1; color:#FFFFFF; padding: 5px; margin: 2px 0px 5px 0px; font-weight: bold; font-size: 1.5em;}
Osservazioni:

Il lettore di schermo permette all'utente di listare inizialmente solo i titoli delle sezioni, in modo da scegliere direttamente il punto della pagina interessato. La mancanza della divisione in sezioni crea dei problemi quando un utente si trova per sbaglio in una pagina errata: per capire dov'è, ha bisogno di analizzare tutto il contenuto della pagina; non essendo presente il titolo della pagina, deve scorrerla tutta, e non trovando delle sezioni marcate può fraintendere alcune parole con il titolo della pagina, rallentando efficacia e produttività dell'utente.

Rimedi:

Utilizzare i tag H1,H2...H6 per ogni tipo di contenuto, dalla barra di navigazione ai paragrafi di sequenza, rispettando la sequenza da H1 a H6, senza salti.

| |

Immagini come titoli

Pagina/e analizzata/e in cui si presenta la barriera
Gravità: MINORE

Impatto: 3 Frequenza: 1

Descrizione della barriera riscontrata:

Nella pagina In agenda incontriamo immagini come link, senza testo alternativo. Questa barriera si discosta leggermente da quella originale ma si è pensato di includerla comunque.

Osservazioni:

Le immagini logo In Agenda e ECM presenti nella parte in basso a sinistra, sotto la barra di navigazione, attivano dei link alle rispettive pagine, ma purtroppo un lettore di schermo non "legge" l'immagine ma legge solamente il testo alternativo alt; in questo caso le immagini sono prive di alt e quindi disabilitando le immagini si perde totalmente il collegamento.

Vengono utilizzate alcune immagini come titoli ma riportano solamente il testo del titolo principale della pagina, già presente nel tag TITLE della pagina.

Rimedi:

Non utilizzare le immagini come link se prive di testo alternativo, inoltre evitare di creare 2 collegamenti uguali alla stessa pagina realizzati uno con il testo e uno con l'immagine sottostante, visto che il lettore di schermo leggerà 2 volte lo stesso link.

| |

Mancanza di tasti rapidi

Pagina/e analizzata/e in cui si presenta la barriera
Gravità: MINORE

Impatto:1 Frequenza:1

Descrizione della barriera riscontrata:

Nella pagina Accessibilità del sito Regione Umbria, vengono presentati gli accesskey per saltare più velocemente da un contenuto all'altro della pagina e da un controllo della form all'altro. Questi tasti rapidi funzionano perfettamente in tutto il sito a parte nella Home Page.

Osservazioni:

I tasti rapidi presentati nella pagina di accessibilità, permettono all'utente di passare, premendo una combinazione di tasti, alla Home Page, alla sezione dei contenuti della pagina, al menu di navigazione, alla personalizzazione della visualizzazione, alla sezione di autenticazione, agli strumenti di ricerca e alla guida stessa all'accessibilità. Purtroppo per la Home Page questi tasti rapidi sono disabilitati, togliendo la possibilità di andare alla guida all'accessibilità con un tasto. Questa barriera non è così influente per un utente non vedente, ma prendendo il caso di un utente ipovedente, che ha bisogno di pagine solo testo, o colori differenti attivabili con la barra di comandi di personalizzazione del sito regione Umbria, la mancanza di questi tasti rapidi diminuisce notevolmente l'efficacia e la produttività. Da un lato è poco importante perchè si riscontra questo problema solo nella Home Page, dall'altro visto che per visitare un sito si incomincia quasi sempre dalla pagina principale, la home, è bene risolvere questo problema.

Rimedi:

Inserire l'attributo accesskey presentato nelle pagine di guida all'accessibilità anche nella Home Page.

| |

Pagina solo testo

Pagina/e analizzata/e in cui si presenta la barriera
Gravità: MINORE

Impatto:1 Frequenza: 2

Descrizione della barriera riscontrata:

Secondo le barriere redatte dal prof. Brajnik, se viene presentata una pagina solo testo con contenuto di informazioni minore della pagina originale, l'utente si rifiuta di usarla. Nel nostro caso sono sempre presenti le pagine di solo testo, ma purtroppo, essendo solamente un effetto grafico in questo sito, in vari casi sono presenti anche immagini Flash.

Osservazioni:

Per realizzare le pagine solo testo viene utilizzato un CSS a parte che permette di nascondere tutte le immagini, renderizzando male la pagina: ad esempio i comandi di accessibilità e di personalizzazione sono posizionati alla fine della pagina, e per arrivarci è necessario scorrerla tutta.

Rimedi:

Creare delle pagine alternative che contengano effettivamente solo testo, che siano aggiornate come le pagine originali, e che siano realizzate con un layout che migliori al massimo la loro fruibilità, come disporre il titolo e i comandi principali in alto sulla pagina.

| |

Tabella riassuntiva

Barriere per un utente non vedente
BarrieraImpattoFrequenzaGravità
Pagine senza titoli23Critica
Immagini come titoli31Critica
Colore essenziale13Seria
Troppi link22Seria
Suddivisione in sezioni22Seria
ASCII art12Minima
Pagine solo testo12Minima
Immagini ricche senza testo alternativo11Minima
Link Generici11Minima
Mancanza di tasti rapidi11Minima
Marcatura lingua00Ininfluente

Utente disabile motorio

| |

Mancanza di tasti rapidi

Pagina/e analizzata/e in cui si presenta la barriera
Gravità: MINORE

Impatto:1 Frequenza:1

Descrizione della barriera riscontrata:

Nella pagina Accessibilità del sito Regione Umbria, vengono presentati gli access key per saltare più velocemente da una parte della pagina all'altra, da un contenuto all'altro e da un controllo della form all'altro. Questi tasti rapidi funzionano perfettamente in tutto il sito a parte nella Home Page.

Osservazioni:

I tasti rapidi presentati nella pagina di accessibilità, permettono all'utente di passare, premendo una combinazione di tasti, alla Home Page,alla sezione dei contenuti della pagina, al menu di navigazione, alla personalizzazione della visualizzazione, all'autenticazione, agli strumenti di ricerca e alla guida stessa all'accessibilità. Purtroppo per la Home Page questi tasti rapidi sono disabilitati, togliendo la possibilità di andare nella guida all'accessibilità con un tasto. Questa barriera non è così influente per un utente non vedente, ma prendendo il caso di un utente ipovedente, che ha bisogno di pagine solo testo, o colori differenti attivabili con la barra di comandi di personalizzazione del sito regione Umbria, la mancanza di questi tasti rapidi diminuisce notevolmente l'efficacia e la produttività. Da un lato è poco importante perchè si riscontra questo problema solo nella Home Page, dall'altro visto che per visitare un sito si incomincia quasi sempre dalla pagina principale, è bene risolvere questo problema.

Rimedi:

Inserire l'attributo accesskey presentato nelle pagine di guida all'accessibilità anche nella Home Page.


| |

Tabella riassuntiva:

Barriere per un disabile motorio
BarrieraImpattoFrequenzaGravità
Link troppo vicini e troppo piccoli23Critica
Troppi link22Seria
Mancanza di tasti rapidi11Minima

Utente disabile cognitivo

| |

Link generici

Pagina/e analizzata/e in cui si presenta la barriera
Gravità: MINORE

Impatto: 1 Frequenza: 1

Descrizione della barriera riscontrata:

Nella pagina Formazione e Lavoro sono presenti due link/pulsanti con un etichetta "entra..." generica e poco informativa.

Figura 13: Pulsanti entra troppo generici

Osservazioni:

Questi link sono troppo generici e totalmente privi di informazione, attirano l'occhio, ma purtroppo ci si sofferma solamente sul link e non sul testo o sulle immagini attorno ad esso; ci si trova nella stessa situazione di vedere i link fuori contesto.

Rimedi:

Specificare in modo conciso e informativo dove porterà il link/pulsante.

| |

Link ambigui

Pagina/e analizzata/e in cui si presenta la barriera
Gravità: Minore

Impatto: 1 Frequenza: 1

Descrizione della barriera riscontrata:

Vengono utilizzate delle parole ambigue per etichettare alcuni link presenti nella pagina, esse confondono e distraggono soprattutto se contestualizzate con le parole vicine. Vi sono inoltre alcuni link non attivi che stimolano ad essere cliccati, e link con significati vaghi e fuori contesto con il resto della pagina.

Figura 14: Pulsante di ricerca ambiguo dal nome avvia...

Figura 15: Link ambiguo e fuori luogo: contatta il gruppo editoriale

Figura 16: Link manuale di navigazione e glossario disabilitati

Figura 17: Link mappa disabilitato

Osservazioni:

Nella prima immagine è presente un errore semantico/logico, difatti, utilizzando etichette come Cerca e Avvia, si rischia di far confusione sul significato, linearizzando le etichette Avvia Cerca si va in contro un errore logico; una modifica alle etichette può rimediare a questo inconveniente. È presente un link "Contatta il gruppo editoriale" che è posto fuori luogo nella pagina e verrebbe mal compreso. Inoltre i 3 link disabilitati: Manuale di navigazione, Glossario e acronimi e Mappa inducono l'utente a cliccare i link, magari ripetutamente visto che al primo impatto non funzionano.

Oltre alle pagine analizzate proposte da questa relazione, navigando all'interno del sito si è trovata una discordanza tra le parole utilizzate per rappresentare il link che porta alla pagina precedentemente visualizzata. In una parte del sito viene utilizzata l'etichetta Indietro, mentre su altre parti del sito viene utilizzata l'etichetta Back. Questa situazione porta ad doversi adattare a due etichette differenti per lo stesso comando, non presentano ambiguità ma confusione e difficoltà di apprendimento.

Rimedi:

Cercare una relazione semantica corretta per i link: ad esempio nel caso del form di ricerca utilizzare etichette differenti ( Ricerca al posto di Cerca, oppure "Inserisci la parola" al posto di "Cerca" e "Avvia la ricerca" al posto di "Avvia..."), evitare di separare graficamente il titolo, "Ricerca nel sito", dalla parte sottostante, e raggruppare al meglio le etichette. Inserire i link in modo ragionato evitando fraintendimenti con i link affianco e evitando di inserirli se fuori contesto. Se un link non è disponibile, per una ristrutturazione del sito o perchè non è ancora stata inserita la pagina, evitare di inserire il link disabilitato nella pagina, o inserire una pagina momentanea con la spiegazione che il link non è ancora disponibile.

L'analisi di questa barriera si discosta leggermente dai casi proposti dal professor Brajnik, ma ci è sembrato giusto analizzare i link ambigui non solo nei casi di etichette ripetute, ma anche nei casi in cui le etichette sono ambigue, portano significati differenti e fanno agire in maniera errata l'utente.

| |

Assenza di icone

Segnaliamo una buona utilizzazione delle icone nella pagina Aree tematiche. Alcune icone hanno una similitudine semantica con i link a cui fanno riferimento, altre rappresentano i loghi conosciuti di associazioni, bandiere e territori.

| |

Testo complesso

Pagina/e analizzata/e in cui si presenta la barriera
Gravità: SERIA

Impatto: 2 Frequenza: 2

Descrizione della barriera riscontrata:

Nella pagina Home vengono utilizzati degli acronimi senza utilizzare il tag ABBR per lo scioglimento. Lo stesso avviene nella pagina Aree Tematiche, vengono utilizzati acronimi sciolti separatamente da dove era effettivamente necessario, o addirittura non vengono sciolti per nulla(Fig.17 e Fig.18). Sia nella pagina Formazione e lavoro che nella pagina Le offerte formative vengono utilizzati termini tecnici, come Misura C3, POR obiettivo 3, Codice UM, e frasi abbreviate senza spiegarle (Fig.19 e Fig.20).

Figura 17: Acronimi sciolti separatamente

Figura 18: Acronimi non sciolti

Figura 19: Link con numerosi termini tecnici

Figura 20: Altri link con numerosi termini tecnici

Osservazioni:

Ognuno di questi problemi rende difficile la lettura e porta confusione a chi legge. Il sito ha disposto un glossario per spiegare i termini di uso più comune ma, come descritto nella barriera segnalata poco sopra, il link non sembra essere attivo, quindi è praticamente inutile.

Rimedi:

Semplificare più possibile la struttura delle frasi e la terminologia utilizzata, inserire sempre lo scioglimento di acronimi e abbreviazioni dei termini ed inserire una pagina di glossario, visto che il link è già già stato predisposto.

| |

Sito complesso

Pagina/e analizzata/e in cui si presenta la barriera
Gravità: Minore

Impatto: 1 Frequenza: 2

Descrizione della barriera riscontrata:

La pagina Aree Tematiche è organizzata in maniera complessa, presenta varie sezioni disposte in modi non convenzionali, ad esempio la sezione "In evidenza" viene posizionata nella parte bassa della pagina, vengono usati due menu di navigazione, uno a destra e uno a sinistra della pagina, di cui uno non inerente con il resto della pagina (Fig. 21). La pagina "Formazione e lavoro" è anch'essa molto complessa, oltre alle due barre di navigazione verticali e una orizzontale non opportunamente organizzate, viene proposto un player multimediale senza un apparente motivo.

Figura 21: Menu di destra non inerente con il resto della pagina

Osservazioni:

L'utilizzo di numerose barre di navigazione disorienta l'utente, inoltre se mal organizzare può creare frustrazione e indurre all'abbandono del compito da parte dell'utente. Nella pagina "Formazione e lavoro" sono inoltre presenti link non funzionanti, come descritto nella barriera link ambigui. Viene presentato un player audio multimediale che può distrarre l'utente e allontanarlo dal suo obiettivo.

Rimedi:

Semplificare l'architettura informativa del sito eliminando tutto ciò che non è necessario, creando una logica nell'espressione del contenuto. Mettere in primo piano le informazioni importanti e di largo uso; cercare di creare sezioni semanticamente logiche non solamente all'interno delle stesse ma anche con quelle confinanti.

| |

Campi di testo

Pagina/e analizzata/e in cui si presenta la barriera
Gravità:

Impatto: 1 Frequenza: 2

Descrizione della barriera riscontrata:

In entrambe le pagine non vengono presentati esempi di riempimento nei campi di testo delle form. Nei form di ricerca e di login non è presente nessun esempio, ne all'interno del campo di testo ne all'esterno.

Osservazioni:

La mancanza di esempi crea difficoltà nella compilazione degli stessi. Bisogna però notare che essendo form di semplice compilazione, non si creerà alcun grave disagio.

Rimedi:

Bisogna sempre fornire un esempio all'interno del campo di testo di una form, senza tener conto della semplicità della form: anche se il campo richiede una parola, è sempre bene inserire un esempio: "inserire qui le parole da ricercare"

| |

Suddivisione in sezioni

Pagina/e analizzata/e in cui si presenta la barriera
Gravità: SERIA

Impatto: 1 Frequenza: 3

Descrizione della barriera riscontrata:

Nessuna delle pagine analizzate contiene tag di tipo H1,H2...H6 per la suddivisione in sezioni del contenuto.

Osservazioni:

Non marcando bene i titoli delle varie sezioni si rischia di diminuire la produttività dell'utente, perchè gli si richiede uno sforzo maggiore per capire dove porre l'attenzione. Vengono utilizzati si testi in grassetto e colori di sfondo per le varie sezioni, ma questo non basta, perchè i titoli scritti in piccolo e con poco contrasto possono essere non visti o confusi da parte dell'utente.

Rimedi:

Per ogni tipo di contenuto utilizzare sempre i tag H1,H2...H6 per migliorare la visibilità delle sezioni e delle categorie interne alla pagina

| |

Pagina solo testo

Pagina/e analizzata/e in cui si presenta la barriera
Gravità: CRITICA

Impatto: 3 Frequenza: 2

Descrizione della barriera riscontrata:

Tralasciando la discussione relativa alla Home e alla pagina "Aree Tematiche" che è uguale a quella proposta per l'utente non vedente, il difetto si presenta all'utente nelle pagine relative a "Formazione e lavoro" è, dove manca la pagina di solo testo.

Osservazioni:

Per un disabile cognitivo una pagina solo testo può rappresentare un problema, vista la mancanza di icone e la struttura verticale che si viene a creare; purtroppo eliminando del tutto la pagina solo testo si crea un disagio maggiore, l'utente disorientato dalla complessità della pagina originale, si vorrebbe rifugiare in una pagina linearizzata di solo testo, non trovandola si demoralizza e probabilmente abbandona il suo obiettivo.

Rimedi:

Fornire sempre una pagina solo testo aggiornata come quella originale, evitando singoli stratagemmi CSS, e cercando di crearla in modo che sia molto fluida alla lettura e che non sia troppo lunga per lo scrolling verticale. Il titolo della pagina, informazioni principali, quelle per tornare alla modalità classica di visualizzazione e la barra di navigazione è meglio che siano posizionate ad inizio pagina.


| |

Tabella riassuntiva

Barriere per un utente disabile cognitivo
BarrieraImpattoFrequenzaGravità
Pagine solo testo32Critica
Troppi link23Critica
Testo complesso22Seria
Suddivisione in sezioni22Seria
Link ambigui12Minima
Sito complesso12Minima
Campi di testo12Minima
Link generici11Minima

Utente di browser senza JavaScript

| |

Prefazione

Il sito non presenta un pesante utilizzo di JavaScript. Inizialmente si è pensato di analizzare un altra categoria di utenti ma dopo aver analizzato in lungo e in largo il sito, abbiamo scoperto una sezione che utilizzava JavaScript in modo errato. Sono state scelte determinate pagine per analizzare proprio quei problemi che derivano dall'uso di JavaScript. Nelle altre pagine del sito si nota solamente un tasto chiamato "Indietro" che permette di tornare alla pagina precedentemente visualizzata nella cronologia del browser. Senza JavaScript, la funzione "Indietro" non è disponibile, ma si può utilizzare senza difficoltà la funzione di Back del browser. È ininfluente anche il player audio in JavaScript presente in basso alla pagina "Formazione e lavoro" e i pulsanti "Invia" e "Stampa" nel sito principale della Regione Umbria; sono ininfluenti perchè non essendo essenziale il player, non viene notato il suo mancato funzionamento; i pulsanti per salvare e per inviare la pagina per email sono, inoltre, già integrati nei più diffusi browser.

|

Eventi del mouse

Pagina/e analizzata/e in cui si presenta la barriera
Gravità: CRITICA

Impatto: 3 Frequenza: 3

Descrizione della barriera riscontrata:

Nelle due pagine viene utilizzato un codice JavaScript dipendente da dispositivo, in questo caso dipendente dal mouse. Nella pagina BUR viene utilizzato onclick() per aprire la pagina relativa all'anno scelto tramite il menu a tendina contenente l'anno dell'archivio (Fig.23). Nella pagina Bollettini invece ciascun bollettino presenta, alla sua sinistra, un icona rappresentante una cartella da ufficio (Fig.24). Solamente con JavaScript abilitato è possibile cliccarci sopra e visualizzare le informazioni del bollettino scelto.

Figura 23: Pagina BUR dove viene usato JavaScript

Esempio di codice:

<P align=left><A style="CURSOR: hand" onclick=TrovaBollettino(1);><U><FONT face=Verdana color=#ffffff size=1><B>Parte I e II - Serie Generale</B></FONT></U></A></P>

Figura 24: Cartelle apribili solo con JavaScript

Esempio di codice:

<b><img src="images/item_close.gif" onclick="ApriChiudi('b_721', 'images/item_open.gif', 'images/item_close.gif')" id="b_721img" style="cursor: pointer;"/>  Bollettino n.60 del 29-12-2006 </b>
Osservazioni:

Solamente con JavaScript integrato nel browser è possibile accedere a tali informazioni e funzioni. Il sito non presenta strade alternative. Presenta solamente una form di difficile compilazione, priva di esempi e con un risultato che utilizza la stessa tecnica JavaScript dell'apertura delle cartelle rendendo impossibile l'accesso ai bollettini in altri modi.

Rimedi:

Usare gestori di eventi non dipendenti da dispositivo come onfocus(), onkeypress(). Cercare di rendere tutte le informazioni disponibili anche senza JavaScript, utilizzare quindi tecnologie lato server e non lato client per implementare le varie funzioni.

Tabella riassuntiva

Barriere per un utente di browser senza JavaScript
BarrieraImpattoFrequenzaGravità
Eventi del mouse33Critica