Verifica di conformità della Regione Basilicata

Relazione svolta da Marco Pavan nel periodo Febbraio-Marzo 2007

Progettazione siti e portali web

Corso di laurea di Tecnologie Web e Multimediali - Università di Udine

Valid XHTML 1.0 Transitional Valid CSS! Level Double-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0

Introduzione

La verifica di conformità del sito della regione Basilicata è stata fatta seguendo le linee guida WCAG 1.0 analizzando tutti e 3 i livelli di priorità. Queste 14 linee guida garantiscono che i contenuti siano sempre accessibili nonostante limitazioni che possono comprendere disabilità fisiche, sensoriali e dell'apprendimento, o causate dal lavoro e barriere tecnologiche. Sono suddivise in punti di controllo che sono assegnati ad un livello di priorità riferito all'impatto che tale punto potrebbe avere sull'accessibilità complessiva.

Priorità 1

Lo sviluppatore di contenuti Web deve conformarsi al presente punto di controllo. In caso contrario, a una o più categorie di utenti viene precluso l'accesso alle informazioni presenti nel documento. La conformità a questo punto di controllo costituisce un requisito base affinché alcune categorie di utenti siano in grado di utilizzare documenti Web.

Priorità 2

Lo sviluppatore di contenuti Web dovrebbe conformarsi a questo punto di controllo. In caso contrario per una o più categorie di utenti risulterà difficile accedere alle informazioni nel documento. La conformità a questo punto consente di rimuovere barriere significative per l'accesso a documenti Web.

Priorità 3

Lo sviluppatore di contenuti web può tenere in considerazione questo punto di controllo. In caso contrario, uno o più categorie di utenti sarà in qualche modo ostacolato nell'accedere alle informazioni presenti nel documento. La conformità a questo punto migliora l'accesso ai documenti web.

Ogni pagina avrà un livello di conformità che viene definito nel seguente modo:
Livello di conformità "A": conforme a tutti i punti di controllo di priorità 1.
Livello di conformità "AA": conforme a tutti i punti di controllo di priorità 1 e 2.
Livello di conformità "AAA": conforme a tutti i punti di controllo di priorità 1, 2 e 3.

Indice

  1. Introduzione
  2. Linea guida 1. Fornire alternative equivalenti al contenuto audio e visivo
  3. Linea guida 2. Non fare affidamento sul solo colore
  4. Linea guida 3. Usare marcatori e fogli di stile e farlo in modo appropriato
  5. Linea guida 4. Chiarire l'uso di linguaggi naturali
  6. Linea guida 5. Creare tabelle che si trasformino in maniera elegante
  7. Linea guida 6. Assicurarsi che le pagine che danno spazio a nuove tecnologie si trasformino in maniera elegante
  8. Linea guida 7. Assicurarsi che l'utente possa tenere sotto controllo i cambiamenti di contenuto nel corso del tempo
  9. Linea guida 8. Assicurare l'accessibilità diretta delle interfacce utente incorporate
  10. Linea guida 9. Progettare per garantire l'indipendenza da dispositivo
  11. Linea guida 10. Usare soluzioni provvisorie
  12. Linea guida 11. Usare le tecnologie e le raccomandazioni del W3C
  13. Linea guida 12. Fornire informazione per la contestualizzazione e l'orientamento
  14. Linea guida 13. Fornire chiari meccanismi di navigazione
  15. Linea guida 14. Assicurarsi che i documenti siano chiari e semplici
  16. Conclusione

Linea guida 1. Fornire alternative equivalenti al contenuto audio e visivo

Punto di controllo 1.1 [PRIORITÀ 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.

Nella pagina http://www.basilicatanet.it/informazioni/csb/csb.htm
Sono presenti immagini a cui manca l'equivalente testuale, infatti le foto a sinistra e il logo della regione Basilicata in altro a destra, che è inoltre un link alla homepage, non hanno una descrizione alternativa.

esempio di immagine senza attributo alt

In questa porzione di codice si può notare come alle immagini manca l'attributo ALT. Il problema si può quindi risolvere semplicemente aggiungendolo.

<table width="760" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="img/home/1.gif" width="395" height="337" border="0"></td>
<td><img src="img/home/2.gif" width="365" height="337" border="0" usemap="#Map2"></td>
</tr>
<tr>
<td><img src="img/home/3.jpg" width="395" height="83"></td>
<td><img src="img/home/4.gif" width="365" height="83" border="0" usemap="#Map"></td>
</tr>
</table>

Per quanto riguarda gli altri punti di controllo della linea guida 1 non ci sono problemi in quanto sono sempre presenti ridondanti collegamenti di testo per ogni zona attiva di un'immagine, e non è presente alcun filmato o presentazione multimediale.

Linea guida 2. Non fare affidamento sul solo colore

Entrambi i punti di controllo rispettano la linea guida, infatti le informazioni non sono veicolate dal colore ma da semplici effetti grafici realizzati in CSS così da garantire l'accessibilità.
Le combinazioni fra i colori dello sfondo e del primo piano forniscono sufficiente contrasto in modo di essere visti anche con uno schermo in bianco e nero o da una persona con deficit percettivi.

Linea guida 3. Usare marcatori e fogli di stile e farlo in modo appropriato

Punto di controllo 3.1 [PRIORITÀ 2]

Quando esiste un linguaggio di marcatori adatto, per veicolare informazione usare un marcatore piuttosto che le immagini.

Nelle pagine http://www.basilicatanet.it/ e http://www.consiglio.basilicata.it/
Sono presenti delle foto che fanno da titolo alla pagina e quindi che rappresentano del testo. Questo è un uso scorretto delle immagini in quanto era più opportuno usare dei TAG e degli stili.

esempio di immagine usata al posto di un titolo

esempio di immagine usata al posto di un titolo

Una soluzione a questo problema può essere l'inserimento di TAG <div> o <h1...6> controllati dal foglio di stile così da garantire anche ad un browser non grafico di identificare l'intestazione.

Punto di controllo 3.2 [PRIORITÀ 2]

Creare documenti che facciano riferimento a grammatiche formali pubblicate.

Nella pagina http://www.basilicatanet.it/
Nel codice di molte pagine è assente l'intestazione che dichiari il DTD utilizzato. Questo problema può essere risolto anteponendo in ogni pagina questa porzione di codice.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> ...

Punto di controllo 3.3 [PRIORITÀ 2]

Usare fogli di stile per controllare l'impaginazione e la presentazione.

Nella pagina http://www.basilicatanet.it/
Spesso vengono usati attributi che modificano lo stile dei font, dei bordi o dello sfondo direttamente nel codice html, quando invece sarebbe consigliato definire queste proprietà nel foglio di stile.

Questo codice mostra un esempio.

<table width="100%" style="COLOR: #000000; PADDING-BOTTOM: 0px; BACKGROUND:#FFFFFF" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="1"></td>
</tr>
</table>

Punto di controllo 3.4 [PRIORITÀ 2]

Usare unità relative e non assolute nei valori degli attributi del linguaggio dei marcatori e i valori della proprietà del foglio di stile.

Nella pagina http://www.basilicatanet.it/
I valori degli attributi usati sono molto spesso espressi in pixel, quindi non vengono usate unità relative, come si può notare dal frammento di codice messo qui di seguito come esempio.

<td valign='top' width='260px' align='right' style='PADDING-RIGHT: 13px;>

Gli altri punti di controllo della linea guida 3 sono rispettati perché i testi non sono divisi in modo da necessitare TAG di tipo <h1...6> e non ci sono citazioni quindi non sono presenti neanche TAG di tipo <q>, <blockquote>. Per quanto riguarda le liste invece, nelle pagine in cui vengono usate, sono specificate con i TAG appropriati: <ol>, <ul>, <dl>.

Linea guida 4. Chiarire l'uso di linguaggi naturali

Punto di controllo 4.1 [PRIORITÀ 1]

Identificare con chiarezza i cambiamenti nel linguaggio naturale del testo di un documento e in ogni equivalente testuale.

Nella pagina http://www.basilicatanet.it/cittele/isp.asp
E' presente una porzione di codice in cui non viene utilizzato l'attributo LANG per cambiare il linguaggio naturale di alcune parole, come si può notare dall'esempio seguente.

<td colspan=100 class='SxHome'>
<a href='/cittele/isp.asp' target=''>Internet Social Point</a>
</td>

Questo problema si può risolvere aggiungendo l'attributo lang come segue:

<td colspan=100 class='SxHome'>
<a href='/cittele/isp.asp' target=''><span lang="en">Internet Social Point</span></a>
</td>

Punto di controllo 4.2 [PRIORITÀ 3]

Specificare lo scioglimento di ogni abbreviazione o acronimo nel documento laddove compare per la prima volta.

Nella pagina http://www.basilicatanet.it/
Sono presenti degli acronimi che non vengono espressi anche nella loro forma intera.

esempio di acronimo non espresso nella sua forma intera

Possiamo risolverlo aggiungendo un'etichetta che si apre quando il mouse rimane per più di un secondo sopra all'acronimo.

Punto di controllo 4.3 [PRIORITÀ 3]

Identificare il linguaggio naturale principale di un documento.

Nella pagina http://www.basilicatanet.it/
In quasi tutte le pagine non viene indicato il linguaggio principale utilizzato.

Possiamo risolverlo aggiungendo l'intestazione a tutte le pagine includendo questa specifica.

Linea guida 5. Creare tabelle che si trasformino in maniera elegante

Punto di controllo 5.4 [PRIORITÀ 2]

Se per l'impaginazione viene usata una tabella non usare nessun marcatore di struttura per la formattazione della resa visiva.

Nella pagina http://www.basilicatanet.it/
Vengono usate tabelle per l'impaginazione e nel codice vengono inclusi anche attributi che riguardano la resa visiva, come si può notare da questa porzione di codice.

<table class='header' border='0' height='5px' cellspacing='0' cellpadding='0'>
<tr>
<td colspan='100'><img src='/display/images/home/testata2.jpg' width='767' height='100' border='0' alt='' usemap='#MapTestata' />
</td>
</tr>

La soluzione è quella di gestire tutta la parte grafica con il foglio di stile.

Tutti gli altri punti della linea guida 5 sono rispettati in quanto non sono presenti nel sito tabelle di dati.

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

Punto di controllo 6.1 [PRIORITÀ 1]

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.

Nella pagina http://www.basilicatanet.it/
In molte pagine vengono usati javascript. Disattivandoli le pagine risultano prive de alcune informazioni quindi non sono utilizzabili in quanto non è fornita una pagina accessibile alternativa.

Questo problema si può risolvere evitando l'uso di script oppure fornendo la pagina alternativa.

Gli altri punti di controllo della linea guida 6 sono soddisfatti perché le pagine sono leggibile anche senza foglio di stile e i contenuti dinamici vengono aggiornati.

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

Punto di controllo 7.3 [PRIORITÀ 2]

Fino a quando gli interpreti non permetteranno agli utenti di bloccare il contenuto in movimento, evitare il movimento nelle pagine.

Nella pagina http://www.basilicatanet.it/
E' presente un gruppo di informazioni che scorrono dal basso verso l'alto definite tramite javascript e TAG "marquee", che è un elemento non conforme alle specifiche HTML del W3C, pertanto non dovrebbe essere usato.

La soluzione potrebbe essere l'inserimento nel codice javascript di un meccanismo per bloccare il movimento.

Gli altri punti di controllo della linea guida 7 sono rispettati perché non c'è sfarfallio, lampeggiamento, auto-aggiornamento o auto-reindirizzamento.

Linea guida 8. Assicurare l'accessibilità diretta delle interfacce utente incorporate

Gli script presenti nelle pagine sono accessibili con le tecnologie assistive tranne per la informazioni in movimento descritte precedentemente.

Linea guida 9. Progettare per garantire l'indipendenza da dispositivo

Tutti i punti di controllo sono conformi alle specifiche perchè vengono fornite immagini sensibili sul lato client, non ci sono elementi con la specifica interfaccia (es.: flash) e gli script non hanno gestori di evento dipendenti da dispositivo.
E' garantita la disposizione logica della pagina ma non vengono fornite scorciatoie da tastiera mediante l'attributo "accesskey".

Linea guida 10. Usare soluzioni provvisorie

Tutti i punti di controllo sono rispettati in quanto non ci sono collegamenti che aprono nuove finestre e non ci sono problemi di associazione fra etichette e controllo dei moduli.
Non sono presenti testi affiancati su tabelle, né textarea.

Linea guida 11. Usare le tecnologie e le raccomandazioni del W3C

Il sito non fa uso di TAG non conformi alle specifiche, come ad esempio FONT e usa le tecnologie W3C.
Le informazioni sono adattabili all'utente, infatti il log-in permette di avere notizie e servizi in più, quindi rispetta tutti i punti di controllo.

Linea guida 12. Fornire informazione per la contestualizzazione e l'orientamento

Tutti i punti di controllo sono rispettati, infatti le informazioni sono raggruppate in modo da renderle più maneggevoli.
Non si usa il TAG "label" perchè il form per effettuare il login è stato fatto in javascript.

Linea guida 13. Fornire chiari meccanismi di navigazione

Punto di controllo 13.1 [PRIORITÀ 2]

Identificare con chiarezza l'obiettivo di ogni collegamento.

Nella pagina http://www.basilicatanet.it/
Sono presenti dei link che non sono abbastanza significativi, come ad esempio i collegamenti "altre categorie" e "altri avvisi" che non specificano in modo chiaro l'obiettivo.

Questo si può risolvere modificando il testo in modo da rendere subito chiara la destinazine di quel link.

Punto di controllo 13.3 [PRIORITÀ 2]

Fornire informazione sulla configurazione generale di un sito.

Nella pagina http://www.basilicatanet.it/
Non è presente né una mappa del sito né un indice

Una soluzione è implementare una mappa nel sito.

Punto di controllo 13.7 [PRIORITÀ 3]

Se sono fornite funzionalità di ricerca, rendere possibili diversi tipi di ricerca per differenti livelli di abilità e per preferenze diverse.

Nella pagina http://www.basilicatanet.it/eventi/ricercaeventi.asp?idev=4&ev=Fiere
Viene fornita una funzionalità di ricerca unica per raggiungere l'obiettivo.

La soluzione è rendere accessibile il modulo di ricerca a persone che hanno per esempio disabilita di linguaggio mediante l'uso di spell checker, offer "best guess" alternatives, query-by-example searches oppure similarity searches.

Tutti gli altri punti di controllo sono soddisfatti. I meccanismi di navigazione sono usati in modo coerente e viene fornita una barra di navigazione. I collegamenti correlati sono inoltre raggruppati in modo da identificare i gruppi.

Linea guida 14. Assicurarsi che i documenti siano chiari e semplici

Tutti i punti di controllo sono rispettati, infatti il sito contiene linguaggio chiaro e semplice, integra presentazioni grafiche per facilitare la comprensione delle pagine e ha uno stile di presentazione coerente tra tutte le pagine.

Conclusione

Dopo la verifica di conformità possiamo concludere che il sito, anche se apparentemente ben strutturato, presenta dei difetti. In particolare si verificano 3 problemi di priorità 1 che non consentono lëassegnamento di nessun livello di conformità al sito.
Anche se i progettisti hanno prestato attenzione ad inserire l'equivalente testuale alle immagini, non è presente in tutte. Inoltre non è identificato con chiarezza il cambiamento di linguaggio naturale, né viene fornita informazione alternativa quando gli script sono disattivati.
Pertanto non risulta nemmeno di livello "A".