Titolo della relazione

Valutazione di conformità rispetto ai requisiti tecnici indicati nella "Legge Stanca" del sito della Regione Abruzzo

Periodo di stesura: Marzo 2007

Premessa

Il nome completo dell'allegato A del Decreto ministeriale 8 luglio 2005 è "Verifica tecnica e requisiti tecnici di accessibilità delle applicazioni basate su tecnologie internet"

Questo documento fornisce 22 punti di controllo per valutare l'accessibilitá delle pagine web; più precisamente la verifica riguarda:

Il procedimento per analizzare le pagine é stato molto lineare: in una prima fase abbiamo utilizzato il sito senza fare attenzione ai particolari implementativi o ad aspetti tecnici per capire la struttura del sito e dove poter focalizzare la valutazione.
Una volta individuato il perimetro d'indagine sul quale concentrarci abbiamo esaminato una pagina alla volta per individuare i problemi inerenti a tale pagina.

Terminato questo lavoro é stato possibile individuare i problemi piú ricorrenti e quindi raggrupparli e studiarli piú approfonditamente.

Strumenti utilizzati

Browser utilizzati

[u] Torna a inizio pagina

Perimetro dell'indagine

Come si può leggere nella pagina che illustra la filosofia del sito in esame, "Il portale della Regione Abruzzo è un contenitore di pagine e siti tematici inerenti le specifiche attività svolte dall'Ente".

Il risultato è che oltre un primo strato di collegamenti che rappresentano delle aree tematiche, le pagine, essendo siti indipendenti, si presentano con un template completamente differente una dall'alltra.

Ci è sembrato idoneo dunque analizzare le pagine che si presentavano con uno stile coerente con la home page, ignorando le altre perchè considerate esterne al sito.

Le pagine analizzate sono dunque:

L'analisi delle pagine è stata effettuata durante la prima metà di febbraio 2007

[u] Torna a inizio pagina

Sommario dei risultati

Il sito presenta delle violazioni a più principi espressi dalle linee guida utilizzate per la verifica e quindi non è conforme alla verifica tecnica di accessibilità delle applicazioni basate su tecnologie internet prevista dalla Legge Stanca.

Problemi più gravi e conseguenze globali:

[u] Torna a inizio pagina

Violazioni ricorrenti

Indice dei requisiti violati:

Requisito 1

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.

XHTML 1.0 Stict:

I controlli sono stati effettuati inizialmente con l'estensione per Firefox "HTML validator 0.7.9.5", in una seconda verifica con il validatore messo a disposizione dal w3c all'indirizzo http://validator.w3.org.

La maggior parte delle pagine sono risultate valide, altre invece, nonostante presentassero il logo della validità risultavano non valide.

Gli errori riscontrati sono di tre tipi:

  1. Distrazione: nelle pagine Aree tematiche, Eventi della vita, La regione, mancava il tag <body>.

    foto del codice originale che riporta l'errore appena descritto
  2. Gestione delle liste: nella pagina "Mappa del portale" sono presenti 55 errori tutti inerenti l'uso delle liste.
    Tra gli errori di questa pagina segnaliamo:

    • L'uso del tag <h3> come figlio del tag <ul> ; la correzione è inserirlo in un <li> come segue:
      <ul>
      	...
      	<li><h3>... bla bla...</h3></li>
      	...
      </ul>
      							    
    • voler inserire un tag <li> come figlio di un'altro <li>.
  3. Errori di codifica: ci è capitato in più pagine di trovare errori inerenti alla codifica utilizzata che rendevano le pagine non valide.

CSS

La validazione del codice css non ha riscontrato problemi.
C'è però da segnalare che è stato rispettato il principio di divisione tra contenuto e presentazione con qualche eccezione: per esempio il menù etichettato "in evidenza" è formato da <div> che presentano l'attributo style="..." per assegnare loro un'immagine di background, cosa che poteva essere comodamente svolta tramite css.

[i] Indice requisiti - [u] Torna a inizio pagina

Requisito 3

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.

ll fatto che la validazione delle pagine non abbia riscontrato errori inerenti all'assenza di attributi "alt" all'interno dei tag <img> indica che almeno teoricamente si è prestata attenzione a questo articolo della legge.
In realtà questo non basta a dichiarare l'articolo soddisfatto, bisogna valutare le informazioni testuali fornite come alternativa.
I realizzatori di questo sito hanno utilizzato anche un'altra tecnica per fornire del testo alternativo alle immagini inserite come sfondo di un elemento della pagina; si trova, infatti,in ogni pagina un <div> con id = "banner" che contiene un secondo <div> con class="alt"; questo secondo <div> viene reso invisibile tramite la regola css "display:none" per far si che non compaia in caso il documento css sia presente, e poi viene attribuita un'immagine di background al <div> banner. Se il file css non viene caricato l'immagine non verrà caricata di conseguenza e al suo posto apparirà il <div> con class="alt" che a questo punto non riceverà la regola "display:none".

Foto del codice originale che illustra l'errore appena descritto

Questa tecnica che sembra molto ben pensata porta a errori, cioè disabilitando le immagini non ottengo un testo alternativo, quindi anche in caso di non ricezione dell'immagine l'informazione che porta viene persa.

Nel caso del banner, descritto precedentemente, l'informazione che perdo può essere considerata secondaria o comunque non compromette la navigazione.
Lo stesso errore è stato però compiuto sul menù etichettato "in evidenza":

Foto che mostra l'efetto dell'errore appena descritto, cioè il menù INEVIDENZA reso inutilizzabile dalla mancata ricezione delle immagini o dalla disattivazione di esse

In questo caso invece si incide notevolmente sulla navigabilità del sito, impedendo all'utente con immagini disabilitate di accedere a parti del sito stesso; in realtà soffermandosi con il mouse sulle aree corrispondenti ai vari item del menù, anche se le immagini sono disabilitate, compaiono delle indicazioni per la navigazione grazie all'attributo "title" inserito nel tag <a>, ma questo non rimedia assolutamente all'errore commesso.

Alcune pagine presentano una serie di immagini, disposte a griglia, per indicare delle categorie.
Per esempio la pagina Aree Tematiche presenta la seguente serie di immagini:

griglia di immagini usate come precedentemente descritto

in questi casi le immagini non hanno una funzione informativa ma si vuole, in qualche modo, favorire la rapida individuazione di una categoria in relazione all'immagine che iconicamente la può rappresentare (operazione non sempre riuscita es: urbanistica, turismo, territorio, ed altri).
Disabilitando le immagini in queste pagine otteniamo un risultato disorientante: l'attributo "alt" assegnato ad ogni immagine contiene come testo il nome della propria categoria, questo ha come risultato la ripetizione di ogni etichetta, che verrà ulteriormente replicata con l'attributo "title".

immagine che mostra il risultato della disabilitazione delle immagini nel caso appena descritto

Anche se può non influire molto sulla navigazione tramite un browser grafico, questo comportamento rallenta la comprensione dei collegamenti utilizzando un browser testuale: la serie di collegamenti in questione si presenta come una lista di stringe composte dal contenuto dell'attributo alt e il testo che indica il nome della categoria, rendendo cosi più lenta la comprensione.

immagine che mostra la visualizzazione dei collegamenti con un browser testuali: i collegamenti assumono la forma: AgricolturaAgricoltura, AmbienteAmbiente e cosi via.

[i] Indice requisiti - [u] Torna a inizio pagina

Requisito 6

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; ove non sia possibile, ricorrere agli stessi criteri di distinguibilità indicati in precedenza.

Come già detto nell'analisi del requisito 3 nel menù etichettato "in evidenza" il testo che identifica le opzioni è presentato tramite immagini, in contrasto con questo requisito.

La seguente tabella mostra il calcolo delle differenze di luminosità e colore effettuato sui componenti principali delle pagine:

Colore di sfondo Colore in primo piano Differenza luminosità Differenza colore Esito
Canale Ambiente e territorio #24A400 #FFFFFF 147 565 Sufficiente
Canale Economia #7F0073 #FFFFFF 203 523 Sufficiente
Canale Istruzione #8E0811 #FFFFFF 205 598 Sufficiente
Canale Istruzione e lavoro #0068A0 #FFFFFF 175 501 Sufficiente
Canale sanità e sociale #004029 #FFFFFF 212 660 Sufficiente
Canale turismo e cultura #CD040C #FFFFFF 189 544 Sufficiente
Colore generale #F8F8F8 #27426B 185 532 Sufficiente

Un'ulteriore analisi eseguita direttamente sul file CSS tramite l'analizzatore apposito fornito da Juicy Studio ha confermato che non ci sono elementi che infrangano le soglie di differenza di luminosità e colore. Ha però evidenzato la presenza di molti elementi nei quali non viene definito un colore di sfondo per ogni colore in primo piano dichiarato e viceversa. Questa condotta è sconsigliata.

[i] Indice requisiti - [u] Torna a inizio pagina

Requisito 9

Per le tabelle dati usare gli elementi (marcatori) e gli attributi previsti dalla DTD adottata per descrivere i contenuti e identificare le intestazioni di righe e colonne.

in ogni pagina nella colonna destra sotto al menù è presente la tabella meteo:

Immagine della tabella meteo che verra di seguito discussa

Questa tabella viene realizzata seguendo il seguente codice:

<table>
	<tr>
		<th>Cittá</th>
		<th>Tempo</th>
		<th>°C</th>
	</tr>
	<tr>
		<td>L'Aquila</td>
		<td>
			<img src="images/meteo/2.jpg" alt="Poco nuvoloso" title="Poco nuvoloso" />
			<div class="alternate">Poco nuvoloso</div>
	        </td>
		<td> 11° </td>
	</tr>
	<tr>
		<td>Chieti</td>
		<td>
			<img src="images/meteo/1.jpg" alt="Sereno" title="Sereno" />
			<div class="alternate">Sereno</div>
		</td>
		<td> 15°</td>
	</tr>
	<tr>
		<td>Pescara</td>
		<td>
			<img src="images/meteo/1.jpg" alt="Sereno" title="Sereno" />
			<div class="alternate">Sereno</div>
		</td>
		<td> 12°</td>
	</tr>
	<tr>
		<td>Teramo</td>
		<td>
			<img src="images/meteo/2.jpg" alt="Poco nuvoloso" title="Poco nuvoloso" />
			<div class="alternate">Poco nuvoloso</div>
		</td>
		<td> 14°</td>
	</tr>
<table>
				

Quello che segue è il codice adattato:

<table summary="Informazioni metereologiche delle provincie della regione Abruzzo ">
    <caption> Meteo</caption>
	<tr>
		<th scope="col" >Cittá</th>
		<th scope="col" >Tempo</th>
		<th scope="col" >°C</th>
	</tr>
	<tr>
		<td>L'Aquila</td>
		<td> <img src="images/meteo/2.jpg" alt="Poco nuvoloso" title="Poco nuvoloso" /> </td>
		<td> 11° </td>
	</tr>
	<tr>
		<td>Chieti</td>
		<td> <img src="images/meteo/1.jpg" alt="Sereno" title="Sereno" /> </td>
		<td> 15°</td>
	</tr>
	<tr>
		<td>Pescara</td>
		<td> <img src="images/meteo/1.jpg" alt="Sereno" title="Sereno" /> </td>
		<td> 12°</td>
	</tr>
	<tr>
		<td>Teramo</td>
		<td> <img src="images/meteo/2.jpg" alt="Poco nuvoloso" title="Poco nuvoloso" /> </td>
		<td> 14°</td>
	</tr>
<table>
				

È stato inserito l'attributo "summary" al tag <table> per rendere la tabella autoesplicativa; è stata inserita il tag <caption> per dare un titolo associato alla tabella; è stato inserito l'attributo "scope" per associare i <th> ai relativi <td>; sono stati eliminati i <div class = "alternate" > perchè causavano la ripetizione del testo alternativo alle magini che veniva già inserito tramite l'attributo "alt" del tag <img>

[i] Indice requisiti - [u] Torna a inizio pagina

Requisito 11

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.

È applicato il principio di separazione tra presentazione e contenuto tramite l'uso dei fogli di stile; è tuttavia discutibile la resa delle pagine in mancanza di questi.
Per esempio il mancato uso di liste implementabili con i tag <ul> o <ol> e i relativi figli avrebbe reso più intuibile la separazione semantica dei vari collegamenti all'interno della pagina. Infatti questi si presentano in un unica colonna senza alcun indicatore che aiuti la scansione e l'interpretazione di tali collegamenti.
Per lo stesso scopo sarebbe stato utile usare in modo più ponderato i vari tag gerarchici <h1><h2>...

È positiva in questo contesto la tecnica dei <div> resi invisibili via css, in questo modo infatti compare disabilitando il css, o usando un browser testuale, un menù a inizio pagina con delle opzioni utli per saltare direttamente al contenuto della pagina o al menù.

[i] Indice requisiti - [u] Torna a inizio pagina

Requisito 14

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.

I seguenti errori sono presenti nei due moduli form per le ricerche posizionati in alto a destra in ogni pagina del sito.

Errori:

  1. I radio button non hanno una label associata esplicitamente
    <input name="iMetodoRicerca" type="radio" value="1" checked="checked" /> almeno una<br/>
    <input name="iMetodoRicerca" type="radio" value="0" /> tutte le parole<br/>
    <input name="iMetodoRicerca" type="radio" value="2" /> frase esatta
    							
  2. l'input text invece ha una label associata correttamente ma che poi viene resa invisibile via CSS.
    Vista l'intenzione di non mostrare questa label avrebbe avuto più senso settare l'attributo "value" dell'input text con il valore della label in modo da far comparire la stessa all'interno dell'area di testo.
    <label for="cerca">inserisci il testo per la ricerca</label>
    <input id="cerca" class="inputex" type="text" name="strTestoRicerca" size="20" accesskey="r"/>
    							

Soluzioni:

  1. Il codice può essere modificato in questo modo, la resa grafica sarà poi da modificare per ottenere un risultato uguale all'originale, ma questo risolve il problema di usabilità
    <input name="iMetodoRicerca" type="radio" value="1" checked="checked" id="radio1"/>
    <label for="radio1">almeno una</label>
    <input name="iMetodoRicerca" type="radio" value="0"  id="radio0" />
    <label for="radio0">tutte le parole</label>
    <input name="iMetodoRicerca" type="radio" value="2" id="radio2"/>
    <label for="radio2">frase esatta</label>
    							
  2. <input id="cerca" class="inputex" type="text" name="strTestoRicerca" size="20" accesskey="r" value="inserisci il testo per la ricerca"/>
    							

In più in entrambi i casi si sarebbero potuti raggruppare i vari componenti con un <fieldset> ed etichettarli con un <legend>.

[i] Indice requisiti - [u] Torna a inizio pagina

Requisito 16

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.

L'unico script lanciato da gestori di eventi, che è anche l'unico dichiarato nell'intestazione delle pagine si chiama target.js ed ha come unico scopo quello di far aprire i collegamenti che lo lanciano in una nuova finestra.
Questo javascript viene lanciato per mezzo del gestore d'eventi "onclick" che è chiaramente un gestore dipendente da dispositivi di puntamento come mouse, touchpad, trackball.

Una soluzione è sostituire onclick con con onkeypress.

[i] Indice requisiti - [u] Torna a inizio pagina

Requisito 19

Rendere chiara la destinazione di ciascun collegamento ipertestuale 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.

Nel menù "in evidenza" posto nella colonna destra di ogni pagina sono stati inseriti gli attributi title per esplicare la destinazione dei collegamenti altrimenti non troppo chiari; lo stesso però spesso è stato fatto in modo errato, per esempio nella pagina "eventi della vita" o "aree tematiche" sono presenti una serie di collegamenti che come valore dell'attributo title hanno l'etichetta che viene già mostrata normalmente al navigatore.
In altri casi invece non è stato inserito l'attributo title anche se l'etichetta del collegamento non risultava molto chiara una volta decontestualizzata; per esempio in ogni pagina a sinistra compare il collegamento "Europa", ma anche il collegamento "la regione" non fa intuire che si intende parlare delle strutture e direzioni regionali.
Va però fatto notare che la seconda parte dell'articolo chiede che siano introdotti dei meccanismi che permettano di evitare la lettura ripetitiva di sequenze di collegamenti presenti in ogni pagina; tale principio viene rispettato mediante dei collegamenti che puntano direttamente al contenuto o al menù di navigazione. Tali collegamenti vengono visualizzati solo in assenza del foglio di stile, quindi anche per i browser testuali e lettori di schermo.

[i] Indice requisiti - [u] Torna a inizio pagina

Requisito 21

Rendere selezionabili e attivabili tramite comandi da tastiere o tecnologie in emulazione di tastiera o tramite sistemi di puntamento diversi dal mouse i collegamenti presenti in una pagina; per facilitare la selezione e l'attivazione dei collegamenti presenti in una pagina è necessario garantire che la distanza verticale di liste di collegamenti e la spaziatura orizzontale tra link consecutivi sia di almeno 0,5 em, le distanze orizzontale e verticale tra i pulsanti di un modulo sia di almeno 0,5 em e che le dimensioni dei pulsanti in un modulo siano tali da rendere chiaramente leggibile l'etichetta in essi contenuta.

Questo requisito è stato rispettato per i collegamenti ritenuti principali all'interno di ogni pagina, cioè quelli che identificano i diversi canali tematici e che vengono presentati a inizio pagina come menù orizzontale.
Sono stati inseriti altri accesskey per selezionare i due moduli di ricerca presenti nella parte destra di ogni pagina.

immagine che mostra i tasti di accesso rapido presenti all'inizio di ogni pagina

Visto però che la struttura della pagina prevede molti altri collegamenti comuni a tutte le pagine, gli acceleratori da tastiera sono pochi. Inoltre la loro segnalazione non è molto trasparente. L'utente viene informato della loro presenza solo quando si posiziona su di essi col mouse, o alla pagina "Accessibilità".

[i] Indice requisiti - [u] Torna a inizio pagina

[u] Torna a inizio pagina

Riassunto risultati

I punti di controllo violati dalle pagine esaminate sono grossomodo gli stessi in ogni pagina; quello che segue è un'elenco delle pagine analizzate e il numero dei punti da loro viaolati:

[u] Torna a inizio pagina

Conclusioni

Il sito analizzato presenta numerose violazioni a molti degli articoli della normativa di riferimento, e per questo non può essere considerato conforme a questa.
Tutto sommato però ci sembra che uno sforzo minimo per andare in contro alle richieste della normativa sia stato fatto, per esempio: il fatto di aver inserito gli attributi "alt" ad ogni tag <img> ci fa pensare che gli implementatori abbiano considerato l'importanza di fornire informazioni alternative alle immagini. Il fatto, però, che spesso siano inseriti valori non idonei ci spinge a pensare che la loro sia stata solo una scelta formale e non funzionale.
Lo stesso discorso si potrebbe fare con altri elementi tipo i tasti di scelta rapida e l'uso di fogli di stile al posto di attributi di presentazione nel codice HTML.

[u] Torna a inizio pagina