Conformità WCAG della regione Sardegna

Analisi mediante WebXACT

Presentazione

WebXACT è un servizio/strumento gratuito online che permette di testare singole pagine web per valutarne la qualità, il livello di accessibilità e di segretezza. Per la valutazione è stata utilizzata l'interfaccia avanzata di tale strumento nella quale è possibile scegliere quali linee guida utilizzare (W3C WCAG A/AA/AAA o Section 508) e altre opzione aggiuntive. Tale interfaccia è raggiungibile al seguente indirizzo: http://webxact.watchfire.com/ScanForm.aspx. Le linee guida di accessibilità utilizzate sono state le W3C WCAG - AA compliance.

Le pagine del sito valutate sono state le seguenti:

Di seguito verranno riassunti gli errori riscontrati mediante l'utilizzo di WebXACT. Per ogni tipologia di errore verrà presentata anche una possibile soluzione. Gli errori presentati sono solo quelli ritenuti importanti dal valutatore; infatti il sistema WebXACT può rilevare anche dei falsi positivi, ovvero possibili errori (chiamati warning) che necessitano dell'analisi dell'utente. Di tali errori verranno evidenziati solamente quelli che consistono in reali barriere all'accessibilità della pagina.

Torna all'inizio della pagina


Priorità 1 - Introduzione

Di seguito vengono elencate alcune tecniche utilizzate per la gestione di alcuni errori/warning rilevati da WebXACT. Gli errori sono stati ordinati mediante le linee guida interessate:

stato di attenzione Linea Guida 1.1 (testo alternativo): questo warning è stato evidenziato per tutte le pagine esaminate. Questo tipo di problema ha comportato l'analisi dei valori degli attributi ALT e TITLE degli elementi IMG all'interno delle pagine. Nei documenti le immagini incontrate si possono distinguere in due categorie:

  • immagini-testo: ovvero immagini raffiguranti del testo; in questo caso gli attributi ALT e TITLE riportano il testo rappresentato;
  • immagini semplici: sono le immagini in senso classico; in questo caso il testo all'interno degli attributi ALT e TITLE potrebbe essere più descrittivo, anche se le immagini non hanno grossa rilevanza.

stato ok Linea Guida 2.1 (uso del colore): per questo tipo di problema, non testabile direttamente mediante WebXACT, è stata utilizzata una funzionalità della Web Accessibility Toolbar di Internet Explorer: Colori - Scala di grigi. Utilizzando tale feature si nota che i colori non creano barriere per la rappresentazione delle informazioni.

stato di errore Linea Guida 4.1 (cambiamenti nel linguaggio naturale): all'interno delle pagine i cambiamenti del linguaggio non vengono evidenziati correttamente. Per esempio nel menu di navigazione sotto il logo iniziale, il termine HOME non è codificato correttamente. La soluzione è quella di racchiudere il termine in questione all'interno del tag SPAN con l'attributo XML:LANG impostato con un valore EN (inglese) come nell'esempio seguente:

<span xml:lang=”en”>HOME</span>.

Torna all'inizio della pagina


Priorità 1 - Analisi delle pagine

Pagina 1 (warning: 9)
Pagina 2 (warning: 9)

Pagina 3 (warning: 9)

stato ok Linea Guida 1.1 (testo alternativo): in questa pagina il testo delle immagini dei paesaggi potrebbe essere più descrittivo, anche se la descrizione dell'immagine viene visualizzata a fianco dell'immagine stessa quando questa viene selezionata.

stato ok Linea Guida 6.3 (utilizzo di Javascript): in questa pagina la selezione delle immagini è in parte gestita da Javascript. Questo però non comporta nessun problema di accessibilità disabilitando il supporto Javascript del browser, poiché cliccando sulle miniature delle immagini viene attivato il collegamento ipertestuale che punta ad una nuova pagina che imposta come immagine “ingrandita”, quella selezionata in precedenza. (linea guida testata mediante Internet Explorer).

Pagina 4 (warning: 9)
Pagina 5 (warning: 9)
Pagina 6 (warning: 9)
Pagina 7 (warning: 9)
Pagina 8 (warning: 9)
Pagina 9 (warning: 9)
Pagina 10 (warning: 9)

Pagina 11 (warning: 9)

stato ok Linea Guida 6.3 (utilizzo di Javascript): in questa pagina per espandere le varie sezioni nelle rispettive sottosezioni, viene utilizzato un Javascript. Tale script espande le categorie lasciando inalterato l'URL. Disabilitando il supporto Javascript, la funzionalità persiste, grazie all'associazione di collegamenti ipertestuali ai pulsanti/immagine adibiti all'espansione delle categorie, che comportano l'apertura di una nuova pagina, in cui la sezione selezionata in precedenza, presenta le varie sottocategorie (se presenti). In questo caso l'URL della pagina cambia di volta in volta. Una seconda differenza riscontrata è che, utilizzando Javascript, le categorie espanse in precedenza non vengono compresse all'apertura di altre sezioni; al contrario disabilitando il supporto, la categoria espansa può essere al più una, caratteristica dettata dal fatto che viene aperto un nuovo URL per ogni sezione. Un'ulteriore differenza sta nel tempo di risposta: il Javascript è più veloce.

Torna all'inizio della pagina


Priorità 1 - Conclusioni parziali di livello A

L'unico errore vero e proprio riscontrato nelle pagine esaminate è stato il conflitto con la linea guida 4.1, che richiede di identificare con chiarezza i cambiamenti nel linguaggio naturale del testo di un documento: per esempio, in HTML usand l'attributo "lang" e in XML, usando "xml:lang". Si nota comunque che all'inizio del codice di ogni pagina, successivamente alla dichiarazione di una DTD formale, l'elemento radice HTML ha come attributo la lingua del documento usando XML:LANG=”IT”.

Un'altro errore minore è quello di utilizzare delle immagini-testo come titoli per i documenti. Da notare comunque che l'attributo ALT di tali oggetti contiene il testo rappresentato.

Torna all'inizio della pagina


Priorità 2 - Introduzione

stato di errore Linea Guida 2.2 (contrasto dei colori): per verificare tale barriera all'accessibilità, è stata utilizzata una feature della Web Accessibility Toolbar di Internet Explorer: Colori - Analisi del contrasto, e Colori - Colori utilizzati. Grazie a questa funzione è possibile analizzare il contrasto luminoso tra due colori. Un gran numero di pagine utilizza titoli in colore giallo (#E09603 - colore #E09603) su sfondo bianco (#FFFFFF - colore #FFFFFF). Il contrasto tra questi due colori non è sufficiente per una facile lettura. Mediante la funzionalità della Web Accessibility Toolbar di Internet Explorer si ottiene una differenza in luminosità pari a 99 (il minimo valore accettabile è 125) e una differenza in colore pari a 388 (il minimo valore accettabile è 500).

Per le pagine che incorrono in tale barriera, verrà segnalata solamente la linea guida, con un collegamento a questa discussione.

stato ok Linea Guida 3.2 (uso di grammatiche formali/DTD): tutte le pagine del sito analizzate contengono la definizione di una DTD relativa a XHTML 1.1.

stato di errore Linea Guida 3.5 (utilizzo degli header): all'interno di tutte le pagine esaminate gli elementi di intestazione vengono usati non in modo corretto: non vengono inseriti nell'ordine giusto (da H1 a H6) ed inoltre non vengono sempre utilizzati per codificare le intestazioni presenti all'interno delle pagine.

stato ok Linea Guida 13.4 (struttura di navigazione): questa linea guida è soddisfatta da tutte le pagine del sito esaminate. La navigazione è supportata dai seguenti supporti di navigazione interni alle pagine:

  • barra di navigazione generale, posizionata sotto il logo iniziale;
  • barre di navigazione tematiche, posizionate a destra e a sinistra del corpo di testo centrale;
  • collegamento alla mappa del sito, posizionato alla fine dell pagina.

Le due immagini seguenti raffigurano la struttura di navigazione del sito in questione:

immagine: barre di navigazione generale del sito

immagine: mappa del sito

stato di errore Linea Guida 13.1 (chiarezza dei link): il termine “mappa” posto nel footer delle pagine associato al link che punta alla pagina relativa alla mappa del sito dovrebbe essere più esplicativo, poiché non è chiaro se il link si riferisce alla mappa del sito o alla mappa della sardegna (cartina geografica).

Torna all'inizio della pagina


Priorità 2 - Analisi delle pagine

Pagina 1 (warning: 16)

stato di errore Linea Guida 2.2 (contrasto colore): si rimanda il lettore alla discussione fatta in precedenza.

stato di errore Linea Guida 10.1 (apertura nuove finestre): in questa pagina i link posti sotto il titolo “siti tematici”, comportano l'apertura dell'URL in una nuova finestra attiva, senza che l'utente sia avvisato. Una soluzione potrebbe essere quella di utilizzare il tag TITLE dell'elemento A per avvisare l'utente che il link aprirà una nuova finestra, oppure modificare il testo dei collegamenti o del titolo aggiungendo per esempio il termine “sito esterno”.

Pagina 2 (warning: 14)
Pagina 3 (warning: 13)

Pagina 4 (warning: 14)

stato di errore Linea Guida 2.2 (contrasto colore): si rimanda il lettore alla discussione fatta in precedenza.

Pagina 5 (warning: 14)

stato di errore Linea Guida 10.1 (apertura nuove finestre): in questa pagina, tutti i link posti a sinistra del blocco centrale, comportano l'apertura dell'URL in una nuova finestra attiva, senza che l'utente sia avvisato. Per la soluzione si rimanda il lettore alla trattazione del problema per la pagina 1.

Pagina 6 (warning: 14)

stato di errore Linea Guida 10.1 (apertura nuove finestre): in questa pagina, tutti i link posti a sinistra del blocco centrale, comportano l'apertura dell'URL in una nuova finestra attiva, senza che l'utente sia avvisato. Per la soluzione si rimanda il lettore alla trattazione del problema per la pagina 1.

Pagina 7 (warning: 14)
Pagina 8 (warning: 13)
Pagina 9 (warning: 14)
Pagina 10 (warning: 14)

Pagina 11 (warning: 14)

stato di errore Linea Guida 2.2 (contrasto colore): si rimanda il lettore alla discussione fatta in precedenza.

stato di errore Linea Guida 13.1 (chiarezza dei link): in questa pagina sono presenti due etichette di sottosezione con lo stesso nome ("Comunicati stampa") ma con URL associato differente. Dal contesto della pagina sono facilmente distinguibili, poichè una appartiene alla sezione "Giunta", mentre la seconda appartiene all'ambito "Ufficio Stampa". Questo può comportare comunque ad inconsistenze. Il codice in questione è il seguente:

...
(relativo alla sezione "Giunta")
<a href="/j/v/44?s=1&v=9&c=1410&na=1&n=10">Comunicati stampa</a>
...
(relativo alla sezione "Ufficio Stampa")
<a href="/j/v/21?s=1&c=1410&c1=1408&v=9&na=1&n=10">Comunicati stampa </a>
...

Una possibile soluzione, è l'aggiunta di un attributo di tipo TITLE all'elemento HTML <A>, per discriminare in modo univoco le etichette. Altrimenti si può agire direttamente sulle etichette, aggiungendo alla fine di queste l'ambito della sottosezione:

...
(relativo alla sezione "Giunta")
<a href="/j/v/44?s=1&v=9&c=1410&na=1&n=10">Comunicati stampa GIUNTA</a>
...
(relativo alla sezione "Ufficio Stampa")
<a href="/j/v/21?s=1&c=1410&c1=1408&v=9&na=1&n=10">Comunicati stampa UFFICIO STAMPA</a>
...

Tale barriera è stata evidenziata dall'utilizzo dello strumento Bobby, ovvero la versione precedente di WebXACT.

Torna all'inizio della pagina


Priorità 2 - Conclusioni parziali di livello AA

L'errore di priorità 2 più grave, è l'utilizzo errato degli elementi di intestazione (linea guida 3.5). Tali elementi, se usati in maniera corretta, portano ad una rappresentazione lineare e coerente per la visualizzazione in browser non grafici (quali Lynx) e vengono elaborati in modo migliore dai browser di tipo vocale (quali Home Page Reader o JAWS).

La seconda barriera infrante è quella relativa alla linea guida 2.2, la quale richiede di 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. Ci si riferisce ai titoli in colore giallo su sfondo bianco, per i quali il contrasto luminoso non è sufficiente per una facile lettura. Per fortuna tali titoli non sono molti e frequenti all'interno delle pagine.

Il terzo errore è relativo ai casi di ononimia relativi alla linea guida 13.1, la quale richiede che un collegamento testuale dovrebbe essere abbastanza significativo da mantenere un senso se letto fuori dal contesto - sia da solo che come parte di una sequenza di collegamenti. Caso ecclatante il link alla mappa del sito, che può essere confuso con il link alla mappa geografica della regione sardegna.

Un ultimo errore riguarda la presenza di link che cambiano la finestra attiva senza informare l'utente (linea guida 10.1).

Torna all'inizio della pagina

 

capitolo precedente | inizio | capitolo successivo

Logo Università di Udine Marco Sambo - Università di Udine, Laurea in Informatica (Vecchio Ordinamento)