PROGETTAZIONE SITI WEB

e Laboratorio Avanzato

di Scolaro Stefano, Mc Gilvray Alessandro, Saccomanno Simone

 

Relazione sulla Conformità WCAG 1.0 AA del sito della regione Sicilia


 

Introduzione

Le linee guida WCAG per l'accessibilità dei contenuti servono per cercare di rendere le pagine web accessibili a tutti gli utenti, in particolare coloro che utilizzano speciali browser come lettori di schermo, browser testuali, lettori braille; Questi interpreti vengono utilizzati da utenti che hanno limitazioni fisiche come, ad esempio, non vedenti o ipovedenti, che in genere non sono in grado di trattare le informazioni completamente od efficentemente.

L'accessibilità è importante anche per utenti che utilizzano dispositivi disabilitanti come palmari,cellulari, browser per automobili, chioschi internet ecc., questi dispositivi hanno limitazioni che riguardano le dimensioni dello schermo, la quantità di colori, il sistema di input e la velocità di connessione. Vanno tenute in considerazione anche sitazioni di stress cognitivo o situazioni in cui l'utente non può utilizzarre mani, occhi od orecchie.

L'analisi della Conformità per individuare eventuali violazioni agli standard prescelti, nel nostro caso WCAG ma potremmo anche aver preso in condiderazione la Section 508 americana, determinano solamente caratteristiche interne alla pagine cioè più in generale relative al codice HTML/XHTML e non prende in considerazione eventuali problemi legati all'interazione con l'utente disabile o disabilitato. In definitiva la conformità agli standard di una pagina non ci indica che la pagina sia completamente accessibile, tuttavia è un buon modo per arrivare prima alla completa accessibilità.


Torna al menù

Sommario

Il sito della regione Sicilia è un sito prettamente informativo con contenuti a parer nostro piuttosto scarni. E' stata analizzata principalmete l'home page, insieme alla pagina relativa alle notizie. Le altre pagine, presentando sommariamente tutte gli stessi problemi, sono state analizzate molto più in generale, riportando gli esempi più frequenti e più importanti. La categoria dei Siti Tematici non è stata presa in considerazione, in quanto per ogni tema è proposto un layout e una raccolta d'informazioni strutturate in modo diverso da tutto il resto del sito. L'analisi si è svolta studiando dapprima il codice, cercando di estrapolare il layout principale e la forma utilizzata per la stesura delle pagine. In seguito le pagine sono state sottoposte a vari validatori elettronici per far in modo che vengano riscontrati i principali e i più grossi errori . Una volta svolto questo lavoro si è passati ad analizzare riga per riga tutte le pagine in questione, cercando di rilevare gli errori che i software non sono riusciti ad individuare. Il sito della Regione Sicilia ha violato molte linee guida importanti, soprattutto quelle riguardanti l'uso delle tabelle come layout, dell'indipendenza da dispositivo e da sistema. Le tecnologie utilizzate dagli sviluppatori del sito non rispettano gli standard proposti dal World Wide Web Consortium e ad un utente non in possesso dei classici mezzi di utilizzo di internet risulta molto difficoltoso se non impossibile visualizzare le pagine.


Torna al menù

Strumenti utilizzati


Torna al menù

Linee guida violate

Priority 1
Priority 2

Torna al menù

Analisi Dettagliata

1.1 Fornire un equivalente testuale per ogni elemento non di testo. [Priorità 1]

Nei casi in cui l'immagine viene utilizzata come titolo, nella maggior parte dei casi l'attributo ALT non viene usato. Se la pagina viene visualizzata senza immagini, avviene una perdita d'informazione, in quanto un utente può non ricordarsi in quale pagina si trova. Stessa cosa se viene usato un lettore di schermo: non si riesce a stabilire di che tipo di grafica si tratti, se sia rilevante o meno per capire il contenuto della pagina.

Esempio di immagine utilizzata come titolo

Per quanto riguarda le altre immagini, viene fornita una descrizione quasi sempre esauriente, che consente efficacemente di sopperire all'eventuale mancanza. L'errore viene fatto nell'utilizzo dell'attributo ALT in immagini di contorno, come si può notare nella tabella delle news nella home page, dove in un'immagine usata come elemento grafico di fine tabella compare un ALT non consono.

codice HTML - pag. /index.asp - linea 444
<img src="work/notbotton12.gif" width="330" height="15" alt="Fine tabella notizie">


Torna Su

2.1 Assicurarsi che tutta l'informazione veicolata dal colore sia disponibile anche senza, per esempio grazie al contesto o ai marcatori. [Priorità 1]

Non sono state rilevati possibili errori nella veicolazione del colore. Le pagine, testate su monitor in bianco e nero risultano leggibili e con link chiaramente identificalbili, tutte le intestazioni rappresentate in rosso vengono anche evindenziate in grassetto cosicchè il disabile percettivo possa percepire l'informazione allo stesso modo. Nei Link quando avviene il roll-over la sottolineatura scompare evidenziando la possibile attività sull'elemento.


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. [Priorità 2 per le immagini, Priorità 3 per il testo].

L'informazione appare correttemente, le differenze tra sfondo e primo piano appaiono con sufficente contrasto. Per questo test ci siamo affidati al sito internet Colorblind Web Page Filter, testando tutte le principali forme di anomalie percettive dell'occhio.

Tabella delle notizie nella Home veicolata con colore Tabella delle notizie nella Home veicolata in bianco e nero


Torna Su

3.1 Quando esiste un linguaggio di marcatori adatto, per veicolare informazione usare un marcatore piuttosto che le immagini. [Priorità 2]

Per mostrare il titolo della pagina vengono utilizzate delle immagini piuttosto che del testo marcato appositamente.

codice HTML - pag. /index.asp - linea 308
<img src="work/copertinaold22.gif" width="218" height="24" alt="In primo piano">


Queste immagini alcune volte hanno un attributo ALT corretto che permette la visualizzazione della pagina senza perdita d'informazione se le pagine vengono viste senza l'ausilio della grafica, mentre in altri casi l'attributo non viene utilizzato. Nel primo caso, lo consideriamo un errore di media importanza, e se si consiglia l'utilizzo dei tag <H1> o <H2> per identificare i titoli e di uniformare il codice.
Un altro errore riscontrato e' nell'utilizzo delle liste. Graficamente nel pannello news dell'Home Page e in /uffici.asp appaiono dei puntini che fanno pensare all'utilizzo di una lista non ordinata. In realta' sono degli elementi testuali (dei puntini) che in un lettore di schermo vengono male interpretati. Questi elementi andrebbero rimossi e le news andrebbero formattate in modo corretto tramite tag <UL> e <LI>.


3.2 Creare documenti che facciano riferimento a grammatiche formali pubblicate. [Priorità 2]

Non viene mai specificato il tipo di DTD utilizzato per identificare la pagina. Si ipotizza una codifica dei caratteri iso-8859-2 (Europa Centrale) e l'utilizzo di un linguaggio di mark-up che fa riferimento alle specifiche del Doctype HTML 4.01 Transitional, e questo perche' la presenza di tag <FONT> ce lo suggurisce. Le pagine non risultano valide, e gli errori riscontrati sono molteplici. Spesso vengono utilizzati attributi sconosciuti, come ad esempio:

codice HTML - pag. /index.asp - linea 273
<hr color=#009966>


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. [Priorità 2]

Nei fogli di stile interni si sono usate misure assolute in pixel per il layout, vengono anche usate le misure in pixel in tutte le tabelle.


Torna Su

4.1 Identificare con chiarezza i cambiamenti nel linguaggio naturale del testo di un documento e in ogni equivalente testuale (per es. nelle didascalie). [Priorità 1]

L'attributo LANG per definire la lingua del sito e' mancante.


Torna Su

5.1 Per tabelle di dati, identificare le intestazioni di righe e colonne. [Priorità 1]

Le tabelle non presentano nessun tag di intestazione del tipo <TH>, per cui la sua lettura non risulta agevole in modalità testuale e con browser vocali.


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). [Priorità 2]

Il sito fa uso intensivo di tabelle per il layout delle pagine; tuttavia il contenuto della tabella letto in modalità linearizzata con Lynx risulta abbastanza comprensibile.

screenshot del programma Lynx sulla Home


Torna Su

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. [Priorità 1]

Per rappresentare le informazioni viene utilizzato codice di stile e codice transizionale insieme. E' presente un CSS ma il suo utilizzo è relativo (violazione WCAG punto 3), in quanto e' utilizzato prettamente per ( pochi ) abbellimenti grafici. Andrebbe separato il contenuto del sito dalla presentazione, utilizzando solamente le proprietà dei CSS. Il foglio di stile non è usato correttamente:

codice HTML - /index.asp - linea 4
<style TYPE="text/css">
...
</style>
<style type="text/css">


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. [Priorità 1]

Senza l'utilizzo dei javascript il sito non è accessibile in nessuno modo, in quanto la navigazione del menu è realizzata tramite script. Non è presente il tag <NOSCRIPT>, utile per creare un contenuto alternativo, in questo caso sarebbe stato molto utile per fornire un menù accessibile. Il problema riscontrato è molto grave. Nella intestazione della Home Page viene inoltre utilizzato codice javascript per stampare a video un saluto di benvenuto in base al momento della giornata e nella parte destra viene visualizzata l'ora, informazioni queste che ovviamente non vengono fruite se il javascript è disattivato o non supportato. Sotto il menu viene anche gestito un newsticker cioè un servizio di news anche questo non accessibile e senza contenuto alternativo.


6.4 Per quanto riguarda script e applet, assicurarsi che i gestori di eventi siano indipendenti dai dispositivi di input. [Priorità 2]

Non ci sono Event Handler per dispositivi diversi (tastiere, etc...), per cui il sito è dipendente dal dispositivo mouse, pregiudicando l'accesso ad utenti che non possono utilizzare questo strumento.


Torna Su

7.3 Fino a quando gli interpreti non permetteranno agli utenti di bloccare il contenuto in movimento, evitare il movimento nelle pagine. [Priorità 2]

E' presente del contenuto in movimento nella parte sinistra del sito sotto il menu con un newsticker, che rappresenta le ultime notizie tramite uno scroller news. Non c'è modo di bloccare il javascript, il quale andrebbe tolto per lasciar spazio a un sistema di news più tradizionale, evitando il movimento del testo.


Torna Su

8.1 Fare in modo che elementi di programmi come script e applet siano direttamente accessibili o compatibili con le tecnologie assistive [Priorità 1 se la funzionalità è importante e non presentata altrove, altrimenti Priorità 2.]

Negli script, tutti realizzati tramite javascript, non è mai presente il tag <NOSCRIPT> o <OBJECT>, per cui il codice proposto non è accessibile in nessuna maniera da browser che non supportano javascript.


Torna Su

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. [Priorità 2]

I molti casi vengono aperte nuove finestre senza avvisare l'utente di ciò che accade. Tutti questi eventi sono generati tramite javascript o tramite attributi presenti nel tag <A>. L'utente non riesce a capire se si trova sempre sul sito originario oppure è avvenuto uno spostamento su un altro server.

codice HTML - pag. /index.asp - linea 103
<a href="/turismo" target="_blank">


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. [Priorità 2]

Tutti i form presenti nel sito sono senza etichette. Sia nella pagina /news.asp che nella pagina /eventi.asp si incorre nel rischio che la form non venga percepita correttamente, potendo generare frustrazione nell'utente.

screenshot del programma Lynx sulle News

Torna Su

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. [Priorità 2]

Non è dichiarata quale tecnologie viene usata nella realizzazione delle pagine. Si pensa non sia la più recente, visto l'utilizzo ad esempio del tag <FONT>, ormai deprecato.


11.2 Evitare le caratteristiche delle tecnologie W3C che sono disapprovate. [Priorità 2]

Il punto non è rispettato. Vedi esempio precedente.


Torna Su

12.3 Dividere grandi blocchi di informazione in gruppi più maneggevoli quando è naturale ed appropriato. [Priorità 2]

Tutti i contenuti sono raggruppati in tabelle senza header, ma questo più per scelta d'impaginazine che per scelta di uniformità o chiarezza. Sono presenti delle liste, ma non sono create correttamente, in quanto questa viene simulata tramite l'utilizzo di un punto.

codice HTML - pag. /index.asp - linea 420
&middot Trasporti (22/03/2005)</font></b> <font face="Verdana, Arial, Helvetica, sans-serif"><a href="/turismo/trasporti/arcnews/nw 220305 s7.htm " target="_blank"><font SIZE="-2"><b>Secondo bando regionale sulla sicurezza stradale</b></font></a></font>

La presentazione dei contenuti andrebbe rivista, magari utilizzando dei tag appropriati o perlomeno formattando e annidando le tabelle.


Torna Su

13.1 Identificare con chiarezza l'obiettivo di ogni collegamento. [Priorità 2]

I link sono tutti chiari,esplicativi. L'attibuto title non sembra necessario.


13.3 Fornire informazione sulla configurazione generale di un sito (per esempio, una mappa oppure un indice del sito). [Priorità 2]

E' presente una mappa del sito, ma è stata concepita in modo diverso dal menù. Questo può generare malinformazione o disorientamento da parte dell'utente. Mancano alcune etichette (come la voce "La regione") e il ragguppamento dei siti tematici non è come l'utente se lo aspetti.

13.4 Usare meccanismi di navigazione in modo coerente. [Priorità 2]

Il template del sito dovrebbe essere il seguente:
immagine del template stilizzato
ma in molti collegamenti non ne viene fatto utilizzo, come ad esempio nella pagina /news.asp. Il conenuto delle pagine simili dovrebbe essere uniformato al resto del sito.

 Valid XHTML 1.1! Valid CSS!