Valutazione di Conformità alle WCAG 1.0

Valutazione della conformità
Linea Guida 1

Fornire alternative equivalenti al contenuto audio e visivo.



1.1 All'interno del sito sono presenti parecchie immagini senza alternativa testuale (attributi ALT o LONGDESC) tra le più rilevanti il banner superiore della pagina con il logo della regione:

Logo principale del sito Regione Marche
<IMG height=70 src="http://www.regione.marche.it/template/1/browse/Tradizionale/imgs/upbar_titolone.jpg" width=440>



Un'altra mancanza viene aggirata in modo non ortodosso sostituendo l'alternativa testuale delle immagini con un elemento <p></p> tabulato usando una tabella in modo da rendere l'associazione immagine-descrizione solo graficamente.

Dati centralino Regione Marche
<TR><TD width=106><IMG height=30 src="images/numCentralinoRegione.gif" width=106></TD><TD>
<P><FONT face="Arial, Helvetica, sans-serif" color=#ffffff size=2><STRONG>Regione Marche</STRONG> -Via Gentile da Fabriano 9 </FONT><FONT face="Arial, Helvetica, sans-serif" color=#ffffff size=2>- 60125 Ancona- <STRONG>Centralino: 0718061</STRONG></FONT></P></TD></TR>



Lungo tutta la parte sinistra delle pagine sono presenti i link a tutte le sezioni del sito. La divisione per argomento viene fatta titolando le varie categorie di link; i titoli però non sono testuali ma sono delle immagini che non hanno una descrizione alternativa impedendo quindi ad un utente che usa tecnologie assistive o che usa browsers testuali di distinguere le categorie. Il problema è presente su tutto il sito, in quanto tutti i titoli di sezione/categoria sono fatti allo stesso modo.

Esempio di immagine usata come titolo
<td colspan="2"> <font color="#FFFFFF"><img src="template/1/browse/Tradizionale/imgs/sxmenu_title_ServiziOnLine.gif"
width="160" height="20"></font></td>



Un problema simile, ma forse più grave, lo si riscontra nella sezione centrale della homepage dov'è presente una sezione "pubblicazioni recenti" nella quale sono riportati i titoli di alcune delle ultime pubblicazioni; per leggerne di altre è presente un'immagine senza alternativa testuale che funge da link.

Esempio di immagine sensibile senza alt
<a href='home.asp?cerca=si&categoria=&order=per_data_batch'><img src='http://www.regione.marche.it/images/puls_altre.gif' vspace=5 hspace=5 border='0'></a>



Analogamente il pulsante d'invio della richiesta della ricerca è un'immagine senza descrizione.

Altro esempio di immagine sensibile senza alt



torna su

Linea Guida 2

Non fare affidamento sul solo colore.



2.1 Il sito è navigabile e rimane comprensibile anche senza colori. Un'irregolarità però è data dal fatto che la variazione di colore di alcuni componenti non avviene utilizzando i fogli si stile ma inserendo i valori direttamente nel tag html interessato.



2.2 Per quanto riguarda l'utilizzo del colore in se, solo alcuni particolari non rispettano un adeguato contrasto colore sfondo. A esempio un'immagine utilizzata nel menù di sinistra (riproposto nell'intero sito) utilizza due tonalità di blu abbastanza vicine fra loro per il testo e lo sfondo .

Esempio di immagine a basso contrasto colore-sfondo



Anche la scelta del colore del mouse-hover sul menù all'inizio della pagina non offre un contrasto elevato con lo sfondo.

Esempio di cattiva scelta di colori
.linkbianco A:hover {COLOR: #7FCE61; TEXT-DECORATION: underline;}



torna su

Linea Guida 3

Usare marcatori e fogli di stile e farlo in modo appropriato.



3.1 Come osservato nel punto 1.1 sono presenti in più parti all'interno del sito immagini che rappresentano del testo; solitamente ogni titolo di sezione o categoria (che vuol esser rappresentato con uno stile diverso) invece di far uso dei corretti marcatori o dei fogli di stile viene sostituito da un'immagine (priva di ALT).



3.2 Non vi è alcun riferimento a nessun DTD.



3.3 L'impaginazione della pagina non è controllata attraverso i fogli di stile ma dall'uso di alcune tabelle. Sebbene sia presente un css esterno, questo viene usato più che altro per modificare il comportamento (colore) dei link (visited, hover,...) e le proprietà di alcune porzioni di testo (tipo di carttere, colore, dimensione), sono presenti nel codice HTML i tag <font> e alcuni attributi per modificare l'aspetto delle tabelle o di altre parti della pagina.

<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="760" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td><TABLE cellSpacing=0 cellPadding=0 width=760 border=0> <TR bgColor=#026ea8> <TD><FONT color=#ffffff>Martedì 10 Maggio</FONT></TD>

[..]

<TD align=middle><INPUT class=Ricerca name=testo> </TD>
<TD align=right width=22><INPUT type=image height=16 hspace=0 width=22 src="http://www.regione.marche.it/te

[..]



3.4 Nei fogli di stile le uniche unità di misura presenti riguardano la dimensioni dei caratteri che comunque sono unità di misura assolute ("px"). Per quanto riguarda altre proprietà, come la dimensione delle tabelle o di alcune celle, queste sono inserite direttamente nel codice HTML con unità di misura assolute.

<table width="760" [...] >
<TD width=160><IMG height=70 src="http://www.re [...] >
<TD align=right width=22><INPUT type=image height=16 hspace=0 width=22 src="http://www.re [...] >



3.5 Nella pagina "http://www.regione.marche.it/viewdoc.asp?CO_ID=249&amp;tree=42" che è relativa alla sezione 'Legislazione' nella quale è riportato lo statuto della regione vengono utilizzati i tag H1 e H2 solamente per la loro resa grafica e non per stabilire delle relazioni concettuali fra le varie sezioni e sottosezioni del documento.



torna su

Linea Guida 4

Chiarire l'uso di linguaggi naturali.



4.1 Non viene specificato attraverso l'attributo "lang" la lingua principale del documento. Andrebbe specificato nel tag <html lang="it">, ma d'altra parte termini inglesi come "E-government" non vengono distinti dal resto, cosa che invece andrebbe fatta specificando la lingua appropriata.



torna su

Linea Guida 5

Creare tabelle che si trasformino in maniera elegante.



5.3 L'impaginazione dell'intero sito viene fatta utilizzando delle tabelle. L'organizzazione delle tabelle prevede un'unica grande tabella al cui interno vi sono altre tabelle in modo da dividere la pagina in quattro grandi regioni a loro volta suddivise in tabelle : una superiore (con il log della regione ed i link principali) e tre regioni disposte verticali e parallele lungo il resto della pagina; la regione a sinistra contiene i link a tutte le sezioni del sito, quella al centro le news e le notizie in primo piano e quella a destra link secondari alle sezioni comunity e multimedia. Con questa struttura una lettura linearizzata della tabella comporta l'impossibilità di capirne struttura e contenuti.

Schema della struttura delle tabelle che compongono l'homepage



torna su

Linea Guida 6

Assicurarsi che le pagine che danno spazio a nuove tecnologie si trasformino in maniera elegante.



6.1 Disabilitando il foglio di stile la pagina risulta navigabile correttamente anche perché l'impaginazione attraverso le tabelle permette al sito di mantenere la propria struttura; inoltre il css è utilizzato solamente per apportare delle piccole modifiche grafiche riguardo colore o dimensione di caratteri e molti attributi sono modificati direttamente nei tag html, non sul css nè all'interno dell'apposito tag <style>.



6.3 Tutte le sezioni dell'area tematica offrono un form costituito da alcuni <select> che permettono di selezionare le voci preferite nelle diverse sezioni. L'invio della richiesta avviene attraverso l'evento "onChange" che richiama uno script che invia la scelta. Disabilitando i javascript oppure se essi non sono supportati dal browser che si utilizza tale form risulta inutilizzabile.

Form composto da select presente in alcune sezioni del sito



6.3b Inoltre è presente un link "Live" a fondo pagina che apre una nuova finestra nella quale viene riprodotto un filmato "wmv". L'apertura della pagina però avviene attraverso javascript e quindi se non si può usufruire dei javascript la pagina risulta impossibile da aprire.

Esempio di link attivabile solo con click del mouse



torna su

Linea Guida 7

Assicurarsi che l'utente possa tenere sotto controllo i cambiamenti di contenuto nel corso del tempo.



7.3 Accanto al logo della regione nella parte superiore della pagina è presente un oggetto "swf" che mostra delle immagini/link a diverse sezioni. Questo oggetto è un oggetto dinamico in quanto muta nel tempo (mutando quindi il link destinazione). Sebbene il suo aggiornamento è molto lento (alcuni minuti prima di modificarsi) non ha la possibilità di essere arrestato.

Oggetto swf presente nel sito



torna su

Linea Guida 8

Assicurare l'accessibilità diretta delle interfacce utente incorporate.



8.1 L'oggetto "swf" descritto al punto 7.3 è inserito utilizzando il tag html <object> solamente che non sono state previste alternative testuali e quindi per utenti che utilizzano browser che non supportano flash oppure utenti di tecnologie assistive non sono in grado di usufruire delle ulteriori informazioni/link offerti dall'oggetto "swf".



torna su

Linea Guida 9

Progettare per garantire l'indipendenza da dispositivo.



9.2 l'oggetto "swf" di cui al punto 7.3 e 8.1 è utilizzabile solamente da utenti in grado (per abilità o strumenti in possesso) di utilizzare un mouse.



9.3 Il link descritto al punto 6.3b è attivabile solo se lo si clicca con il mouse e non da tastiera in quanto il link è legato all'evento onmouseup.

<A onmouseup="window.open('http://my.marche.it/rendering.asp?keyvideo=' + 720,'_blank','toolbar=no,resizable=yes')" href="javascript:void(0)" class='titoloBig'>Live</a>



torna su

Linea Guida 10

Usare soluzioni provvisorie.



10.1 All'interno dell'intero sito, anche nella modalità esclusivamente testuale, sono presenti molti link (a siti esterni oppure no) che aprono nuove finestre senza avvertire l'utente, che dunque si trova inaspettatamente a navigare su una nuova finestra.



10.2 Non vi è un'associazione mediante tag <label> ai controlli nei form presenti nel sito, tuttavia il layout consente di percepire l'associazione tra descrizione e controllo di riferimento.



10.4 Nel controllo legato alla "ricerca nel sito" non è stato inserito un carattere di default per permettere ad alcune tecnologie assistive di soffermarsi in attesa dell'input utente. Tra l'altro il codice html relativo a tal controllo lascia molto a desiderare (come nell'intero sito d'altra parte) in quanto manca l'attributo type del tag <input>.

<INPUT class=Ricerca name=testo>



torna su

Linea Guida 11

Usare le tecnologie e le raccomandazioni del W3C.



11.2 Per quanto riguarda l'utilizzo delle tecnologie w3c nel sito esaminato, non vengono quasi mai rispettate. Per esempio nel codice html viene spesso utilizzato il tag <font> che non rappresenta certamente la soluzione corretta. E' consigliabile usare la proprietà font dei fogli di stile. Nelle tabelle non vengono rispettate le soluzioni del w3c ( tag TR che non vengono chiusi e ne vengono aperti 2 consecutivamente), definizione del colore di sfondo nel codice html invece che nel foglio di stile, utilizzo di tag non supportati (align, color).



11.4 Il sito presenta il link ";Modalità testuale" che fa supporre di presentare una versione alternativa accessibile ad utenti che per diversi motivi utilizzano tecnologie diasbilitanti. Questa però è solamente una pagina priva di immagini, script e colori, e neanche questa rispetta le tecnologia w3c e quindi la pagina alternativa non fornisce alcun vantaggio nell'utilizzo da parte degli utenti con qualche disabilità, se non il fatto di non avere immagini ed un layout lineare (in quasi tutte le sezioni del sito, ad eccezione ad esempio di http://www.regione.marche.it/moduli.asp?modulo=urlsiti).



torna su

Linea Guida 12

Fornire informazione per la contestualizzazione e l'orientamento.



12.3 Nella maggior parte dei casi le intestazioni vengono rese così:

<font size="2"><strong>Fiera...</strong></font>

che non è la soluzione più adatta, sarebbe più opportuno utilizzare i tag tipici per le intestazioni (H1,H2), oppure avvalersi dei fogli di stile .



12.4 Non viene mai associato un'opportuna etichetta, magari usando il tag <label>, a nessun controllo

<INPUT class=Ricerca name=testo>

Inoltre nel form della ricerca il pulsante di"submit" viene reso attraverso una immagine priva di qualsiasi alternativa testuale che faccia capire che lo scopo dell'immagine è quello di inoltrare la richiesta.



torna su

Linea Guida 13

Fornire chiari meccanismi di navigazione.



13.1 Per quanto riguarda i collegamenti ipertestuali, sia nella versione grafica, che in quella testuale, sono privi di qualsiasi informazione che permetta ad un utente di capire l'obiettivo di quel collegamento. La soluzione corretta è:

<a title="vai all'approfondimento sul tema ... " href="...">Approfondimento</a>



torna su

Linea Guida 14

Assicurarsi che i documenti siano chiari e semplici.



14.1 Il linguaggio utilizzato è chiaro e semplice, però per quanto riguarda eventuali acronimi (URP,BUR) non è stato utilizzato il tag acronym per l'utilizzo con eventuali lettori di schermo.



14.1 Lo stile utilizzato è abbastanza coerente tra le pagine, non c'è una particolare differenza fra le diverse pagine, il che permette un interazione veloce ed efficace.



torna su