Relazioni per il corso di Laboratorio Progettazione Siti Web
Autori: Luca de Ruvo, Henry Bonamigo

Regione Puglia - Verifica della conformità

Sommario

Introduzione

Per la verifica della conformità del sito della Regione Puglia ci siamo basati sull'utilizzo delle linee guida WCAG 1.0 AA (priorità 1 e 2) del consorzio W3C., consultabili a questo indirizzo.

Metodologia

Abbiamo fatto uso di strumenti di controllo automatico come Cynthia Says e Bobby: grazie all'ispezione automatizzata del codice ci hanno permesso di trovare violazioni alle linee guida WCAG che sarebbero potute sfuggire ad un controllo manuale. Abbiamo infine unito i risultati del controllo automatico a quelli del controllo manuale delle pagine web per arrivare alla produzione di un rapporto sull'accessibilità quanto più completo.

Pagine analizzate

 

WCAG 1.0 Priorità 1

BASE Conforme
1.1 Fornire un equivalente testuale per ogni elemento non di testo (per esempio, mediante "alt", "longdesc" o contenuto nell'elemento stesso). Questo comprende : immagini, rappresentazioni grafiche di testo (compresi i simboli), zone di immagini sensibili, animazioni (ad es. GIF animate), applets e oggetti programmati, arte ASCII , frame, script, immagini usate come richiamo per elenchi, spaziatori, bottoni grafici, suoni (azionati con o senza l'intervento dell'utente), file di solo audio, tracce audio di video e video. no vedi dettaglio
2.1 Assicurarsi che tutta l'informazione veicolata dal colore sia disponibile anche senza, per esempio grazie al contesto o ai marcatori. si
4.1 Identificare con chiarezza i cambiamenti nel linguaggio naturale del testo di un documento e in ogni equivalente testuale (per es. nelle didascalie). si
6.1 Organizzare i documenti in modo che possano essere letti senza i fogli di stile. Per esempio, quando un documento HTML viene reso senza i fogli di stile associati, deve essere sempre possibile leggere il documento. si
7.1 Fino a quando gli interpreti non permetteranno agli utenti di controllare lo sfarfallìo, evitare di far sfarfallare lo schermo. si
14.1 Usare il linguaggio più chiaro e semplice possibile che sia adatto al contenuto di un sito. si
11.4 Se, nonostante ogni sforzo , non si può creare una pagina accessibile, fornire un collegamento a una pagina alternativa che usi le tecnologie W3C, sia accessibile, contenga informazioni (o funzionalità) equivalenti , e sia aggiornata con la stessa frequenza della pagina (originale) inaccessibile. nv
IMAGE MAP Conforme
1.2 Fornire ridondanti collegamenti di testo per ogni zona attiva di una immagine sensibile sul lato server. nv
9.1 Fornire immagini sensibili sul lato client invece di immagini sensibili sul lato server, con l'eccezione dei casi nei quali le zone non possono essere definite con una forma geometrica valida. nv
TABELLE Conforme
5.1 Per tabelle di dati, identificare le intestazioni di righe e colonne. no vedi dettaglio
5.2 Per tabelle di dati che hanno due o più livelli logici di intestazioni di righe o colonne, usare marcatori per associare le celle di dati e le celle di intestazione. nv
FRAME SCRIPT MULTIMEDIA Conforme
1.3 Fino a quando gli interpreti non potranno leggere automaticamente ad alta voce l'equivalente testuale di un filmato, fornire una descrizione audio delle informazioni essenziali del filmato di una presentazione multimediale. nv
1.4 Per ogni presentazione multimediale temporizzata (per es. un film o una animazione), sincronizzare alternative equivalenti (per es. didascalie o descrizioni parlate del filmato) con la presentazione. nv
6.2 Assicurarsi che gli equivalenti del contenuto dinamico vengano aggiornati quando il contenuto dinamico cambia. nv
6.3 Assicurarsi che le pagine siano utilizzabili quando script, applet, o altri oggetti di programmazione sono disabilitati oppure non supportati. Se questo non è possibile, fornire informazione equivalente in una pagina accessibile alternativa. no vedi dettaglio
8.1 Fare in modo che elementi di programmi come script e applet siano direttamente accessibili o compatibili con le tecnologie assistive. si
12.1 Dare un titolo a ogni frame per facilitare l'identificazione del frame e la navigazione. no vedi dettaglio
Legenda: si = punto di controllo soddisfatto; no = non conforme alla linea guida; nv = non verificabile: non erano presenti elementi relativi al checkpoint in questione.

 

WCAG 1.0 Priorità 2

BASE Conforme
2.2 Assicurarsi che le combinazioni fra colori dello sfondo e del primo piano forniscano un sufficiente contrasto se visti da qualcuno con deficit percettivi sul colore o se visti su uno schermo in bianco e nero. si
3.1 Quando esiste un linguaggio di marcatori adatto, per veicolare informazione usare un marcatore piuttosto che le immagini. si
3.2 Creare documenti che facciano riferimento a grammatiche formali pubblicate. si
3.3 Usare fogli di stile per controllare l'impaginazione e la presentazione. no vedi dettaglio
3.4 Usare unità relative e non assolute nei valori degli attributi del linguaggio dei marcatori e i valori della proprietà del foglio di stile. no vedi dettaglio
3.5 Usare elementi di intestazione per veicolare la struttura del documento e usarli in modo conforme alle specifiche. si
3.6 Marcare le liste ed elencare le voci della lista in modo appropriato. nv
3.7 Marcare le citazioni. Non usare marcatura che definisca citazioni per ottenere effetti di formato come il rientro. nv
6.5 Assicurarsi che il contenuto dinamico sia accessibile oppure fornire una presentazione o pagina alternativa. nv
7.2 Fino a quando gli interpreti non permetteranno agli utenti di controllare il lampeggiamento, evitare di far lampeggiare il contenuto (cioè di cambiare la presentazione a intervalli regolari, come se si accendesse e spengesse). si
7.4 Fino a quando gli interpreti non forniranno la possibilità di bloccare l'autoaggiornamento, non creare pagine che si autoaggiornano periodicamente. si
7.5 Fino a quando gli interpreti non forniranno la capacità di bloccare l'auto-reindirizzamento, non usare marcatura per reindirizzare le pagine automaticamente. Piuttosto, configurare il server in modo che esegua i reindirizzamenti. si
10.1 Fino a quando gli interpreti non permetterano agli utenti di bloccare la generazione di nuove finestre, non fare apparire finestre a cascata o di altro tipo e non cambiare la finestra attiva senza informare l'utente. no vedi dettaglio
11.1 Usare le tecnologie W3C quando sono disponibili e sono appropriate per un certo compito e usare le versioni più recenti quando sono supportate. si
11.2 Evitare le caratteristiche delle tecnologie W3C che sono disapprovate. no vedi dettaglio
12.3 Dividere grandi blocchi di informazione in gruppi più maneggevoli quando è naturale ed appropriato. si
13.1 Identificare con chiarezza l'obiettivo di ogni collegamento. no vedi dettaglio
13.2 Fornire metadata per aggiungere informazione di tipo semantico alle pagine e ai siti. si
13.3 Fornire informazione sulla configurazione generale di un sito (per es., una mappa oppure un indice del sito). si
13.4 Usare meccanismi di navigazione in modo coerente. si
TABELLE Conforme
5.3 Non usare tabelle per impaginazioni a meno che la tabella non sia comprensibile se letta in modo linearizzato. Altrimenti, se la tabella non risulta leggibile, fornire una alternativa equivalente (che può essere una versione linearizzata ). si
5.4 Se per l'impaginazione viene usata una tabella non usare nessun marcatore di struttura per la formattazione della resa visiva. si
FRAME Conforme
12.2 Descrivere lo scopo dei frame e il modo in cui essi interagiscono se non è evidente dai titoli dei frame da soli. nv
FORM Conforme
10.2 Fino a quando gli interpreti non supporteranno esplicite associazioni fra etichette e controlli dei moduli, assicurare, per tutti i controlli dei moduli che hanno etichette associate implicitamente, che l'etichetta sia posizionata correttamente. no vedi dettaglio
12.4 Associare esplicitamente le etichette ai loro controlli. no vedi dettaglio
APPLET, OBJECT E SCRIPT Conforme
6.4 Per quanto riguarda script e applet, assicurarsi che i gestori di eventi siano indipendenti dai dispositivi di input. si
7.3 Fino a quando gli interpreti non permetteranno agli utenti di bloccare il contenuto in movimento, evitare il movimento nelle pagine. no vedi dettaglio
8.1 Fare in modo che elementi di programmi come script e applet siano direttamente accessibili o compatibili con le tecnologie assistive. nv
9.2 Assicurarsi che ogni elemento che possiede una sua specifica interfaccia possa essere gestito in una modalità indipendente da dispositivo. nv
9.3 Negli script, specificare gestori di evento logici piuttosto che gestori di evento dipendenti da dispositivo. nv
Legenda: si = punto di controllo soddisfatto; no = non conforme alla linea guida; nv = non verificabile: non erano presenti elementi relativi al checkpoint in questione.

 

DETTAGLIO DEI PROBLEMI RISCONTRATI

 

Violazione Linea Guida 1.1.2 - Tutti gli elementi INPUT devono contenere l'attributo ALT o usare LABEL.

Manca l'attributo alt con il relativo valore:

<INPUT type=image src="themes/apulia/images/cercasito.gif" name="cercasito" onclick="inviaweb(true);"></td> 


<input type=image src="themes/apulia/images/cercaweb.gif" name="cercaweb" onclick="inviaweb(false);">

Inoltre nelle pagine del sito ci sono numerose immagini prive dell'attributo alt; ci sono anche immagini che hanno il commento nell'alt ma non è significativo, il caso più emblematico è quello presente nella pagina relazioni con il pubblico, dove all'immagine che riporta il numero verde per l'assistenza telefonica è associato il commento "numero verde": pertanto per chi fruisse della pagina con un lettore di schermo o con un browser testuale sarebbe impossibile conoscere il numero da chiamare in quanto questo è presente solo nell'immagine.

 cattura dello schermo con l'immagine del numero verde
Numero Verde

 

Torna alla tabella

 

Violazione Linea Giuda 3.3 - Usare fogli di stile per controllare l'impaginazione e la presentazione.

L'impaginazione è realizzata tramite l'uso di tabelle invisibili annidate: il posizionamento e le dimensioni sono specificate nel file html invece che nel folgio di stile.

 

Torna alla tabella

 

Violazione Linea Giuda 3.4 - Usare unità relative.

Nei file html delle pagine come nel foglio di stile tutte le misure sono specificate in pixel (px). E' opportuno modificarle con misure relative come percentuali o em.

 

Torna alla tabella

 

Violazione Linea Guida 5.1 - Per tabelle di dati, identificare le intestazioni di righe e colonne.

Nella pagina segreteria giunta (sezione Sedute giunta regionale) c'è una tabella:

 cattura dello schermo con l'immagine della tabella dati

La tabella dati viene realizzata in questo modo:

<table border="1" width="100%">
 <tbody>
  <tr valign="top">

   <td width="16%"><b><font color="#71b2cf">Data</font></b></td>
   <td width="23%"><b><font color="#71b2cf">Tipo</font></b></td>

   <td width="16%"><b><font color="#71b2cf">OdG N°</font></b></td>
   <td width="45%"><b><font color="#71b2cf">Variazioni</font></b></td>

  </tr>
  <tr valign="top">
   <td width="16%"> 
  21/03/2006<br>
  15/03/2006<br>

  14/03/2006<br>
  ...
   </td>
   <td width="23%">
  Ordinaria<br>

  Straordinaria<br>
  Ordinaria<br>
  ...
   </td>
   <td width="16%">

  10<br>
  6 S<br>
  9<br>
  ...
   </td>

   <td width="45%">
  <br>
  <br>
  <br>
        ...
   </td>

  </tr>
 </tbody>
</table>

La tabella non può nemmeno definirsi tale: le intestazioni di colonna non sono identificate dal tag <th> e mancano le righe: invece di collocare i dati in singole celle, questi vengono presentati tutti in una cella incolonnati da una serie di invio a capo (<br> - per giunta senza il simbolo di chiusura del tag: <br/>). Sembra superfluo dire che se un lettore di schermo si dovesse imbattere in una tabella simile il risultato sarebbe catastrofico perchè leggerebbe il contenuto per colonne rendendo incomprensbili i dati. Come se non bastasse viene fatto uso di tag deprecati dal W3C come <font> e <b> che andrebbero eliminati e sostituiti da regole nel css.

 

Torna alla tabella

 

Violazione Linea Guida 6.3 - Le pagine devono essere utilizzabili con l'interprete JavaScript disabilitato o mancante.

Tutte le pagine fanno uso di codice JavaScript per implementare le funzioni di ricerca. Disabilitanto JavaScript e provando effettuare una ricerca sfruttando l'appostio campo, all'utente verrà ripresentata la stessa pagina in cui si trova, rendendo quindi la funzione inutilizzabile. Inoltre per accedere alla sezione CIFRA - Segreteria della giunta regionale all'utente verrà chiesto di installare un software di terze parti per poter visualizzare la pagina.

 

Torna alla tabella

 

Violazione Linea Guida 7.3 - Evitare il movimento nelle pagine.

Nella Home Page sulla destra dello schermo sono presenti due immagini (pugliattiva.gif e nvquiregione.gif) che cambiano il loro stato ogni 5 secondi circa. Tutto sommato il cambiamento cromatico è molto leggero e la velocità dello stesso è bassa: come ogni movimento situato nella zona periferica della visione, queste immagini animate rimangono sempre una fonte di distrazione, che fortunatamente in questo caso non è troppo forte.

 

Torna alla tabella

 

Violazione Linea Guida 10.1 - Non cambiare la finestra attiva senza informare l'utente.

Numerosi link del sito presentano la seguente sintassi:

<a href="..." target="_blank" />

Cliccando sul link verrà aperta una nuova finestra che andrà a sovrapporsi a quella corrente. Onde evitare di creare confusione e spiazzare l'utente sarebbe bene avvisarlo che il collegamento avrà tale effetto, ad esempio in questo modo:

<a href="..." title="il link verrà aperto in una nuova finestra" target="_blank" />

Inoltre il link "Il nuovo Statuto della Regione Puglia" - è la prima voca del menù di sinitra - punta ad un documento in formato pdf: se si dispone del software appropriato per visualizzarlo e del relativo plugin per il browser, il documento di interesse varrà anche esso aperto e visualizzato in una nuova finestra.

 

Torna alla tabella

 

Violazione Linea Guida 10.2 - Assicurare, per tutti i controlli dei moduli che hanno etichette associate implicitamente, che l'etichetta sia posizionata correttamente e Violazione Linea Giuda 12.4 - Associare esplicitamente le etichette ai loro controlli.

 come appare l'home page del sito regione puglia

Secondo le raccomandazioni del W3C, l'etichetta deve precedere il proprio controllo immediatamente sulla stessa riga. In tutte le pagine è presente la funzione di ricerca che è in alto subito sotto al menu di navigazione centrale; prima del campo di testo che serve per la ricerca non c'è niente che ne specifichi la funzione. Il suo significato viene convogliato dall'immagine che lo segue, che ha la funzione di bottone per attivare la ricerca: questa immagine riporta la scritta "cerca nel sito" ma è prima di attributo alt. Quindi all'utente di un browser vocale o di un lettore di schermo verrebbe segnalata solo la presenza di un campo testuale di una form senza altri elementi per capire di cosa si tratti.

 

Torna alla tabella

 

Violazione Linea Guida 11.2 - Evitare le caratteristiche delle tecnologie W3C che sono disapprovate.

Viene fatto uso di tag html deprecati quali:


<center>...</center>   <font>...</font>

che andrebbero sostituiti con:

<div >...</div>   <span style="font-family: X, font-size: Y, color: Z">...</span>

 

Torna alla tabella

 

Violazione Linea Guida 12.1 - Dare un titolo a ogni frame per facilitare l'identificazione del frame e la navigazione.

Ecco il codice sorgente della pagina CIFRA - Segreteria della giunta regionale:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> 
<html> 
<head> 
 <script language = "JavaScript" type = "text/javascript"> 
  <!-- self._domino_name = "_MasterDiscFrameset"; // --> 
 </script>
</head> 
 <frameset frameborder="1" border="2" framespacing="2" cols="215,1*" > 
 <frameset frameborder="1" rows="121,1*,45" > 
 <frame frameborder="1" marginwidth="1" marginheight="1" scrolling = "no" name="leftTop" src="/web_pub_pubblico.nsf/dspTemplateName?OpenPage"> 
 <frame frameborder="1" scrolling="no" name="left" src="/web_pub_pubblico.nsf/MasterDiscOutline?OpenPage&amp;BaseTarget=NotesView"> 
 <frame frameborder="1" marginwidth="1" marginheight="1" scrolling="no" name="leftBottom" src="/web_pub_pubblico.nsf/DbaseTitleDisplay?OpenPage"> 
 </frameset> 
 <frame frameborder = "1" name = "NotesView" src = "/web_pub_pubblico.nsf/Introduzione?OpenPage" > 
 </frameset> 

</html>

Cliccando l'utente potrebbe aspettarsi di ritornare alla home page del sito ma in realtà ottiene solo l'effetto di ricaricare la pagina attuale; quindi il collegamente è inutile e fuorviante. La stessa cosa accade per il link "Prima pagina" in quanto non è specificata nessun riferimento per l'attributo href del tag A.

 

Torna alla tabella

 

Violazione Linea Guida 13.1 - Identificare con chiarezza l'obiettivo di ogni collegamento.

A prima vista l'immagine con la scritta "Regione Puglia sito ufficiale" può sembrare un elemento decorativo, come lo sono le tre piccole immagini che si trovano nella parte destra della pagina.

 come appare l'home page del sito regione puglia

In realtà questa immagine è un link, ecco il codice corrispondente:

<a href=""><img  src="themes/apulia/images/logo_b.gif" alt="Benvenuti in QUIregione"></a>

Cliccando l'utente potrebbe aspettarsi di ritornare alla home page del sito ma in realtà ottiene solo l'effetto di ricaricare la pagina attuale; quindi il collegamente è inutile e fuorviante. La stessa cosa accade per il link "Prima pagina" in quanto non è specificata nessun riferimento per l'attributo href del tag A.

 

Torna alla tabella

Conclusioni

Dall'analisi effettuata il sito non è conforme alle linee guida WCAG 1.0 AA; tra la carenze più gravi abbiamo riscontrato:

Il sito web della Regione Puglia rientra nelle categorie coperte dalla Legge Stanca per l'accessibilità di soggetti disabili agli strumenti informatici (Legge numero 4 del 9 Gennaio 2004) e in quanto tale dovrebbe rispettare le linee guida WCAG.

Pertanto gli sviluppatori del sito dovrebbero considerare una rivisitazione del sito che sia più aderente agli standard suggeriti dal W3C (xhtml e css in primo luogo), evitando di usare sintassi deprecata e accertandosi che vengano rispettate almeno le linee guida con priorità più alta.

html validocss valido