Introduzione [i]
Perimetro d'indagine [p]
Sommario risultati [s]
Dettaglio risultati [d]
di Abele Matthias e Vettorello Marco
25/11/2007
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:
Impatto: Viene assegnato un punteggio da 1 a 3 a seconda se la barriera può essere superata o aggirata,se incide notevolmente sull'efficacia e/o sicurezza del sito, e se non esistono vie alternative per superare tale problema.
Frequenza: Anche per la frequenza viene assegnato un punteggio da 1 a 3 a seconda della frequenza in cui il problema si riscontra durante il compito preso in esame.
In seguito la tabella per il calcolo delle gravità di una barriera.
| 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 |
Gli strumenti utilizzati per l'analisi del sito sono i seguenti:
|
Per ogni categoria di utente sono stati considerati i seguenti casi d'uso:
Utenti di lettori di schermo o di browser parlanti; utenti di barre Braille; tipicamente ciechi, talvolta ipovedenti.
Questa categoria potrebbe includere anche utenti vedenti ma costretti ad usare qualche tecnologia disabilitante: browser che non visualizzano immagini, portali vocali.
Giovanna, 35 anni, fin dalla nascita è non vedente a causa di una malformazione del feto. Ha imparato si da subito a conoscere ed usare il Braille. Ha imparato ad usare un lettore di schermo da pochi anni ed utilizza quotidianamente Internet per informarsi sul mondo che la circonda.
Giovanna vuole rimanere informata sui vari convegni e corsi sulla salute, in particolar modo quelli riguardanti la cecità e i problemi legati alle strutture di sostegno ai disabili, che si svolgono nella sua regione. Quando ha tempo ed è a casa, si connette a Internet e naviga sul sito della regione Umbria per tenersi aggiornata sui vari convegni.
Persone con menomazioni fisiche per le quali l'uso del web può essere influenzato dalla mancanza di controllo muscolare o nervoso delle braccia e mani, da tremore o dalla mancanza di agilità delle dita e delle mani.
La categoria potrebbe includere persone solo temporaneamente disabili (ad es. con il braccio in gesso), oppure persone che usano il sito in posizioni inusuali (ad es. durante una presentazione in pubblico, sul podio in piedi).
Nel giorno 16 dicembre 2000 a Terni una tremenda scossa di terremoto ha fatto crollare l'officina nella quale lavorava Luigi, un ragazzo di 27 anni; i soccorsi sono arrivati troppo tardi e non hanno fatto in tempo per evitare l'amputazione dell'avambraccio destro di luigi.
Luigi si trasferì poco tempo dopo, e adesso, passati quasi 7 anni dall'incidente, desidera controllare a che punto sono gli interventi di ricostruzione della sua città. Perciò controlla sul sito della regione Umbria a che punto è la ricostruzione.
Persone con abilità limitata di elaborare e ricordare informazioni, prendere decisioni o apprendere; includono disabili nell'apprendere (dislessici o disgrafici), con disturbi nell'attenzione, con disabilità nella crescita (es. autismo, Down) o con disturbi neurologici (es. Alzheimer).
Questa categoria potrebbe includere anche persone che usano il sito sotto stress (ad es. con fretta in un ambiente rumoroso e pieno di distrazioni, o durante la guida di un'automobile).
Inoltre la categoria può includere anche visitatori del sito di una lingua straniera.
Paola, 24 anni è affetta da sindrome di Down in "forma leggera" e, avendo compiuto da poco 24 anni,dopo essere stata seguita e aiutata per anni dai servizi sociali, è diventata autonoma e vorrebbe entrare nel mondo del lavoro. Non avendo mai lavorato prima ha bisogno di alcuni corsi di formazione per incominciare a lavorare.
Ha delle conoscenze discrete del computer, è stata abituata presto ad utilizzarlo per affrontare la sua situazione, internet lo usa da pochi anni ma sa già districarsi su motori di ricerca e siti informativi. Incomincia quindi ad esplorare il sito della sua regione per trovare informazioni riguardanti corsi di formazione.
Utenti di browser o sistemi che non sono in grado di elaborare istruzioni JavaScript. Ad es. microbrowser a bordo di telefonini o PDA; ad es. utenti di sistemi proxy, gateway o transcoder.
Anche agenti artificiali, come gli spider dei motori di ricerca, o i sistemi di test automatizzati, si trovano nella situazione di non poter elaborare istruzioni JavaScript.
Francesco, 30 anni, è un perito informatico e fa parte del consiglio comunale di Assisi. Da poco tempo si è comperato un palmare di ultima generazione per poter tenersi informato, dovunque, degli avvisi importanti che il comune pubblica liberamente sul sito proprio sito web. Nei giorni scorsi però, Francesco ha scoperto un difetto nel suo nuovo palmare e lo ha mandato in garanzia; adesso deve usare il suo vecchio modello, utilizzando un browser datato, senza javascript e un display a bassa risoluzione.
Per tenersi informato, deve comunque potersi connettere al sito della regione e controllare i bollettini ufficiali della regione che vengono emanati.
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
|
|
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:
| Barriera | Impatto | Frequenza | Gravità |
|---|---|---|---|
| Pagine senza titoli | 2 | 3 | Critica |
| Immagini come titoli | 3 | 1 | Critica |
| Colore essenziale | 1 | 3 | Seria |
| Troppi link | 2 | 2 | Seria |
| Suddivisione in sezioni | 2 | 2 | Seria |
| Barriera | Impatto | Frequenza | Gravità |
|---|---|---|---|
| Link troppo vicini e troppo piccoli | 2 | 3 | Critica |
| Troppi link | 2 | 2 | Seria |
| Barriera | Impatto | Frequenza | Gravità |
|---|---|---|---|
| Pagine solo testo | 3 | 2 | Critica |
| Troppi link | 2 | 3 | Critica |
| Testo complesso | 2 | 2 | Seria |
| Suddivisione in sezioni | 2 | 2 | Seria |
| Barriera | Impatto | Frequenza | Gravità |
|---|---|---|---|
| Eventi del mouse | 3 | 3 | Critica |
|
|
Impatto:1 Frequenza:1
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
Figura 2: Altro esempio di immagine priva di testo alternativo
Esempio di codice:
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.
È 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.
|
|
Impatto:1 Frequenza:3
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
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>
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.
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.
|
|
Impatto:1 Frequenza:1
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
Figura 5: Etichette generiche nella pagina In Agenda
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.
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.
|
|
Impatto:1 Frequenza 2
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
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.
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.
|
|
Impatto Frequenza:2
Nelle pagine sopra indicate sono presenti un numero troppo elevato di collegamenti, link, che costringono ad una faticosa analisi della pagina da parte dell'utente. Nella pagina Cittadini vengono presentati numerosi link separati da caratteri non pronunciabili che rendono ancora più difficile la loro memorizzazione (Fig.7). La pagina Vivere in salute invece presenta una barra di navigazione con un numero eccessivo di link che creano ridondanza e difficoltà di comprensione perchè già presenti nella sezione centrale della pagina (Fig.8).
Figura 7: Troppi link presentati nella pagina Cittadini
Figura 8: Barra di navigazione con troppi link nella pagina Vivere in salute
Quando un lettore di schermo incomincia a leggere una sequenza di numerosi link, l'utente può distrarsi, non ricordarsi e perdere di vista il suo obiettivo. Una sequenza di troppi link causa quindi una insoddisfazione e una ridotta produttività dell'utente. L'utente è costretto ad ascoltare tutti i link e a memorizzarli per poi scegliere il più opportuno. Tenendo poi conto della legge di Miller ( il numero massimo di memorizzazione delle parole è circa di 7 più o meno 2 parole) avrà molta difficoltà a ricordare tutti i link presentati.
Bisogna suddividere in categorie e sezioni i link della pagina, con opportune liste o divisori XHTML, introducendo dei titoli di categoria con H1,H2...H6. Se non bastasse è consigliabile l'uso di una pagina per ogni sezione e categoria. Nel caso della barra di navigazione sarebbe opportuno evitare la ripetizione dei link già presenti nella pagina principale, e se proprio non si può farne a meno, specificare visivamente con delle parole la presenza di link già presenti nella pagina.
|
|
Impatto: 2 Frequenza: 3
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
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.
Evitare titoli generici e ambigui, e renderli più possibile informativi in riferimento al contenuto della pagina.
|
|
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.
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.
|
|
Impatto: 2 Frequenza: 2
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:
Esempio di codice CSS:
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.
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.
|
|
Impatto: 3 Frequenza: 1
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.
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.
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.
|
|
Impatto:1 Frequenza:1
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.
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.
Inserire l'attributo accesskey presentato nelle pagine di guida all'accessibilità anche nella Home Page.
|
|
Impatto:1 Frequenza: 2
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.
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.
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.
|
|
| Barriera | Impatto | Frequenza | Gravità |
|---|---|---|---|
| Pagine senza titoli | 2 | 3 | Critica |
| Immagini come titoli | 3 | 1 | Critica |
| Colore essenziale | 1 | 3 | Seria |
| Troppi link | 2 | 2 | Seria |
| Suddivisione in sezioni | 2 | 2 | Seria |
| ASCII art | 1 | 2 | Minima |
| Pagine solo testo | 1 | 2 | Minima |
| Immagini ricche senza testo alternativo | 1 | 1 | Minima |
| Link Generici | 1 | 1 | Minima |
| Mancanza di tasti rapidi | 1 | 1 | Minima |
| Marcatura lingua | 0 | 0 | Ininfluente |
|
|
Impatto:2 Frequenza:2
Nella pagina della protezione civile sono presenti numerosissimi link, che, anche se divisi in sezioni, obbligano allo scorrimento della pagina verso il passo per poter essere visualizzati interamente.
Questa barriera forza l'utente all'utilizzo del mouse o della tastiera, azioni difficili da compiere sia per la disabilità che per le dimensioni delle barre di scorrimento e dei pulsanti di scroll. In questo modo l'utente si stanca e si riduce notevolmente la motivazione ad usare il sito.
Figura 11: Menu di destra della pagina Protezione Civile con troppi link
Occorre diminuire il numero dei link, suddividendoli in categorie di tipo H1..H3; eventualmente nel raggruppamento è consigliabile scegliere un titolo di categoria e inserire una pagina aggiuntiva che presenta i link di quella categoria, di conseguenza cercare di creare una categorizzazione ad albero (un albero più alto che fitto) aumentando la profondità del sito.
|
|
Impatto: 2 Frequenza: 3
La barra per l'accessibilità presente in tutte le pagine , è costituita da una serie di icone/link che permettono di personalizzare i colori, le dimensioni dei caratteri e permettono di passare sia alla modalità ad alta visibilità che alla modalità solo testo. Purtroppo le icone sono troppo piccole e aumenta la difficoltà per cliccare sull'icona quella corretta da parte di un disabile motorio.
Figura 12: Immagine della barra di accessibilità con le icone troppo piccole
Le icone/link sono molto piccole, quasi delle dimensioni di un pulsante per lo scrolling della pagina. Possono creare molte difficoltà, visto che secondo la legge di Fitts, la difficoltà di colpire un bersaglio è proporzionale alla distanza e inversamente proporzionale alla dimensione del bersaglio. Diminuendo la dimensione delle icone da cliccare, aumenta la difficoltà per colpirle, includendo il fattore di disabilità motoria, la difficoltà aumenta.
Distanziare i link tra di loro e aumentare la loro dimensione. Preferibilmente posizionare i pulsanti della barra di accessibilità in alto nella pagina, in modo da non dover scorrele la pagina per trovarli.
|
|
Impatto:1 Frequenza:1
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.
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.
Inserire l'attributo accesskey presentato nelle pagine di guida all'accessibilità anche nella Home Page.
|
|
| Barriera | Impatto | Frequenza | Gravità |
|---|---|---|---|
| Link troppo vicini e troppo piccoli | 2 | 3 | Critica |
| Troppi link | 2 | 2 | Seria |
| Mancanza di tasti rapidi | 1 | 1 | Minima |
|
|
Impatto: 1 Frequenza: 1
Nella pagina Formazione e Lavoro sono presenti due link/pulsanti con un etichetta "entra..." generica e poco informativa.
Figura 13: Pulsanti entra troppo generici
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.
Specificare in modo conciso e informativo dove porterà il link/pulsante.
|
|
Impatto: 1 Frequenza: 1
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
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.
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.
|
|
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.
|
|
Impatto: 2 Frequenza: 2
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
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.
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.
|
|
Impatto: 1 Frequenza: 2
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
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.
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.
|
|
Impatto: 2 Frequenza: 3
Nelle pagine sopra riportate sono presenti un numero troppo elevato di link che costringono ad un analisi frustrante della pagina. Viene richiesto un grosso sforzo di lettura e di memorizzazione vista la mancanza di icone che contraddistinguono i vari link (non tenendo conto "Aree Tematiche" che presenta molte icone).
Figura 22: Pagina Aree Tematiche con troppi link
D'altro canto, se si prevedeva una serie di icone per ogni link la pagina sarebbe stata ancor più complessa. La mancanza di sezioni semanticamente logiche riduce l'efficacia e la produttività dell'utente.
È necessario organizzare i link in sezioni e categorie logiche utilizzando titoli di categoria all'interno di tag H1..H3 e separando le varie categorie con tag DIV oppure con liste UL. Inserire link a partenenti alla stessa categoria in una pagina intermedia, in modo da aumentare la profondità del sito ma diminuire i problemi dovuti allo scrolling verticale per la presenza di lunghe liste di link.
|
|
Impatto: 1 Frequenza: 2
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.
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.
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"
|
|
Impatto: 1 Frequenza: 3
Nessuna delle pagine analizzate contiene tag di tipo H1,H2...H6 per la suddivisione in sezioni del contenuto.
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.
Per ogni tipo di contenuto utilizzare sempre i tag H1,H2...H6 per migliorare la visibilità delle sezioni e delle categorie interne alla pagina
|
|
Impatto: 3 Frequenza: 2
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.
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.
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.
|
|
| Barriera | Impatto | Frequenza | Gravità |
|---|---|---|---|
| Pagine solo testo | 3 | 2 | Critica |
| Troppi link | 2 | 3 | Critica |
| Testo complesso | 2 | 2 | Seria |
| Suddivisione in sezioni | 2 | 2 | Seria |
| Link ambigui | 1 | 2 | Minima |
| Sito complesso | 1 | 2 | Minima |
| Campi di testo | 1 | 2 | Minima |
| Link generici | 1 | 1 | Minima |
|
|
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.
|
Impatto: 3 Frequenza: 3
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:
Figura 24: Cartelle apribili solo con JavaScript
Esempio di codice:
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.
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.