Valutazione della conformità secondo la verifica tecnica Stanca per l'accessibilità del sito del Comune di Venezia (non aggiornato)

Autore: Fiore Enrico Data stesura rapporto: 15/10/2006

Introduzione

Obiettivo

La legge Stanca (legge 4 del 9/1/2004) ha la finalità di tutelare e garantire il diritto di accesso ai servizi informatici e telematici della pubblica amministrazione e ai servizi di pubblica utilità da parte delle persone disabili, in ottemperanza al principio di uguaglianza ai sensi dell'articolo 3 della Costituzione.

A tal fine nella verifica tecnica Stanca vengono definiti una serie di requisiti tecnici di accessibilità.

Lo scopo di questa valutazione è quindi quello di accertare la conformità delle pagine analizzate a tutti i requisiti previsti.

Metodologia

La valutazione della conformità è stata effettuata attraverso le seguenti attività:

  1. Verifica con sistemi di validazione automatica della rispondenza del linguaggio utilizzato alla sua definizione formale. Utilizzo di strumenti semiautomatici di valutazione della accessibilità e verifica manuale per evidenziare problemi non riscontrabili dalle verifiche automatiche
  2. Verifica manuale sull'uso degli elementi e degli attributi secondo le specifiche del linguaggio a marcatori impiegato
  3. Esame della pagina con varie versioni di diversi browser grafici in vari sistemi operativi
  4. Verifica delle differenze di contrasto, luminosità e colore, tra il testo e lo sfondo

Strumenti Utilizzati

Strumenti di validazione automatica:
Strumenti di validazione semiautomatica:
Sistemi operativi e browser grafici:
Strumenti di calcolo delle differenze di luminosità e di colore:

Sommario risultati

Pagine analizzate

L'oggetto di valutazione è l'intero sito ma diverse pagine contengono gli stessi problemi e presentano la medesima impostazione grafica.

L'analisi è stata effettuata su tutte le pagine, ma le seguenti, scelte per la loro importanza all'interno del sito, sono esemplificative delle violazioni riscontrate:

Il sito del Comune di Venezia, oggetto dell'analisi, è stato aggiornato mentre questa valutazione era ancora in corso (07/11/06). I collegamenti alle pagine sopra elencate potrebbero a breve non essere più funzionanti. È stata effettuata un'altra valutazione della conformità analizzando la nuova versione del sito del Comune di Venezia il cui aggiornamento è ancora in corso.

Valutazione sintetica

Il sito analizzato è risultato non conforme a diversi dei requisiti previsti dalla verifica tecnica Stanca. La scelta di un linguaggio sconsigliato (Html 4.01 Transitional), lo scarso utilizzo dei fogli di stile per gestire la presentazione a favore delle tabelle di layout, la totale assenza di descrizioni associate ai collegamenti e il mancato uso degli attributi previsti per le tabelle sono problematiche che riguardano tutte le pagine e che necessitano per essere risolte di una totale revisione del sito. Altri punti importanti sono l'assenza di comandi da tastiera e la mancanza di etichette associate ai campi dei form. Di minore importanza, ma solo perchè possono essere interpretati come svista del programmatore, l'assenza di testo alternativo per alcune immagini, la presenza di alcune scritte lampeggianti o in movimento e il non funzionamento della funzione di ricerca nel caso in cui Javascript sia disabilitato o non supportato.

Analisi Dettagliata

Indice Sezione

È consigliato utilizzare le tabella riassuntiva come sommario dei requisiti considerati.

Analisi delle pagine

Requisito n.1: Validità del codice

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.

Tutte le pagine del sito sono realizzate utilizzando la versione 4.01 dell'HTML con DTD di tipo Transitional. Ciò è consentito solo in sede di prima applicazione cioè in fase transitoria ma con le seguenti avvertenze:

Tutti le pagine del sito utilizzano all'interno del linguaggio elementi ed attributi per definirne le caratteristiche di presentazione. Sia gli attributi di stile interni al documento html che il foglio di stile /model.css utilizzato come impostazione base per tutte le pagine pur ottenendo la validazione presenta numerosi avvertimenti. Tutti i link a siti esterni e alcune foto generano nuove finestre e non avvisano esplicitamente l'utente del cambiamento del focus.

Esempio 1: Frammenti di codice dell'Homepage

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//IT"> <html> <head> ... ...</head> <body onLoad="Configura()" style="margin-left:0; margin-right:0; margin-top:0; margin-bottom:0; "> <table width="100%" border="0" cellspacing="0" class="parag" id="tabella_principale"> <tr> <td height="1" colspan="3" valign="top" background="images/sfondo_barra_rossa_home6.jpg" bgcolor="#B80607"> <div id="Layer1" style="position:absolute; width:168px; height:104px; z-index:2; background-color:#FFFFFF; border: 1px none #000000; left: 0px; top: -1px;">...

Soluzione: Come definito nel testo del requisito è necessario pianificare la transizione dell'intero sito alla versione con DTD Strict del linguaggio utilizzato ed utilizzare i Fogli di stile per controllare la presentazione dei contenuti.

Requisito n.2: Frame

Non è consentito l'uso dei frame nella realizzazione di nuovi siti.

Nessuna pagina del sito utilizza i frame.

Requisito n.3: Alternative testuali

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.

Generalmente per ogni oggetto non di testo è fornita un'adeguata alternativa testuale. Ma alla pagina Collegio dei revisori dei conti è presente un'immagine senza attributo alt o title. Nell'homepage la scritta Città di Venezia che funge da titolo è ricavata da un'immagine e non presenta un'alternativa puramente testuale. Anche alla pagina Piano strategico e Venice film commisssion il titolo è ricavato da un'immagine e senza attributo alt.

Esempio 1: Codice di immagine senza alternativa testuale

<div align="center"><img src="images/revisori.jpg" width=510 height=293 border="0"></div>

Soluzione: Assicurasi che l'alternativa testuale sia specificata per ogni immagine presente nel sito e che sia sufficientemente informativa.

Requisito n.4: Colore

Garantire che tutti gli elementi informativi e tutte le funzionalità siano disponibili anche in assenza del particolare colore utilizzato per presentarli nella pagina.

Tutti gli elementi informativi e tutte le funzionalità sono disponibili anche di assenza del particolare colore utilizzato per presentarli nella pagina.

Requisito n.5: Scritte lampeggianti

Evitare oggetti e scritte lampeggianti o in movimento le cui frequenze di intermittenza possano provocare disturbi da epilessia fotosensibile o disturbi della concentrazione, ovvero possano causare il malfunzionamento delle tecnologie assistive utilizzate; qualora esigenze informative richiedano comunque il loro utilizzo, avvertire l'utente del possibile rischio prima di presentarli e predisporre metodi che consentano di evitare tali elementi.

Alla pagina Consiglio comunale è presente una scritta lampeggiante ottenuta tramite un'animazione gif e una scritta in movimento tramite Javascript. Nelle pagina Ufficio biciclette vi è una scritta in movimento ottenuta tramite javascript.

Esempio 1: Scritte lampeggianti o in movimento

Schermata con esempio di scritte lampeggianti o in movimento

Soluzione: Non essendoci nei casi indicati esigenze informative che le richiedono sostituire le scritte lampeggianti e in movimento con del testo statico.

Requisito n.6: Contrasto

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.

Il contenuto informativo e lo sfondo sono sempre ben distinguibili.

Requisito n.7: Mappe immagine

Utilizzare mappe immagine sensibili di tipo lato client piuttosto che lato server, salvo il caso in cui le zone sensibili non possano essere definite con una delle forme geometriche predefinite indicate nella DTD adottata.

Vengono utilizzate mappe immagine sensibili di tipo lato client.

Requisito n.8: Mappe immagine 2

In caso di utilizzo di mappe immagine lato server, fornire i collegamenti di testo alternativi necessari per ottenere tutte le informazioni o i servizi raggiungibili interagendo direttamente con la mappa.

Non sono utilizzate mappe immagine lato server.

Requisito n.9: Tabelle dati

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.

Le tabelle utilizzate nelle pagine del sito non presentano gli attributi previsti per descrivere i contenuti e identificare le intestazioni.

Esempio 1: Frammenti di codice di una tabella

<table width=570 cellpadding=0 cellspacing=0 border=0 summary=""> <tr><td><p class="titolo" ID="Titolo">attività della presidenza</p><br></td></tr> <tr><td><table cellpadding="3" cellspacing="3" border="0" summary="" width="100%"> <tr><td width="30%" bgcolor="#9AA9B0"><p class="testo1HC"> presidente</p></td> <td width="45%" bgcolor="#9AA9B0"><p class="testo1HC"> e-mail</p></td> <td width="5%" bgcolor="#9AA9B0"><p class="testo1HC"> atti</p></td> <td width="20%" bgcolor="#9AA9B0"><p class="testo1HC"> il punto di vista di</p></td></tr> <tr><td><span class="cons_c">Renato Boraso</span></td> <td><a class="cons_c" href="mailto:renato.boraso@comune.venezia.it">renato.boraso@comune.venezia.it</a></td> <td><a href="/str/att_pers.asp?Cons=Renato Boraso&P=forzaitalia&Caso=3"><img src="/consiglio/images/cerca.gif" border=0 alt="Collegamento agli atti del Consigliere"></a></td> <td><a href="/str/index_pdv.asp?P=forzaitalia&C=69&N=Renato Boraso&Caso=4"><img src="/consiglio/images/puntovis.gif" border=0 alt="Collegamento ai punti di vista del Consigliere"></a></td></tr> ...

Esempio 2: Tabella dell'Esempio 1

Schermata della tabella dell'Esempio 1

Soluzione: È necessario utilizzare tutti gli attributi previsti per fare in modo che la tabella sia accessibile. "Riempire" l'attributo summary con una descrizione della tabella, utilizzare il tag caption per aggiungere una didascalia. Inoltre definire le intestazioni tramite il tag th e specificare i loro eventuali attributi di stile tramite i fogli di stile.

Requisito n.10: Tabelle dati 2

Per le tabelle dati usare gli elementi (marcatori) e gli attributi previsti nella DTD adottata per associare le celle di dati e le celle di intestazione che hanno due o più livelli logici di intestazione di righe o colonne.

Non sono presenti tabelle a due o più livelli logici di intestazione di righe o colonne.

Requisito n.11: Fogli di stile

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.

Nelle pagine analizzate i fogli di stile hanno una funzione marginale. La disposizione dei contenuti è ottenuta tramite tabelle quindi resta invariata disabilitanto i fogli di stile.

Soluzione: Controllare la presentazione dei contenuti tramite i fogli di stile.

Requisito n.12: Liquid layout

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.

La presentazione e i contenuti testuali di tutte le pagine analizzate si adattano alle dimensioni della finestra del browser utilizzata dall'utente.

Requisito n.13: Tabelle di layout

In caso di utilizzo di tabelle a scopo di impaginazione, garantire che il contenuto della tabella sia comprensibile anche quando questa viene letta in modo linearizzato e utilizzare gli elementi e gli attributi di una tabella rispettandone il valore semantico definito nella specifica del linguaggio a marcatori utilizzato.

Sono utilizzate tabelle a scopo di impaginazione e il contenuto è comprensibile anche se vengono lette in modo linearizzato.

Requisito n.14: Form

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.

Non è presente in nessuna occasione un'associazione esplicita nei form mediante il tag label.

Esempio 1: Frammenti di codice di un form

<form action="/str/att_cc.asp#risp" method="post" name="atti">... ...<select name="mese"> <option value="" selected>Mese</option> <option value="01">Gennaio</option> ... ...<input type="Text" name="SearchString" size="22" value=""></td></tr> <tr><td bgcolor="#CBDAE1"><p class="intest1">Ricerca per autore</p></td><td><input type="Text" name="autore" size="22" value=""></td></tr>...

Soluzione: Come raccomanda il requisito è necessario associare ad ogni campo di ogni form un tag label che lo "etichetti" in modo da agevolare la compilazione degli stessi.

Requisito n.15: Script, applet ed altri oggetti

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.

La funzione ricerca nella Homepage non funziona con Javascript disabilitato

Soluzione: Evitare di presentare il campo per la ricerca se Javascript è disabilitato o implementare la funzione ad esempio in un linguaggio lato-server.

Requisito n.16: Eventi

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.

Le funzionalità fornite attraverso Script Applet e altri oggetti sono indipendenti dal dispositivo di input.

Requisito n.17: Script, applet ed altri oggetti 2

Garantire che le funzionalità e le informazioni veicolate per mezzo di oggetti di programmazione, oggetti che utilizzano tecnologie non definite da grammatiche formali pubblicate, script e applet siano direttamente accessibili.

Le funzionalità fornite attraverso Script Applet e altri oggetti sono direttamente accessibili.

Requisito n.18: Multimedia

Nel caso in cui un filmato o una presentazione multimediale siano indispensabili per la completezza dell'informazione fornita o del servizio erogato, predisporre una alternativa testuale equivalente, sincronizzata in forma di sotto-titolazione o di descrizione vocale, oppure fornire un riassunto o una semplice etichetta per ciascun elemento video o multimediale tenendo conto del livello di importanza e delle difficoltà di realizzazione nel caso di trasmissioni in tempo reale.

Non sono presenti casi in cui filmati e presentazioni multimediali siano indispensabili per la completezza dell'informazione fornita

Requisito n.19: Link non ambigui

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.

Non è presente nessuna indicazione circa la destinazione dei collegamenti e un solo collegamento all'interno della pagina che permette di saltare la barra principale di navigazione.

Esempio 1: Codice di un link

<a href="http://www.progettoconsiglio.it" target="_blank" class="home_i">www.progettoconsiglio.it</a>

Soluzione: Utilizzare l'attributo title del tag a per descrivere ogni collegamento e per informare l'utente sulla destinazione dello stesso. Prevedere altri meccanismi, come quello che permette di saltare la barra di navigazione principale, per poter passare da una sezione all'altra della pagina.

Requisito n.20: Temporizzazioni

Nel caso che per la fruizione del servizio erogato in una pagina è previsto un intervallo di tempo predefinito entro il quale eseguire determinate azioni, è necessario avvisare esplicitamente l'utente, indicando il tempo massimo consentito e le alternative per fruire del servizio stesso.

Non è presente contenuto temporizzato.

Requisito n.21: Link distanti

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

Non sono previsti comandi attivabili da tastiere. La spaziatura e la dimensione dei pulsanti risultano adeguate.

Soluzione: Utilizzare l'attributo accesskey del tag a per definire comandi da tastiera per accedere ai collegamenti più importanti. Fornire una pagina di riepilogo delle "scorciatoie" messe a disposizione.

Requisito n.22: Pagine equivalenti

Per le pagine di siti esistenti che non possano rispettare i suelencati 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.

Non è presente una pagina alternativa

Soluzione: Finchè i precedenti requisiti non verranno soddisfatti completamente sarebbe opportuno prevedere la creazione di pagine alternative puramente testuali.

Tabella riassuntiva

Tabella requisiti
Requisito Esito valutazione
Validità del codice : Non Conforme
Frame: Conforme
Alternative testuali: Non Conforme
Colore: Conforme
Scritte lampeggianti: Non Conforme
Contrasto: Conforme
Mappe immagine: Conforme
Mappe immagine 2: Non valutabile
Tabelle dati: Non Conforme
Tabelle dati 2: Non valutabile
Fogli di stile: Non Conforme
Liquid layout: Conforme
Tabelle di layout: Conforme
Form: Non Conforme
Script, applet ed altri oggetti: Non Conforme
Eventi: Conforme
Script, applet ed altri oggetti 2: Conforme
Multimedia: Conforme
Link non ambigui: Non Conforme
Temporizzazioni: Non valutabile
Link distanti: Non Conforme
Pagine equivalenti: Non Conforme
Vai a inizio pagina