Valutazione di conformità del sito Regione Marche  [1]

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

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

User testing del sito Regione Marche  [3]

Valid XHTML 1.0 Strict

Valid CSS!

Valutazione di Conformità rispetto alla legge Stanca del sito http://www.regione.marche.it

di Abele Matthias e Vettorello Marco

25/11/2007

Introduzione

Di seguito verrà presentata una relazione sull'accessibilità del sito Regione Marche che segue la valutazione di conformità rispetto alla Legge Stanca. Questa legge definisce i requisiti tecnici di accessibilità delle applicazioni basate su tecnologie internet, non che le metodologie per effettuare la verifica degli stessi.

Per verifica tecnica, sono stati utilizzati i seguenti strumenti automatici di verifica della definizione formale dei linguaggi di markup e di presentazione utilizzati:

Sono stati utilizzati ulteriori strumenti di verifica semiautomatici per verificare eventuali errori nelle pagine e per simulare situazioni di disabilità:

Sono state esaminate le pagine con diversi browser grafici in vari sistemi operativi per controllare se le pagine sono state scritte indipendentemente dal browser le visualizzerà:

Si è valutata ogni pagina presa in esame controllando se i requisiti della Legge Stanca erano soddisfatti.

Di seguito presentiamo per una panoramica i 22 requisiti che prevede la Legge Stanca:

| |

Perimetro d'indagine:

Le pagine sono state scelte da esempio per il resto del sito, se è cercato di prendere delle pagine più possibile differenti ma al tempo stesso che rientrassero all'interno del "portale" principale del sito Regione Marche per avere una verifica approfondita in una parte ristretta del sito (infatti si può notare che per ogni categoria, all'interno delle Aree Tematiche del sito, è stato costruito un portale differente, con impaginazione, uno stile grafico e con delle convenzioni proprio). Le pagine analizzate sono le seguenti :

Le pagine sono state analizzate nel periodo ottobre / novembre 2007.

| |

Sommario dei risultati

Le pagine analizzate contengono numerosi errori di gravità diverse

Tabella di Gravità
Requisito:ImpattoFrequenzaGravità
22: Pagine Equivalenti 3 2 Critica
14: Form 3 2 Critica
3 : ALT testuali23Critica
1 : Conformità13Seria
6 : Contrasto 2 1 Seria
11: CSS 2 1 Seria
15: Script,Applet 2 1 Seria
19: Link non ambigui o generici 1 1 Seria
12: Liquid Layout 1 1 Minore
16: Script, Applet indipendenti da dispositivo 1 1 Minore

Nonostante ci siano tentativi di rendere il sito accessibile, il risultato non è soddisfacente. Soprattutto la scarsa realizzazione delle pagine testuali equivalenti e la mancanza di attributi "alt" rendono difficile l‘uso con tecnologie assistive come lettori di schermo e browser testuali.La mancanza di etichette nelle Form HTML. Si consiglia di seguire le linee guida proposte dalla Legge Stanca e dalle Web Accessibilty Guidelines del W3C. Inoltre, per garantire una corretta visualizzazione ed interpretazione del contenuto del sito si deve rispettare la sintassi del codice HTML, per esempio verificando il sito con un validatore come Tidy oppure il validatore online del w3c. La presentazione del contenuto dovrebbe avvenire totalmente attraverso fogli di stile esterni CSS , inseriti all'interno del tag LINK nelle pagine HTML per evitare problemi come quelli come quelli sotto riscontrati, dove la rappresentazione grafica del contenuto è inserita anche all'interno del codice HTML. Conviene non fare uso di applet/script Java e oggetti Flash per avere la massima accessibiltà da parte di tutte le piattaforme / browser, l'utilizzo di etichette ambigue, generiche o ripetute porta a difficoltà di lettura e ascolto se vengono utilizzati lettori di schermo. È grave la presenza di una pagina denominata Accessibilità priva di testo.

Dettaglio dei risultati

In dettaglio vengono violati i seguenti requisiti:

| |

Requisito 1: Conformità

Enunciato del requisito:

Realizzare le pagine e gli oggetti al loro interno utilizzando tecnologie definite da grammatiche formali pubblicate nelle versioni più recenti disponibili quando sono supportate dai programmi utente. Utilizzare elementi ed attributi in modo conforme alle specifiche, rispettandone l'aspetto semantico.

Gravità: SERIA

Pagina/e analizzata/e dove il requisito non è soddisfatto:

Osservazioni:

Le pagine sono state esaminate con il W3C Markup Validator e con il W3C CSS Validator.Come si può notare nella Figura 1, in basso, sono presenti ben 301 errori nella Home Page, causati da mancanza di tag chiusi, utilizzo improprio di attributi e caratteri speciali opportunamente codificati. Rilevante è il fatto della mancanza del DOCTYPE, per la verifica si sono provati tutti i possibili DOCTYPE proposti dal W3C ottenendo con ognuno un numero minimo di 150 errori. Nel codice CSS sono presenti dei colori codificati con la lettera O grande, invece dello zero ("#OOOOOO")(Fig.2). Come mostrato nell'esempio di codice in basso, sono presenti attributi inesistenti come leftmargin e align=middle nel codice HTML.

Figura 1: Validazione con W3C HTML Validator errata con 301 errori

Risultato della validazione della Home Page

Figura 2: Validazione con W3C CSS Validator che presenta numeri non validi di colori

Risultato della validazione del foglio di stile della Home Page

Esempio di codice:

leftmargin="0" centermargin="0"
<TD align=middle>

Rimedi:

Bisogna fare sempre riferimento alle specifiche formali fornite dal W3C per scrivere codice sintatticamente corretto e valido, sia per quanto riguarda il contenuto che la presentazione. Bisogna inoltre validare le pagine con i validatori automatici del W3C, per essere sicuri di rispettare tutte le regole sintattiche proposte dal linguaggio scelto.

| |

Requisito 3: Alternative testuali

Enunciato del requisito:

Fornire una alternativa testuale equivalente per ogni oggetto non di testo presente in una pagina e garantire che quando il contenuto non testuale di un oggetto cambia dinamicamente vengano aggiornati anche i relativi contenuti equivalenti predisposti; l'alternativa testuale equivalente di un oggetto non testuale deve essere commisurata alla funzione esercitata dall'oggetto originale nello specifico contesto.

Gravità: CRITICA

Pagina/e analizzata/e dove il requisito non è soddisfatto:

Osservazioni:

In tutte le pagine analizzate non sono presenti testi alternativi per le immagini proposte, ne sono stati utilizzati didascalie a fianco delle immagini per ovviare a questo problema. Nella Figura 3 si può notare la che, disattivando le immagini, perdiamo alcune informazioni essenziali, come i titoli delle categorie nella barra di navigazione di sinistra.

Figura 3: Mancanza di attributi alt nelle immagini ricche d'informazione

Pagina principale Regione Marche con le immagini disabilitate

Rimedi:

Bisogna inserire sempre un testo alternativo nell'attributo alt del tag img se l'immagine porta delle informazioni essenziali, se le immagini sono a puro scopo decorativo è bene lasciare vuoto l'alt, ma se l'immagine è portatrice d'informazione, come nel nostro caso per i vari titoli delle categorie, è necessario specificare un testo alternativo.

| |

Requisito 6: Contrasto

Enunciato del requisito:

Garantire che siano sempre distinguibili il contenuto informativo (foreground) e lo sfondo (background), ricorrendo a un sufficiente contrasto (nel caso del testo) o a differenti livelli sonori (in caso di parlato con sottofondo musicale); evitare di presentare testi in forma di immagini.

Gravità: CRITICA

Pagina/e analizzata/e dove il requisito non è soddisfatto:

Osservazioni:

Sono state analizzate le varie pagine con JuicyStudio Colour Contrast Analyzer, uno strumento per analizzare il contrasto della luminosità e del colore delle varie parti del testo di una pagine.La maggior parte del testo non ha superato il test, perchè il colore aveva un contrasto troppo basso. Ad esempio i link appartenenti alla classe linkbianco hanno un colore dal valore #000000 (bianco) e lo sfondo ha un colore #026ea8(blu mare), la differenza di luminosità è di 84, dove il valore dovrebbe essere maggiore di 125 mentre il da differenza di colore è di 280 al posto di essere superiore al valore 500 per avere una maggiore visibilità.

Figura 4:Esempi di contrasto errato, sia di colore che di luminosità

Dettaglio del risultato di JuicyStudio Colour Contrast Analyzer

Rimedi:

Utilizzare i colori dei caratteri e degli sfondi in maniera che il loro contrasto e luminosità sia elevato, rispettando le specifiche del W3C. Le formule per calcolare i valori di luminosità e contrasto sono le seguenti:

Valore di luminosità:

((Valore rosso × 299) + (Valore Verde × 587) + (Valore Blu × 114)) / 1000

La differenza tra la luminosità dello sfondo e la luminosità del colore in primo piano deve essere superiore a 125.

Valore di contrasto:

[Max(Valore Rosso 1, Valore Rosso 2) - min(Valore Rosso 1, Valore Rosso 2)] + [Max(Valore Verde 1, Valore Verde 2) - min(Valore Verde 1, Valore Verde 2)] + [Max(Valore Blu 1, Valore Blu 2) - min(Valore Blu 1, Valore Blu 2)]

Il valore di contrasto tra due colori deve essere superiore a 500.

| |

Requisito 11: Uso di CSS

Enunciato del requisito:

Usare i fogli di stile per controllare la presentazione dei contenuti e organizzare le pagine in modo che possano essere lette anche quando i fogli di stile siano disabilitati o non supportati.

Gravità: SERIA

Pagina/e analizzata/e dove il requisito non è soddisfatto:

Osservazioni:

Le pagine sono lo stesso visibili e comprensibili anche senza fogli di stile, solamente perchè nel codice HTML sono presenti tag e attributi per controllare la presentazione, di conseguenza colori, caratteri, dimensioni (vedi l'esempio di codice). Disabilitando il foglio di stile cambia il colore dei link in alto nella pagina, rendendoli simili al loro sfondo (Fig.5).

Figura 5: Pagina principale con fogli di stile disabilitati.

Pagina principale in cui colori dei link sono difficilmente distinguibili dallo sfondo

Esempio di codice:

<TR bgColor=#026ea8>
<TD><FONT color=#ffffff>

Rimedi:

Bisogna sempre separare la presentazione dai contenuti, lasciando al foglio di stile il compito di presentazione del contenuto; evitare di inserire dettagli di presentazione nel codice per evitare una scorretta visualizzazione in browser datati, o di dispositivi mobili

| |

Requisito 12: Liquid Layout

Enunciato del requisito:

La presentazione e i contenuti testuali di una pagina devono potersi adattare alle dimensioni della finestra del browser utilizzata dall'utente senza sovrapposizione degli oggetti presenti o perdita di informazioni tali da rendere incomprensibile il contenuto, anche in caso di ridimensionamento, ingrandimento o riduzione dell'area di visualizzazione o dei caratteri rispetto ai valori predefiniti di tali parametri.

Gravità: Minore

Pagina/e analizzata/e dove il requisito non è soddisfatto:

Osservazioni:

Nell'intero sito non viene utilizzata la tecnica del liquid layout, il contenuto non si ridimensiona in base alla dimensione della finestra. I caratteri vengono ingranditi e rimpiccioliti senza problemi, ma il layout della pagina rimane lo stesso, imponendo, a chi utilizza browser con basse risoluzioni o ingranditori di schermo, di dover utilizzare lo scroll della pagina, sia orizzontalmente che verticalmente. Questo fattore diminuisce l'usabilità della pagina riduce l'efficacia nella lettura della stessa.

Rimedi:

È necessario utilizzare tag DIV per dividere i vari contenuti e poterli posizionare in modo logico mediante fogli di stile. I posizionamenti di immagini e delle sezioni DIV devono essere relativi, esattamente come le loro dimensioni, utilizzando unità di misura come "%" o "em" al posto di "px" o "pt".

| |

Requisito 14: Form

Enunciato del requisito:

Nei moduli form, associare in maniera esplicita le etichette ai rispettivi controlli, posizionandole in modo che sia agevolata la compilazione dei campi da parte di chi utilizza le tecnologie assistive.

Gravità: CRITICA

Pagina/e analizzata/e dove il requisito non è soddisfatto:

Osservazioni:

Nelle pagine analizzate sono presenti due tipi di form di ricerca differenti uno sempre presente, quello di ricerca all'interno del sito, in alto a destra, e uno presente nella pagina Ricerche approfondite. Entrambi non fanno uso di tag LABEL per associare il campo di testo al relativo comando. Nelle pagine Servizi alle imprese e Ambiente invece sono presenti in basso alcuni menu a tendina costruiti con una SELECT all'interno di una tabella, selezionando un elemento del menu, avviene un redirect automatico sulla pagina selezionata. Questo causa parecchi disagi a chi deve leggere tutti i link all'interno del menu a tendina, basta che si posizioni sul primo e viene in automatico redirezionato senza la sua volontà.

Rimedi:

Utilizzare sempre il tag LABEL per definire un etichetta descrittiva per il controllo all'interno di una form. Utilizzare il menu a tendina all'interno form che preveda un pulsante di invio per l'azione selezionata, evitando così il redirect automatico.

| |

Requisito 15: Script, Applet

Enunciato del requisito:

Garantire che le pagine siano utilizzabili quando script, applet, o altri oggetti di programmazione sono disabilitati oppure non supportati; ove ciò non sia possibile fornire una spiegazione testuale della funzionalità svolta e garantire una alternativa testuale equivalente, in modo analogo a quanto indicato nel requisito n. 3

Gravità: MINORE

Pagina/e analizzata/e dove il requisito non è soddisfatto:

Osservazioni:

Nella Home Page, in basso, viene utilizzato JavaScript per aprire un PopUp che permette di vedere le immagini in diretta da alcune città delle Marche (vedere l'esempio di codice). Nella pagina Comunicazione Istituzionale è presente uno script, che dovrebbe aprire una pagina di popup, ma esaminando il codice non viene utilizzato. In tutte le altre pagine sono presenti degli script, ma sono commentati, probabilmente dovuti ai vari aggiornamenti del sito per la sua accessibilità. In alcune pagine è presente in alto a destra un icona creata in Flash che ridirige alla pagina a chi fa riferimento l'immagine rappresentata: anche non avendo un plugin Flash è possibile comunque raggiungere quella pagina.

Esempio di codice:

<A onmouseup="window.open('http://my.marche.it/rendering.asp?keyvideo=' + 720,'_blank','toolbar=no,resizable=yes')" class=titoloBig href="javascript:void(0)">

Rimedi:

Fortunatamente non è così essenziale la funzionalità svolta da JavaScript all'interno delle pagine esaminate. Si consiglia comunque di evitare l'uso di JavaScript e Flash nei casi siano gli unici mezzi per accedere ad alcune informazioni. Rendere sempre possibile un raggiungimento di tutte le informazioni presenti nella pagina anche senza l'ausilio di script o oggetti di programmazione.

| |

Requisito 16: Script, Applet indipendenti da dispositivo

Enunciato del requisito:

Garantire che i gestori di eventi che attivano script, applet o altri oggetti di programmazione o che possiedono una propria specifica interfaccia, siano indipendenti da uno specifico dispositivo di input.

Gravità: MINORE

Pagina/e analizzata/e dove il requisito non è soddisfatto:

Osservazioni:

Nell'esempio di codice proposto dal requisito 15, viene utilizzato un gestore di eventi dipendente da dispositivo, in questo caso dipendente dal mouse. Questo è l'unico caso di utilizzo di JavaScript con codice dipendente da dispositivo. Invece in tutte le altre pagine è presente un oggetto Flash che può essere attivato solamente con l'uso del mouse(Fig.6)

Figura 6: Oggetto in Flash attivabile sono con il mouse

Immagine con titolo realizzata in Flash che porta a una pagina esterna

Esempio di codice:

<A onmouseup="window.open('http://my.marche.it/rendering.asp?keyvideo=' + 720,'_blank','toolbar=no,resizable=yes')" class=titoloBig href="javascript:void(0)">

Rimedi:

Garantire l'indipendenza dal dispositivo utilizzando gestori di eventi logici piuttosto che dipendenti da dispositivo.

| |

Requisito 19: Link non ambigui o generici

Enunciato del requisito:

Rendere chiara la destinazione di ciascun collegamento ipertestuale (link) con testi significativi anche se letti indipendentemente dal proprio contesto oppure associare ai collegamenti testi alternativi che possiedano analoghe caratteristiche esplicative, nonché prevedere meccanismi che consentano di evitare la lettura ripetitiva di sequenze di collegamenti comuni a più pagine.

Gravità: MINORE

Pagina/e analizzata/e dove il requisito non è soddisfatto:

Osservazioni:

Nella barra di navigazione a sinistra nella Home Page sono presenti una serie di numerosissimi link, con un carattere > come abbellimento grafico. Il problema sta nel fatto che i link e il carattere sono due collegamenti separati che portano alla stessa pagina (vedi l'esempio di codice).

Esempio di codice:

<td valign="top" width="10" align="left">

<a href="http://alluvione.regione.marche.it/" target="_blank"> > </a></td>

<td valign="top" align="left">

<a href="http://alluvione.regione.marche.it/" target="_blank">Alluvione</a></td>

Rimedi:

Evitare l'utilizzo di link generici o ambigui, l'etichetta del link deve sempre essere informativa in riferimento alla destinazione del collegamento. Evitare di duplicare link come nell'esempio sopra riportato perchè causano una ripetizione del collegamento quando si utilizzano lettori di schermo, si rischia di confondere l'utente leggendo il segno di maggiore.

|

Requisito 22: Pagine Equivalenti

Enunciato del requisito:

Per le pagine di siti esistenti che non possano rispettare i su elencati requisiti (pagine non accessibili), in sede di prima applicazione, fornire il collegamento a una pagina conforme a tali requisiti, recante informazioni e funzionalità equivalenti a quelle della pagina non accessibile ed aggiornata con la stessa frequenza, evitando la creazione di pagine di solo testo; il collegamento alla pagina conforme deve essere proposto in modo evidente all'inizio della pagina non accessibile.

Gravità: CRITICA

Pagina/e analizzata/e dove il requisito non è soddisfatto:

Osservazioni:

Tutto il sistema delle pagine testuali si basa su un cookie, che viene settato e può essere solo rimosso dalla pagina principale della navigazione testuale, il che potrebbe creare problemi, se c'è bisogno ritornare alla modalità grafica. Alcune immagini rimangono lo stesso anche se si tratta di una pagina solo testo(Fig 7). La pagina Ambiente presenta ancora i menu a tendina con lo stesso aspetto di quelli in modalità grafica, inoltre nella pagina è assente tutta la barra di navigazione di sinistra. La pagina Ricerche Approfondite e Servizi alle imprese non hanno un equivalente testuale.

Figura 7: Pagina in modalità che presenta ancora delle immagini

Dettaglio della pagina Ambiente in modalità solo testo che presenta immagini

Rimedi:

Fornire una pagina alternativa nel caso in cui non si riuscisse a rendere le pagine accessibili, con lo stesso contenuto informativo e con tutte le funzionalità rese in maniera accessibile della pagina originale.