Titolo della relazione

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

Periodo di stesura: Seconda metà di Maggio 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 tecnoligie 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

Per selezionare un campione significativo di pagine abbiamo scelto di analizzare la Home page e alcune delle pagine da essa direttamente raggiungibili, inoltre abbiamo cercato di individuare pagine conteneti elementi particolari come Form o oggetti multimediali.

Le pagine selezionate sono:

[u] Torna a inizio pagina

Sommario dei risultati

Il sito qui discusso presenta numerose violazioni dei punti di controllo proposti dalla "Legge Stanca", usata come riferimento per l'analisi.
Dobbiamo dunque dichiarare il sito non conforme a questa normativa.

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.

Il codice XHTML è risultato valido solo per la pagina "Un cittadino".
Gli errori commessi sono di varia natura:

  • La pagina d'accoglienza presentava alla linea 185 errori inerenti l'uso di entità non definite.
  • La pagina "Eventi" presenta 109 errori,
    immagine che mostra il risultato della validazione con 109 errori
    qui gli errori sono di varia natura, i più sono errori di sintassi, tipo non chiudere con la barra / i tag vuoti, oppure errori con i nomi degli attributi, uso di attributi e entità per la gestione della presentazione che sono stati deprecati.
  • La pagina "Newsletter" presenta 84 errori, anche qui la natura è quasi esclusivamente sintattica.
  • La pagina "Press regione" ha 21 errori, qui si è cercato di inserire attributi deprecati come "align".

Il foglio di stile è risultato valido ma con 33 avvisi tutti inerenti all'uso dello stesso colore per il background-color e il color in alcuni contesti.

[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.

Le pagine esaminate non contengono immagini particolarmente cariche di contenuto informativo, a parte nella home page dove sono presenti una serie di collegamenti presentati con immagini.
In questi casi i testi alternativi si possono considerare validi.

Come accennato nel sommario dei risultati, è presente nel sito una intera sezione dedicata a video inerenti le notizie d'attualità nella regione.
Qui il sito mette a disposizione una serie di filmati che parlano della regione tratti da notiziari.
I filmati vengono presentati in questo modo: un fotogramma del filmato è usato come miniatura per l'anteprima; viene mostrato un titolo e un breve commento, data, ora e canale televisivo che ha trasmesso il servizio.
Queste informazioni sono di sicuro utili e aiutano l'utente a capire se il servizio può interessargli, ma tutta l'informazione veicolata dal filmato non ha una vera alternativa testuale; infatti le pagine che contengono i vari filmati hanno una struttura coerente al resto del sito, e hanno il lettore multimediale in mezzo alla pagina che riproduce il filmato.
Sarebbe stato appropriato inserire una trascrizione del servizio, o in alternativa un buon riassunto.

[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.

Ricorrendo allo strumento di analisi del foglio di stile fornito da Juicy Studio abbiamo potuto verificare che per alcuni elementi della pagina la differenza di luminosità e di colore tra testo e sfondo non sono sufficienti.

immagine che mostra l'output dello strumento usato che indica un basso contrasto di colore per l'elemento #sub-contenitore

Inoltre questo strumento ha messo in evidenza la cattiva abitudine di non specificare il colore di sfondo quando viene assegnato un colore per il testo e viceversa.

[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.

L'unica pagina che contiene una tabella è la pagina "Eventi" che la usa per implementare un calendario che collega i giorni del mese agli eventi previsti per quel giorno.

immagineche mostra la presentazione del calendario in questione

La tabella in questione è implementata con il seguente codice:

	<table border="0" cellpadding="1" cellspacing="1" height="1%" width="1%">
	<tbody>
		<tr>
			<td class="ev-td" align="center" bgcolor="#c6ddff" width="1%">
				<font size="1">
					<b>L</b>
				</font>
			</td>
			<td class="ev-td" align="center" bgcolor="#c6ddff" width="1%">
				<font size="1">
					<b>M</b>
				</font>
			</td>
			...
			...
			...
			...
			...
		</tr>
		<tr>
			<td class="ev-td" align="center" bgcolor="#f3f3f3">
				&nbsp;
			</td>
			...
			<td class="ev-td" align="center" bgcolor="#f3f3f3">
				<font color="#000000" size="1">
					1
				</font>
			</td>
			...
		</tr>
		...
		...
	</tbody>
	</table>

In questo codice gli errori sono molteplici:

  • Manca l'attributo "summary" alla tag <table> per fornire un riassunto del contenuto della tabella.
  • Manca la tag <caption> con la quale dare un titolo associato alla tabella.
  • Mancano i tag previsti per definire l'intestazione della tabella (<th>). Di conseguenza mancano le associazioni tra intestazione della tabella e le celle relative.
  • Vongono usati tag non definiti come <font>.

Il codice che segue tenta di rimediare a questi errori:

	<table summary="calendario del mese x tramite il quale puoi accedere agli avvenimenti previsti per questo mese.">
	<caption>Calendario Eventi</caption>	
	<tbody>
		<tr>
			<th scope="col">L</th>
			<th scope="col">M</th>
			...
			...
			...
			...
			...
		</tr>
		<tr>
			<td class="ev-td"> &nbsp;</td>
			...
			<td class="ev-td"> 1	</td>
			...
		</tr>
		...
		...
	</tbody>
	</table>

Inoltre gli implementatori hanno assegnato lo stile alla tabella utilizzando attributi ormai non più in uso. Sarebbe stato più corretto, rapido e funzionale, utilizzare il foglio di stile anche per la presentazione della tabella.

[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.

I fogli di stile sono utilizzati come tecnica principale per la gestione della presentazione. C'è da far notare però che spesso sono stati utilizzati attributi per la presentazione all'interno del file XHTML (come si è potuto notare nella discussione al punto precedente).

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

Requisito 12

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.

L'impaginazione dei contenuti è realizzata interamente con valori assoluti, questo implica quindi che gli elementi non possono adattarsi alla finestra. Infatti se si diminuisce la dimensione della finestra oltre 800x600 px compare una barra orizzontale per lo scroll della finestra, il che riduce notevolmente la velocità di navigazoine.

[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.

In ogni pagina è presente un modulo di ricerca che non rispetta questa regola

immagine che mostra il modulo di ricerca formato da un'area per l'inserimento del testo e due pulsanti: cerca nel sito, cerca nel web

il codice utilizzato è il seguente:

	<form id="search" method="post" title="Motore di ricerca" class="form-neutro" action="./index.php?page=ricerca">

		<div class="freccia-tematica">
			<input type="image" id="web" name="web" class="ricercashim" src="./newportal/
			temi/newportal_front/images/shim16.gif" alt="Cerca nel web" accesskey="5"/>
			cerca nel web
		</div>
		<div class="freccia-tematica">
			<input type="image" id="local" name="local" class="ricercashim" src=".
			/newportal/temi/newportal_front/images/shim16.gif" alt="Cerca nel sito" accesskey="4"/>
			cerca nel sito
		</div>
		<div>
			<input  type="text" name="key" class="inputmod" id="key" size="34" accesskey="3"/>
		</div>
	</form>

Come si può notare, le etichette dei comandi non sono inserite negli appositi tag <label> e di conseguenza non possono essere associate al comando relativo. Un'implementazione corretta è la seguente, dove vengono inserite le tag <label> associate al comando che descrivono.

	<form id="search" method="post" title="Motore di ricerca" class="form-neutro" action="./index.php?page=ricerca">

		<div class="freccia-tematica">
			<input type="image" id="web" name="web" class="ricercashim" src="./newportal/
			temi/newportal_front/images/shim16.gif" alt="Cerca nel web" accesskey="5"/>
			<label for="web">cerca nel web</label>
		</div>
		<div class="freccia-tematica">
			<input type="image" id="local" name="local" class="ricercashim" src=".
			/newportal/temi/newportal_front/images/shim16.gif" alt="Cerca nel sito" accesskey="4"/>
			<label for="local">cerca nel sito</label>
		</div>
		<div>
			<input  type="text" name="key" class="inputmod" id="key" size="34" accesskey="3" value="cerca..." />
		</div>
	</form>

La pagina "Newsletter" contiene un modulo di iscrizione al servizio newsletter offerto dalla regione.
Questo modulo è composto da una serie di aree di testo, da qualche menù a tendina, una checkbox e un pulsante per inviare la richiesta. Anche qui si ripete la pratica di non utilizzare la tag <label> per nessuno degli elementi.
La soluzione è identica al caso precedente.

Per i menù a tendina non si presenta il problema del salto dopo la selezione di un'opzione perchè l'invio dell richiesta avviene solo con l'apposito tasto.

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

Requisito 19

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.

Nessuna pagina prevede meccanismi per evitare la lettura di collegamenti comuni a più pagine.
Una soluzione consiste nell'inserire dei collegamenti a inizio pagina e farli puntare all'inizio del testo o ai menu di navigazione. Se nella versione grafica questi non sono indispensabili, si possono rendere invisibili con le opportune regole nel foglio di stile.

I collegamenti non sono sempre chiari, soprattutto se decontestualizzati. Quasi nessun collegamento è dotato di testo esplicativo inseribile con l'attributo "title".

[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.

La pagina presenta dei tasti di scelta rapida, ma sono decisamente pochi rispetto ai collegamenti presenti in ogni pagina. Questi infatti sono presenti solo per il modulo di ricerca e per i tre collegamenti che permettono di passare alla versione ad alto contrasto o di modificare la dimensione del testo. Quindi in realtà per la navigazione vera e propria non ci sono tasti di scelta rapida.

Immagine che mostra i pochi tasti di scelta rapida previsti

[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

Viste le numerose infrazioni, anche gravi, alla legge usata come base per l'analisi, possiamo affermare che il sito risulta non conforme.
La nostra impressione è che la normativa sia stata recepita e che in qualche modo gli sviluppatori abbiano tentato di conformare il loro lavoro ad essa. Ne è un esempio il tasto ascoltami con la funzionone di leggere la pagina; peccato però che sia stato implementato decisamente male.
Un altro aspetto positivo è la tendenza a non usare immagini cariche di significato informativo. Questo ha facilitato il loro lavoro di fornire una alternativa testuale, e di sicuro aiuta all'utente il compito di acquisizione dell'informazione.

Male invece tutta la parte inerente ai moduli form e alle tabelle. Per entrambi è chiaro che i realizzatori non conoscono bene la grammatica di riferimento e quindi hanno commesso errori facilmente evitabili come l'assegnazione di <label> ai rispettivi comandi; l'uso di tag in disuso per l'impaginazione delle tabelle; la mancata distinzione e associazione tra celle di intestazione e relative celle di dati all'interno di una tabella.

[u] Torna a inizio pagina