Analisi di conformità alle linee guida WCAG 1.0 livello AA
del sito web ufficiale della Regione Friuli-Venezia Giulia

 

analisi eseguita nel mese di aprile 2004 a scopo didattico.

 

Indice degli argomenti

• Svolgimento dell'analisi
• Problemi riscontrati e soluzioni proposte
• Conclusioni

 

Svolgimento dell'analisi

L'analisi comincia dalla home page, in quanto pagina più visitata del sito. La pagina viene dapprima visualizzata con diversi browser di recente generazione (Internet Explorer 6.0, Netscape 7.1, Opera 7.11, Mozilla 1.1): la visualizzazione risulta sostanzialmente identica in tutti i casi.

Successivamente viene disabilitata la visualizzazione delle immagini. Buona parte dei collegamenti non sono più visibili: molti link sono infatti costituiti da immagini e nessuna di esse ha una descrizione alternativa che ne spieghi il contenuto.

Le tre immagini seguenti mostrano parte del menù di sinistra della home page, visualizzato dapprima con le immagini abilitate (a), poi con le immagini disabilitate (b) e, infine, come apparirebbe senza immagini se queste contenessero una descrizione alternativa (c):

Raggiungere determinate aree diventa a questo punto impresa ardua, ma non del tutto impossibile: i collegamenti hanno infatti nomi abbastanza esplicativi (ad esempio: giunta.htm, bilancio.htm e, se il visitatore conosce il nome del Presidente della Regione, illy_accesso.htm).

In questo scenario tuttavia, la presenza di una versione solo testo della pagina (peraltro inadeguata nei contenuti e non aggiornata) risulta assolutamente "invisibile" e quindi non fruibile: il nome del collegamento (welcomest.htm), questa volta non aiuta in alcun modo il visitatore. Lo stesso vale per la funzione "cerca", che è inutilizzabile, come è possibile vedere chiaramente dal confronto delle due immagini seguenti:

La home page è stata infine aperta con due diversi browser testuali ("lynx" e "links"): in entrambi i casi il risultato è stato quello di visualizzare una desolante pagina vuota.

Questo sconcertante risultato, analizzato in dettaglio al punto 1 della sezione successiva, è da attribuirsi alla presenza di codice Javascript che i due browser non riescono ad interpretare. Lo stesso risultato si ottiene disabilitando l'esecuzione degli script in un qualsiasi browser visuale.

In seguito sono state analizzate alcune delle aree presumibilmente più visitate: "Ufficio relazioni con il pubblico", "Concorsi pubblici", "Meteo", "Agricoltura", "Istruzione e cultura", "Traffico e viabilità", ecc..

N.B.: Alcune sezioni ("Sanità", "Turismo", "Web TV", ecc.) sono state escluse dall'analisi in quanto collegamenti a siti esterni.

Elenco delle pagine analizzate:

1. welcome.asp (Home page)
2. welcome_nets.asp (Home page)
3. welcome.htm (pre-home di reindirizzamento)
4. mappa/mappa.htm ("Mappa")
5. illy/illy_accesso.htm ("Presidente")
6. illy/asp/domanderisposte/new_post.asp ("Scrivi al Presidente")
7. istituzionale/uffici/uffici.htm ("Uffici")
8. istituzionale/urp/urp.htm ("URP")
9. istituzionale/leggi/leggi.htm ("Banca dati delle Leggi Regionali")
10. mater.htm ("Tutela e promozione della maternità")
11. lavoro/frame-concorsi.htm ("Concorsi pubblici")
12. orientamento/frame-corsi.htm ("Corsi ed Enti di formazione")
13. meteo.htm ("Meteo regionale")
14. neve.htm ("La neve per sciare")
15. valanghe.htm ("Bollettino nivometeorologico")
16. viabilita.htm ("Traffico e viabilità")
17. frame-benzina.htm ("Prezzi e turni carburanti")
18. frame-planet.htm ("Informazione, orientamento e consulenza per i giovani")
19. orientamento/frame-informasc.htm ("Informascuole on-line")
20. orientamento/orientamento.htm ("Orientamento")
21. orientamento/frame-servizi.htm ("Centri territoriali per l'orientamento in FVG")
22. agricoltura/agricoltura.htm ("Agricoltura")
23. ambiente/ambiente.htm ("Ambiente e territorio")
24. artigianato/artigianato.htm ("Artigianato")
25. istruzione/istruzione.htm ("Istruzione e cultura")
26. istruzione/frame-contributi2.htm ("Contributi per acquisto di libri e trasporto scolastico")
27. istruzione/frame-organismi.htm ("Organismi culturali d’interesse regionale")
28. edilizia/edilizia.htm ("Casa e lavori pubblici")
29. elezioni/elezioni.htm ("Elezioni")
30. lavoro/lavoro.htm ("Lavoro")
31. minori/minori.htm ("Minori")
32. sporttempolibero/welcome.htm ("Sport e tempo libero")

L'analisi è stata eseguita seguendo sistematicamente l'ordine delle linee guida, e analizzandone quindi in dettaglio i diversi punti.

I problemi riscontrati sono stati successivamente ordinati per grado di priorità e quindi per gravità (i problemi riscontrati in più pagine sono riportati una sola volta).

In alcuni casi sono stati aggiunti sotto la voce "Note" alcune considerazioni aggiuntive su aspetti dell'analisi che, pur se non richiesti dalle linee guida, hanno rilevanza ai fini del miglioramento della qualità globale del sito.

torna all'inizio della pagina [I]

 

Problemi riscontrati e soluzioni proposte

1. Presenza di codice Javascript - [Priorità 1].
   Il 13% degli utenti internet non usa Javascript. I motivi sono diversi, in alcuni casi il codice Javascript non viene interpretato dal browser (browser testuali o datati), in altri casi, anche se interpretato, può essere stato disabilitato per motivi di sicurezza, in molti casi è lo script stesso a fallire miseramente il suo compito. In tutti questi casi è come se il codice Javascript non esistesse affatto.
   Di norma la presenza di scripts non occupa la prima posizione nell'ordine di gravità dei problemi riscontrati, ma in questo caso la sua presenza nella pagina di default (welcome.htm) porta a risultati inaspettati: rende irraggiungibile la home page.
   L'elemento "BODY" della pagina "welcome.htm" è infatti privo di contenuto:

   <BODY onload="Javascript:controllo();"> </BODY>

   L'unica funzione che esegue è quella di "browser sniffer", effettuare cioè il riconoscimento del browser utilizzato dal visitatore e reindirizzarlo di conseguenza alle pagine: welcome.asp se usa Internet Explorer o welcome_nets.asp se usa Netscape. In tutti gli altri casi visualizza una finestra di alert con l'invito a installare un browser:
   
   
   
   La funzione viene eseguita automaticamente al caricamento della pagina, senza fornire alcun tipo di alternativa: nel caso quindi che il browser non interpreti gli script per uno qualsiasi dei motivi elencati sopra, quella che il visitatore si trova davanti è una pagina vuota.
   

   Soluzione: Fornire una descrizione alternativa che sia accessibile in formato solo testo, e che fornisca, se possibile, le stesse funzionalità dello script.
   Ad esempio, nel caso appena descritto, è sufficiente prevedere un semplice collegamento ipertestuale (in formato testo) alla home page, che permetta di proseguire la navigazione anche se lo script non viene interpretato (o se il browser, pur interpretando lo script, non viene riconosciuto).
   Ogni script dovrebbe essere sempre seguito da un tag <noscript> che ne descriva le funzionalità o il contenuto e visualizzi (dove possibile) in formato testuale le informazioni che fornisce.

   Note: Il codice Javascript viene spesso utilizzato al posto dei normali link per aprire il collegamento in una nuova finestra (i tanto odiati pop-up ad esempio), questo però impedisce l'indicizzazione della nuova pagina ai motori di ricerca (Google, Altavista, ecc.), che eseguono la ricerca solo sui link testuali, ed influisce quindi negativamente anche sulla visibilità del sito. In questo caso la situazione è aggravata dal fatto che a non poter essere indicizzata è proprio la pagina principale del sito.

   
   
2. Immagini prive di una descrizione alternativa - [Priorità 1].
   La navigazione di una parte consistente del sito diventa difficoltosa per quegli utenti che non possono (non vedenti, ipovedenti) o non vogliono (per migliorare la velocità di navigazione) visualizzare le immagini, e per gli utilizzatori di browser testuali. In questo contesto, la presenza di un testo alternativo è essenziale: visualizza, in assenza dell'immagine, la sua descrizione, permettendo all'utente di orientarsi.

   Soluzione: Fornire un equivalente testuale per ogni immagine, mediante l'uso dell'attributo "alt". Per le immagini che contengono importanti informazioni, è opportuno prevedere altresì una descrizione particolareggiata (o un link alla pagina di descrizione) attraverso l'attributo "longdesc".

   Note: Se l'immagine è utilizzata solo con funzioni "spaziatrici" (immagini trasparenti, usate solo per spaziare i vari elementi della pagina) è opportuno che il testo alternativo venga lasciato vuoto (es.: alt=""), per permettere ai browser testuali o vocali di ignorarlo.
   Altro indubbio vantaggio nel fornire una descrizione alternativa è quello di permettere l'indicizzazione delle immagini ai motori di ricerca, operazione che viene eseguita associando al nome dell'immagine il contenuto del suo attributo "alt".

   
   
3. Applet privi di una descrizione alternativa - [Priorità 1].
   Non tutti i browser sono in grado di visualizzare gli applets, e, tra questi, non tutti hanno installato il necessario plugin.
   

   Soluzione: Se l'applet contiene importanti informazioni è necessario fornire una descrizione testuale o un collegamento ad una pagina solo testo che fornisca un duplicato delle sue funzionalità.

   
   
4. Mancata identificazione dei cambiamenti nel linguaggio naturale del documento - [Priorità 1].
   Per quanto divenuti di uso comune, tutti i termini in una lingua diversa da quella del documento (in questo caso l'italiano) dovrebbero essere opportunamente identificati: questo permetterà, ad esempio, ai browser vocali e ai dispositivi Braille di identificarli e leggerli con la corretta pronuncia, in caso contrario il termine potrebbe risultare incomprensibile.

   Soluzione: Identificare tutti i cambiamenti nel linguaggio naturale del testo di un documento e in ogni equivalente testuale (didascalie, testo alternativo di immagini e applet, ecc.) mediante l'uso dell'apposito attributo "lang".

   Note: Oltre ai cambiamenti nel linguaggio predefinito è opportuno contrassegnare anche il linguaggio principale del documento [priorità 3] specificando nell'elemento "HTML" l'apposito attributo "lang". Questo permette inoltre ai motori di ricerca di identificare i documenti nel linguaggio desiderato.

   
   
5. Frames privi di titoli [Priorità 1] e descrizioni [Priorità 2].
   Nell'ipotesi che l'utente non sia in grado di accedere a frame multipli ed abbia la necessità di visualizzare i frame singolarmente, si troverebbe quantomeno confuso da nomi come "supmini.htm" o "frame.htm", che non forniscono alcuna indicazione sul suo contenuto. E' necessario fornire a ogni frame un titolo e una descrizione, che dia informazioni sul suo contenuto e sul suo scopo: in questo modo l'utente è messo in condizione di sapere quale dei frame aprire.

   Soluzione: Aggiungere un titolo ad ogni frame, mediante l'attributo "title", che descriva il contenuto del frame. Descrivere quindi lo scopo del frame e il modo in cui i frames sono collegati fra loro (a meno che non sia evidente dai soli titoli), nell'attributo "longdesc" dell'elemento frame o in un collegamento descrittivo (d-link).

   
   
6. Uso di immagini per rappresentare testi - [Priorità 2].
   Il consistente utilizzo di immagini al posto del testo corrispondente rende difficoltosa la navigazione di alcune aree del sito (vedi punto 2).
   

   Soluzione: Utilizzare testo anzichè immagini dove possibile, gli effetti sul testo sono facilmente ottenibili utilizzando le opzioni di formattazione offerte dai fogli di stile.

   Note: Oltre a renderla inaccessibile, l'utilizzo di immagini per veicolare informazioni testuali appesantisce inutilmente la pagina, compromettendone in modo sensibile la velocità di visualizzazione.

   
   
7. Form privi di identificazione dei gruppi logici - [Priorità 2].
   E' necessario raggruppare i moduli dei form, identificandoli come parte di uno stesso gruppo, e fornendoli di opportune etichette esplicative in modo da fornire informazioni aggiuntive sul loro uso.
   

   Soluzione: raggruppare i moduli dei form che siano in qualche modo correlati (ad esempio i campi relativi all'indirizzo) mediante l'elemento "FIELDSET" e fornire quindi ogni gruppo così creato di un'etichetta usando l'elemento "LEGEND".

   
   
8. Controlli dei moduli privi di etichette - [Priorità 2].
   E' necessario associare a ogni controllo una sua etichetta, che deve essere posizionata correttamente. Il browser in questo modo associa esplicitamente il testo dell'etichetta con il modulo a cui si riferisce (solitamente, infatti, il cursore si posiziona sul modulo anche cliccando sulla sua etichetta).

   Soluzione: Fornire ogni controllo, tranne quelli che hanno etichette associate implicitamente ("reset", "submit", ecc.), di una sua etichetta, mediante l'elemento LABEL e il suo attributo "for" e posizionarla correttamente: l'etichetta deve precedere il proprio controllo sulla stessa riga (in questo caso si possono porre più controlli sulla stessa riga) o essere posta nella riga precedente (in questo caso è ammesso un solo controllo per riga).

   
   
9. Presenza di gestori di eventi che richiedono l'uso del mouse - [Priorità 2].
   L'uso di gestori di eventi come "onmouseover" o "onmouseout" impedisce l'utilizzo della risorsa senza l'ausilio di un mouse: pur potendo raggiungere l'area interessata dall'evento l'utente si troverà nell'impossibilità di attivarlo.

   Soluzione: fare in modo che i gestori di eventi siano indipendenti dal dispositivo di input utilizzato, evitando l'uso di gestori di eventi a livello di interazione utente. Ad esempio gli attributi "onfocus" e "onblur" hanno effetto quando qualcosa accade alla pagina a prescindere dal modo in cui l'evento viene richiamato. In questo modo l'evento può essere attivato sia dal passaggio del mouse sia dal posizionamento del cursore sull'area interessata. In alternativa, è possibile prevedere meccanismi di input ridondanti, per esempio implementando sia i gestori di eventi del mouse, sia quelli della tastiera.

   
   
10. Pagine prive di riferimento a grammatiche formali pubblicate - [Priorità 2].
    Le pagine analizzate non presentano alcuna indicazione sul tipo di documento adottato. La dichiarazione del tipo di documento adottato permette al browser di interpretare correttamente il linguaggio di markup e le funzionalità di accessibilità usati nel documento.

    Soluzione: includere all'inizio della pagina una dichiarazione sul tipo di documento che faccia riferimento a una DTD pubblicata, adeguata al tipo di linguaggio di markup utilizzato. Per l'HTML, ad esempio, una delle possibili dichiarazioni è: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">.

    
    
11. Unità di misura espresse in valore assoluto. - [Priorità 2].
    La presenza di unità di misura espresse in valore assoluto impedisce la visualizzazione con caratteri di dimensione diversa da quella predefinita. Un ipovedente ha spesso la necessità di visualizzare il documento con caratteri più grandi, se questi sono espressi in misure assolute non ne avrà la possibilità.

    Soluzione: Usare unità relative in misura percentuale nei valori degli attributi e delle proprietà del foglio di stile. Per esempio, usare "em" o valori percentuali per definire le dimensioni dei caratteri, e valori percentuali per stabilire le dimensioni delle tabelle.

    
    
12. Tabelle utilizzate per impaginare il contenuto - [Priorità 2].
    Il contenuto delle pagine è organizzato esclusivamente mediante l'uso di tabelle. Questa pratica, molto diffusa per la semplicità con cui permette di ordinare i contenuti, impedisce la fruizione dei contenuti stessi agli utilizzatori di browser che leggono le tabelle in modo linearizzato. Se la tabella, letta in modo linearizzato, non è comprensibile, è necessario fornire un'alternativa equivalente .

    Soluzione: L'uso delle tabelle dovrebbe essere limitato esclusivamente alla presentazione di dati tabellari. Evitare, dove possibile, di utilizzarle per impaginare il contenuto dell'intero documento.

    
    
13. Presenza di elementi disapprovati - [Priorità 2].
    Alcuni elementi presenti nel codice della pagina sono stati rimossi in HTML 4.0. Per quanto alcuni di questi siano tuttora supportati da alcuni browser potrebbero non esserlo più in futuro, o non è previsto che lo siano.

    Soluzione: Evitare l'uso degli elementi disapprovati, sostituendoli con quelli attualmente definiti in HTML 4.0, ad esempio l'elemento "APPLET" (sostituito dall'elemento "OBJECT"), e gli elementi "CENTER" e "FONT" (non più utilizzati, per le formattazioni del testo è necessario utilizzare i fogli di stile).

    
    
14. Collegamenti privi di senso compiuto se letti al di fuori del contesto - [Priorità 2].
    Un collegamento testuale dovrebbe essere abbastanza significativo da mantenere un senso se letto fuori dal contesto in cui è inserito.

    Soluzione: Identificare con chiarezza l'obiettivo di ogni collegamento.

    
    
15. L'apertura di nuove finestre pop-up non è segnalata - [Priorità 2].
    La creazione di nuove finestre cambia il "system focus" e può interferire con le periferiche di accesso. Può anche sorprendere o disorientare l'utente.

    Soluzione: Evitare di aprire nuove finestre o, in alternativa, avvisare l'utente che il collegamento verrà aperto in una nuova finestra.

torna all'inizio della pagina [I]

 

Conclusioni

Il sito risulta:

Non conforme alle linee guida di accessibilità WCAG 1.0 livello A e livello Doppia-A.

Inaccessibile agli utilizzatori di browser che non supportino gli script e/o non vengano riconosciuti dal "browser sniffer".

Di difficile navigazione per gli utilizzatori di browsers testuali o datati, tecnologie WAP, tecnologie assistive (lettori di schermo, dispositivi Braille, ecc.) e per gli utenti affetti da disabilità motorie che precludano l'utilizzo del mouse.

torna all'inizio della pagina [I]

 

 

[ torna indietro ]