Analisi della conformità WCAG AA del sito www.veniceairport.com

Autori: Federico Maio, Massimiliano Oggian

Analisi sistematica e rapporto di conformità delle pagine di un sito web rispetto alle linee guida WCAG 1.0 livello AA.

Data: Febbraio 2004

Tabella dei contenuti

  1. Sommario
    1. Priorità 1
    2. Priorità 2
  2. Descrizione dettagliata
    1. Priorità 1
    2. Priorità 2
  3. Conclusione

1. Sommario

Priorità 1

  1. Tutte le pagine non forniscono un equivalente testuale per ogni elemento non di testo (Punto di controllo 1.1).
  2. In alcune pagine non tutte le informazioni veicolate dal colore sono disponibili anche senza.(Punto di controllo 2.1)
  3. I cambiamenti nel linguaggio naturale del testo non sono identificati con chiarezza (Punto di controllo 4.1).
  4. Le pagine non sono organizzate in modo che possano essere lette anche senza l'ausilio di fogli di stile, oppure possono essere lette ma con evidenti difficoltà (Punto di controllo 6.1).
  5. Non ci sono equivalenti del contenuto dinamico che possono essere aggiornati quando il contenuto dinamico cambia (Punto di controllo 6.2).
  6. Per le tabelle di dati non identifica le intestazioni di riga o di colonna (Punto di controllo 5.1).
  7. Alcune pagine non sono utilizzabili quando gli script (in questo caso Flash) sono disabilitati oppure non supportati. Non viene nemmeno fornita informazione equivalente in una pagina alternativa (Punto di controllo 6.3).
  8. Non è disponibile una pagina accessibile alternativa che usi le tecnologie del W3C (Punto di controllo 11.4).

Priorità 2

  1. Le combinazioni tra colori dello sfondo e del primo piano non forniscono un sufficiente contrasto se visti da qualcuno con deficit alla vista (Punto di controllo 2.2).
  2. Non adotta un linguaggio di marcatori adatto anche se disponibile. Per esempio, usa le tabelle per il layout e per formattare il testo invece di usare i fogli di stile, usa delle immagini per rappresentare del testo (Punto di controllo 3.1).
  3. Le pagine non fanno riferimento a grammatiche formali pubblicate, cioè manca la dichiarazione sul tipo di documento che si sta producendo (per esempio a che DTD si riferisce)(Punto di controllo 3.2).
  4. Non usa in maniera propria i fogli di stile per controllare l'impaginazione e la presentazione. (Punto di controllo 3.3).
  5. Usa unità assolute nei valori degli attributi del linguaggio di markup e nei valori della proprietà del foglio di stile (Punto di controllo 3.4).
  6. Il contenuto dimamico non è accessibile e non vengono fornite pagine alternative (Punto di controllo 6.5).
  7. È presente del contenuto lampeggiante che potrebbe creare problemi a persone con disfunzioni alla vista. (Punto di controllo 7.2).
  8. Alcune pagine si autoaggiornano periodicamente (Punto di controllo 7.4).
  9. Utilizzando qualche determinato link si generano altre finestre senza nessun tipo di avvertimento per l'utente (Punto di controllo 10.1).
  10. Non usa le tecnologie previste dal W3C nonostante siano appropriate per i compiti previsti dal committente del sito (Punto di controllo 11.1).
  11. Usa caratteristiche disapprovate del W3C (Punto di controllo 11.2).
  12. Non tutti i collegamenti testuali identificano con chiarezza l'obiettivo che vogliono perseguire (Punto di controllo 13.1).
  13. Non fornisce metadata per aggiungere informazioni alle pagine (Punto di controllo 13.2).
  14. È provvisto di una mappa dei contenuti ma essa non descrive le caratteristiche di accessibilità disponibili (Punto di controllo 13.3).
  15. Usa le tabelle non linearizzate per l'impaginazione e non fornisce una alternativa equivalente (Punto di controllo 5.3).
  16. Non associa esplicitamente le etichette ai loro controlli (Punto di controllo 12.4).
  17. Tutte le pagine presentano uno script che crea del contenuto in movimento (Punto di controllo 7.3).
  18. Negli script i gestori di evento sono dipendenti dal dispositivo.

2. Descrizione dettagliata

Priorità 1

Problema 1: equivalente testuale per ogni elemento non di testo.

Riguarda tutte le pagine.

Soluzione: usare "alt" per gli elementi IMG e INPUT. Fornire un equivalente testuale nel contenuto degli elementi OBJECT. Se questa soluzione non soddisfa tutte le esigenze descrittive utilizzare "longdesc" con IMG. Per le mappe che si trovano in alcune pagine utilizzare l'attributo "alt" con AREA.

Problema 2: l'informazione veicolata dal colore non è sempre disponibile senza.

Pagina dei voli del giorno dopo aver selezionato lo scalo. La pagina presenta la lista dei voli disponibili in quel giorno. I voli charter sono però segnalati in arancione. Per chi non riesce a percepire bene i colori o per chi ha un monitor in bianco e nero non c'è possibilità di riconoscerli.

Soluzione:usare, oltre al colore, un'icona che rappresenti i voli charter con la dovuta legenda che ne spiega il significato.

Problema 3: i cambiamenti nel linguaggio naturali non sono identificati.

Riguarda tutte le pagine.

Soluzione: usare in HTML l'attributo "lang" (che può essere usato all'interno di qualsiasi elemento o, in mancanza di questo, all'interno dell'elemento "span") e in XML "xml:lang".

Problema 4: senza i fogli di stile le pagine si leggono con notevole difficoltà

Riguarda tutte le pagine.

Soluzione: usare pagine (o, come in questo caso, tabelle) organizzate in maniera più lineare per permettere agli utenti non dotati delle ultime tecnologie di usufruire in maniera semplice dei servizi proposti.

Problema 5: non ci sono equivalenti al contenuto dinamico quindi non possono nemmeno essere aggiornati.

Riguarda le pagine che contengono gli orari dei voli, i voli disponibili e le varie ricerche che si possono effettuare.

Soluzione: inserire nel contenuto dinamico degli equivalenti per esempio usando il tag OBJECT oppure per gli script il tag NOSCRIPT.

Problema 6: nelle tabelle di dati non identifica le intestazioni di riga e di colonna.

Le pagine che contengono i voli del giorno.

Soluzione: usare i tag TD per le celle di dati e TH per identificare le intestazioni.

Problema 7: le pagine fornite di script non sono utilizzabili se questi sono disabilitati oppure non supportati.

Quasi tutte le pagine.

Soluzione: se non è possibile rendere la pagina utilizzabile senza script, fornire un equivalente testuale utilizzando l'elemento NOSCRIPT, oppure fornire una pagina accessibile alternativa che riesca a soddisfare gli stessi scopi.

Problema 8: non è disponibile una pagina accessibile alternativa.

Tutto il sito.

Soluzione: creare una pagina accessibile alternativa per tutte quelle pagine che, dopo un'attenta analisi, risultano inaccessibili. Creare le pagine utilizzando tutte le tecnologie messe a disposizione dal W3C .

Priorità 2

Problema 1: non fornisce un sufficiente contrasto tra colore di sfondo e colore di primo piano.

Riguarda il menu di navigazione a sinistra di tutte le pagine.

Soluzione: cercare di usare due colori che non siano simili. In questo caso i due colori usati (azzurro e blu chiaro) sono entrambi colori freddi e rischiano di risultare offuscati e illeggibili. Si potrebbero usare dei colori con maggior contrasto tra loro, come potrebbero essere l'azzurro per lo sfondo ed il nero per il primo piano.

Problema 2: usa le tabelle per il layout e per formattare il testo, usa delle immagini per rappresentare del testo.

Riguarda tutto il sito.

Soluzione: usare i fogli di stile per formattare il testo e controllare l'impaginazione. Inoltre evitare l'uso di immagini per rappresentare un testo.

Problema 3: manca la dichiarazione sul tipo di documento che si sta producendo.

Riguarda ogni singola pagina.

Soluzione: includere, all'inizio di ogni documento, la dichiarazione sul tipo di documento che rimandi ad una DTD pubblicata (ad esempio il DTD di XHTML1.0 o di HTML4.0). Questo si può fare includendo all'inizio di ogni pagine una intestazione del tipo

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html 
	 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it"> 

Problema 4: non usa i fogli di stile per controllare l'impaginazione e la presentazione.

Riguarda ogni singola pagina

Soluzione: usare le proprietà dei fogli di stile per controllare la posizione di ogni elemento presente nella pagina e gli stili dei caratteri. Spostare tutto ciò che riguarda la presentazione del documento nei fogli di stile. Per esempio, eliminare dal codice HTML tutti quegli attributi che controllano la posizione del testo, il font e le dimensioni.

Problema 5: Usa unità assolute nei valori degli attributi del linguaggio di markup e nei valori della proprietà del foglio di stile.

Tutto il sito.

Soluzione: usare misure relative, ottimizzando così la visione a coloro che possiedono una finestra di piccole dimensioni oppure che ridimensionano la finestra a seconda delle loro esigenze. Usare l'attributo "em" (o misure percentuali) piuttosto che "pt" o "cm" per quanto riguarda la dimensione del carattere. Usare le misure percentuali per quanto riguarda il posizionamento degli oggetti nella finestra.

Problema 6: il contenuto dimamico risulta inaccessibile e non esiste una pagina alternativa dove si possa usufruire delle stesse informazioni.

Riguarda le pagine di consultazione degli orari dei voli.

Soluzione: fornire una pagina equivalente accessibile solo testuale che fornisca le stesse informazioni di quella originale. Fare questo utilizzando i meta data in modo da indirizzare i browser per i disabili direttamente verso le pagine accessibili oppure fornire un link alle pagine accessibili. Oltre a queste soluzioni si potrebbe anche implementare una presentazione audio che descriva la pagina dinamica che si presenta dopo le scelte dell'utente.

Problema 7: è presente del contenuto lampeggiante.

Riguarda tutte le pagine.

Soluzione: fornire un meccanismo (in questo caso all'interno di uno script) per permettere agli utenti di disabilitare il movimento. Usando i fogli di stile si può implementare qualche sistema per tenere sotto controllo i vari effetti. Per esempio nei fogli di stile si può provocare il lampeggiamento tramite l'attributo text-decoration: blink, che però può essere disabilitato dall'utente usando un foglio di stile personalizzato oppure annullando l'effetto di quelli del sito.

Problema 8: alcune pagine si autoaggiornano periodicamente.

Riguarda le pagine di consultazione dei voli.

Soluzione: Rimpiazzare la pagina che sarebbe ridirezionata con una pagina statica contenente un semplice linkalla nuova pagina. Non fare autoaggiornare le pagine con l'istruzione META http-equiv="refresh" content="60" perchè questo elemento è stato deprecato dal W3C.

Problema 9: generazione di altre finestre senza nessun tipo di avvertimento per l'utente.

Un paio di pagine presentano questo problema. Nella home page è presente uno script che apre una nuova finestra, nella pagina "Informazioni turistiche" e "News e Media" sono presenti dei link che ti portano in altri siti.

Soluzione: evitare di usare un frame la cui destinazione è una nuova finestra.

Problema 10: Non usa le tecnologie previste dal W3C.

Riguarda tutto il sito

Soluzione: in questo caso la soluzione è usare in modo appropriato le tecnologie consigliate dal W3C. Usare MathML per le equazioni matematiche, HTML, XHTML, XML per strutturare i documenti, SMIL per creare presentazioni multimediali, RDF per i meta dati, CSS e XSL per definire fogli di stile, XSLT per creare trasformazioni in diversi linguaggi, PNG per le foto.

Problema 11: Usa caratteristiche disapprovate del W3C.

Tutte le pagine.

Soluzione: non usare elementi disapprovati. Ad esempio l'elemento FONT in HTML. Consultare la lista degli elementi e degli attributi validi del linguaggio in cui si sviluppa il sito.

Problema 12: Non tutti i collegamenti testuali identificano con chiarezza l'obiettivo che si prefiggono.

La pagina "Infovoli/servizi" - "Sms"

Soluzione: il collegamento alla pagina "Sms" può trarre in inganno un utente che pensa di trovare al suo interno un servizio che permette di spedire Sms. Invece, al suo interno, si trova un servizio che permette di ricevere informazioni sul tuo volo tramite un messaggio sul cellulare. Per evitare tale incomprensione basterebbe fornire il link di un "TITLE" che descrive sommariamente il servizio oppure cambiare il nome del link in "Infovoli tramite sms".

Problema 13: non fornisce metadata per aggiungere informazioni alle pagine.

Tutte le pagine.

Soluzione: usare il tag META con le sue proprietà per aggiungere informazioni sull'autore, sul contenuto, sul tipo di documento e altre caratteristiche semantiche della pagina.

Problema 14: la mappa dei contenuti non descrive le caratteristiche di accessibilità disponibili.

La pagina "Mappa del sito".

Soluzione: dotare la mappa di una descrizione lineare delle caratteristiche di accessibilità fornite dal sito. Ad esempio, con quale browser vocale si può accedere, se può essere letta da browser testuali, se ci sono degli strumenti che aiutano la lettura del sito (pagine alternative accessibili).

Problema 15: usa tabelle non linearizzate per l'impaginazione e non fornisce una alternativa equivalente.

Tutte le pagine

Soluzione: usare i fogli di stile evitando di usare le tabelle. Se ciò non fosse possibile, usare delle tabelle che possono essere lette in maniera linearizzata oppure fornire il sito di pagine equivalenti accessibili.

Problema 16: non associa esplicitamente le etichette ai loro controlli.

Tutte le pagine.

Soluzione: nei FORM usare l'elemento LABEL con il suo attributo "FOR" per dare un nome ai controlli.

Problema 17: uno script crea del contenuto in movimento.

Tutte le pagine

Soluzione: fornire l'utente di uno strumento per bloccare il movimento oppure una pagine alternativa. Usare le stesse tecniche del Problema 5.

Problema 18: negli script i gestori di evento sono dipendenti dal dispositivo.

Riguarda tutte le pagine.

Soluzione: fornire gli script di gestori di evento logici che possano essere sfruttati attraverso la tastiera, l'input vocale, il mouse e tutti gli altri dispositivi di interazione. In questo caso ci sono degli eventi dipendenti dall'uso del mouse (i vari onclick presenti negli script) che potrebbero essere risolti tramite l'uso di onfocus per esempio.

Conclusione

Con questa analisi abbiamo potuto notare quanto sia complicato progettare un sito in grado di soddisfare le esigenze di ogni tipo di utente, in una sola parola un sito accessibile. Le caratteristiche delineate nelle linee guida del W3C sono difficili da correggere in un sito già costruito ma sono molto più semplici se vengono prese in considerazione durante la progettazione. Abbiamo visto quanti sono i problemi da affrontare ma ci sono delle valide tecniche consigliate per superare tutti gli ostacoli. Il sito che abbiamo analizzato presenta diversi problemi seri anche perchè ha utilizzato poco le specifiche del W3C. Purtroppo, dopo questa accurata analisi, non possiamo definire questo sito come un sito accessibile. Questo lo diciamo a malincuore vista l'utilità e la rilevanza del tipo di servizio offerto dal sito. Purtroppo in queste condizioni nessuna persona disabile o con un certo tipo di deficit riuscirebbe, senza bisogno di un aiuto esterno, a consultare l'orario dei voli, a informarsi sulle compagnie aeree presenti, a leggere notizie, ad avere informazioni turistiche e a capire quali mezzi di trasporto siano disponibili per raggiungere l'aereoporto.