Valutazione di Conformita'

Introduzione

La valutazione di conformità del sito è stata svolta durante il mese di Settembre 2005.

Nel valutare la conformità del sito della Regione Abruzzo, abbiamo fatto riferimento alle linee guida WCAG 1.0, strutturate nella checklist fornita dal prof. Giorgio Brajnik.

Per questo motivo il rapporto prodotto è suddiviso nelle tre sezioni:

  1. Important Checkpoints
  2. Less Important Checkpoints
  3. Checkpoints whose violation has minor consequences

In ogni sezione sono presenti solo i punti di controllo violati.

Ogni punto di controllo è strutturato nel seguente modo:

  • Numero del punto di controllo.
  • Testo del punto di controllo tradotto in italiano.
  • Analisi: in cui spieghiamo in che pagine la violazione ha luogo ed eventualmente esprimiamo un giudizio personale sulla gravità della violazione.
  • Errore: in cui la violazione viene descritta più dettagliatamente e, in alcuni casi, riportiamo le parti di codice che danno luogo alla violazione.
  • Soluzione: in cui correggiamo il codice scorretto, o descriviamo a parole in che modo si potrebbe evitare l'insorgere della violazione.

Per ogni punto di controllo ci possono essere più occorrenze di "Errore", nel caso la violazione abbia assunto forme diverse in diverse pagine del sito.

Per testare la conformità del sito sono stati utilizzati i browser Internet Explorer 6 e Mozilla Firefox 1.0.7. Abbiamo anche adoperato strumenti automatici, per essere certi che la valutazione manuale che ne ha preceduto l'utilizzo fosse completa, e per individuare con precisione le linee di codice in cui si verificava una violazione.

Strumenti automatici utilizzati:

  1. CSE HTML Validator
  2. WebXACT
  3. Cynthia Says

Inoltre ci siamo avvalsi di:

  • Estensione per Mozilla Firefox "Fangs", che emula un lettore di schermo e permette di visualizzare per ogni pagina Headings list, Links list, nonchè la versione testuale che verrebbe pronunciata dal browser vocale.
  • Vischeck, per simulare la visione di pagine web da parte di utenti daltonici o che usino monitor in bianco e nero.
  • Colorblind Web Page Filter, per simulare la visione di pagine web da parte di utenti con problemi di vista diversi dal daltonismo.
  • il validatore del W3C per verificare la conformità delle pagine rispetto alle regole di grammatica del linguaggio usato e alle raccomandazioni del W3C.
  • il browser testuale Lynx 2.8.5, per analizzare le versioni linearizzate delle pagine in esame (e non fare affidamento solo sul simulatore di lettore di schermo e sugli altri strumenti adottati).

Pagine Analizzate

Il sito in esame appare fondamentalmente come una raccolta di collegamenti a siti di supporto, ordinati nell'home page sulla base delle aree tematiche che coprono.
I siti di supporto presentano template completamente diversi da quello dell'home page, ma è stato possibile ricondurre quasi tutte le pagine a gruppi di appartenenza, proprio sulla base dei diversi template.

Possiamo quindi dire di aver analizzato tutte le pagine del sito, escluse quelle che presentavano una struttura completamente diversa da ogni altra pagina. Nella trattazione dei singoli checkpoint abbiamo evidenziato in quale insieme di pagine occorre la violazione, e abbiamo riportato solo gli esempi più eclatanti di violazione.

Considerazioni generali sul sito

Come si potrà desumere dalla lettura dei punti di controllo violati, il sito presenta gravi lacune in merito all'accessibilità. Se si volesse ristrutturare il sito per renderlo accessibile, si dovrebbe tenere in seria considerazione l'ipotesi di rifarlo completamente da capo.

Abbiamo infatti trovato violazioni a quasi tutti i punti di controllo, e la mancata violazione non è dovuta ad accortezze degli sviluppatori, ma al semplice fatto che la caratteristica descritta nel punto di controllo non è stata implementata.
Per esempio non ci sono violazioni relativamente alle tabelle di dati, perché in nessuna pagina del sito si sono trovate tabelle di dati, e così via.

Altro sintomo inequivocabile di poca sensibilità relativamente alle problematiche dell'accessibilità è stato il mancato o non corretto utilizzo di fogli di stile: alcune pagine ne sono del tutto prive, altre sfruttano un foglio di stile associato solo per controllare aspetti di presentazione non altrimenti gestibili.

Quasi ogni pagina non è stata validata con il validatore html del W3C, esclusa l'home page che infatti espone in bella vista le immagini di validazione avvenuta con successo.
L'uso di tabelle per la strutturazione dei contenuti è assai frequente, con risultati a volte disastrosi, visto che linearizzando i contenuti si ottengono documenti disordinati e incomprensibili.

Troppi contenuti sono veicolati attraverso immagini, e queste sono troppo spesso prive di attributo "alt", i collegamenti selezionati generano troppo spesso l'apertura di nuove finestre, che tra l'altro hanno un layout grafico completamente diverso tra loro.

Ma il problema più grave ci pare essere la totale dipendenza dalla tecnologia: se il browser non supporta javascript all'utente è preclusa la possibilità di accedere ai sotto menu, sia in home page che in numerose altre pagine.
È presente una versione testuale della pagina, denominata "alta visibilità", ma il collegamento a questa versione è tra gli ultimi ad essere pronunciati da un lettore di schermo. A questo proposito facciamo anche notare la totale mancanza di skip links.

Torna a inizio pagina

Important Checkpoints

Checkpoint 1.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), applet 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.

Analisi

Abbiamo trovato violazioni a questa linea guida in tutte le pagine del sito, esclusa l'home page.
Addirittura in alcune pagine, come ad esempio in P.R.I.T., solamente il logo della pagina ha l'attributo "alt" impostato, mentre tutte le altre immagini sono sprovviste di tale attributo.
La mancanza di un equivalente testuale per ogni elemento non di testo si fa ancora più grave nei seguenti casi:

Errore

Nella pagina Anagrafe manca l'attributo "alt" di un bottone grafico che si trova nel riquadro "ricerca rapida" e che permette all'utente di avviare la ricerca avanzata.
La mancanza di una descrizione per quest'immagine rende incomprensibile il significato del link per quanti non utilizzano un browser grafico.

pulsante di ricerca avanzata
<img src="imago/cerca.jpg">

Soluzione

Associare un testo alternativo nel seguente modo:

<img src="imago/cerca.jpg" alt="ricerca avanzata">

Errore

Sempre nella pagina Anagrafe troviamo immagini che hanno l'attributo "alt", ma il testo alternativo non è significativo per l'utente.
Prendiamo per esempio il logo della regione che compare nel template e che si trova in alto a sinistra.

immagine con il logo della regione
<img src="imago/logo.jpg" width="241" height="91" alt="" border="0">

Soluzione

<img src="imago/logo.jpg" alt="logo della regione Abruzzo" width="241" height="91" alt="" border="0">

Errore

Nella pagina Programmazione sarebbe il caso di aggiungere un attributo "alt" senza testo per le immagini che, seppure non veicolino contenuto informativo, devono comunque essere dotate di tale attributo.
Infatti in alto alla pagina è presente un elenco di link (Info, Contatti, Credits, Mappa) vicino ai quali è presente la stessa piccola immagine con il simbolo ">". L'immagine è priva di attributo "alt" in ogni occorrenza.

menu in alto alla pagina Programmazione

La stessa immagine è usata anche vicino ad ognuno dei link che si trovano nel box grigio a destra, anche qui ogni occorrenza è priva di "alt".

menu a destra della pagina Programmazione

Soluzione

<img src="imago/logo.jpg" alt="logo della regione Abruzzo" width="241" height="91" alt="" border="0">

Torna a inizio pagina

Checkpoint 4.1 Identificare con chiarezza i cambiamenti nel linguaggio naturale del testo di un documento e in ogni equivalente testuale (per es. nelle didascalie).

Analisi

In tutte le pagine ricorrevano più volte le parole "home page" e "credits", ogni volta non veniva specificato il cambiamento nel linguaggio.
Inoltre, anche in paragrafi di testo scritti in italiano, quando compaiono termini inglesi, il cambiamento di lingua non viene mai segnalato all'utente.

Errore

Nella pagina Anagrafe per esempio, è presente un elenco puntato in cui compare il termine "database".

elenco puntato in cui compare parola straniera
<p> Il database contiene dati inerenti oltre 24.000 operatori dell'Artigianato, dell'Industria e del Commercio residenti in Abruzzo suddivisi in più di 950 categorie merceologiche.</p>

Soluzione

<p> Il <span lang="en">database</span> contiene dati inerenti oltre 24.000 operatori dell'Artigianato, dell'Industria e del Commercio residenti in Abruzzo suddivisi in più di 950 categorie merceologiche.</p>

Errore

Sempre nella pagina Anagrafe compare il termine "Newsletter" nel contenuto a centro pagina:

paragrafo in cui compare parola straniera
... tra i quali la produzione di una "<strong>newsletter</strong>" elettronica a carattere informativo

Soluzione

... tra i quali la produzione di una "<strong lang="en" >newsletter</strong>" elettronica a carattere informativo

Errore

Sempre nella pagina Anagrafe compare di nuovo il termine "Newsletter" come etichetta di un link a fondo pagina:

insieme di collegamenti in cui si trova parola straniera
<a href="index.php?id=4">Newsletter</a>

Soluzione

<a href="index.php?id=4" lang="en">Newsletter</a>

Torna a inizio pagina

Checkpoint 6.1 Organizzare i documenti in modo che possano essere letti senza i fogli di stile. Per esempio, quando un documento html viene reso senza i fogli di stile associati, deve essere sempre possibile leggere il documento.

Analisi

L'uso dei fogli di stile nelle pagine del sito è decisamente limitato, gli attributi di presentazione sono infatti incorporati nel codice html.
Per questo motivo è possibile leggere il contenuto delle pagine anche senza i fogli di stile.
Tuttavia si sono trovate alcune pagine per le quali la mancanza di un foglio di stile associato generava gravi errori.

Errore

Nella pagina Programmazione (così come in tutte le pagine con il medesimo template), togliendo il foglio di stile:

  • Non è possibile comprendere che ci si trova nella pagina "Programmazione", dato che questa informazione è veicolata attraverso una grande immagine con testo "Programmazione" presente nell'header.
    Quest'immagine non viene visualizzata senza foglio di stile. Escluso il titolo della pagina e l'url, non ci sono altre possibilità di capire in che pagina ci si trova.
screenshot dell'immagine Presentazione
  • Non viene visualizzato l'indirizzo della Direzione Programmazione Risorse Umane Finanziarie e Strumentali, poichè anche quest'informazione è comunicata attraverso un'immagine non visualizzata senza foglio di stile.
    Eppure si tratta di un'informazione importante.
screenshot dell'immagine Presentazione

Soluzione

Non veicolare informazioni importanti esclusivamente attraverso immagini, ed eventualmente assicurarsi che queste siano visibili anche eliminando il foglio di stile associato alla pagina.

Errore

Nella pagina Servizio Tecnico è presente un'immagine di sfondo che non è possibile vedere se si toglie il foglio di stile.
L'immagine contiene un intero paragrafo di testo.

immagine che contine un paragrafo di testo

Soluzione

Non veicolare informazioni importanti esclusivamente attraverso immagini, ed eventualmente assicurarsi che queste siano visibili anche eliminando il foglio di stile associato alla pagina.

Errore

Molte pagine, se visualizzate senza foglio di stile, presentano una disposizione dei contenuti tale da creare problemi per utilizzatori di ingranditori di schermo: i contenuti appaiono sparpagliati nella pagina e tra un contenuto e l'altro sono presenti grandi spazi bianchi, che potrebbero indurre l'utente ipovedente a concludere che non c'è altro contenuto nella pagina e quindi impedirgli di accedere ad alcuni contenuti.
Come esempio prendiamo la pagina Turismo Ambiente Energia che senza foglio di stile appare nel seguente modo:

pagina direzione senza foglio di stile

Torna a inizio pagina

Checkpoint 14.1 Usare il linguaggio più chiaro e semplice possibile che sia adatto al contenuto di un sito.

Analisi

Consideriamo il linguaggio usato nei paragrafi di testo sufficientemente semplice e chiaro, mentre riteniamo che le etichette dei link non siano abbastanza informative.

Si provi, a titolo esemplificativo, ad immaginarsi che tipo di collegamenti possano trovarsi alla voce "ospiti" nel menu a sinistra in home page.
Alla voce "ospiti" si trovano collegamenti a siti che potrebbero essere interessanti per un residente in Regione (Agenzia culturale Vasto, Comunità Amiternina, ecc.), ma di certo si tratta di un'etichetta ambigua.

Oppure ci si può chiedere se il collegamento "cartografia" sia opportunamente inserito nella sezione "Informatica": il link rimanda alla pagina dell' ufficio sistema informatico geografico, ma forse sarebbe stato più opportuno inserire questo collegamento nella sezione "territorio".

Molte etichette sono costituite da acronimi che è necessario conoscere (si veda il punto di controllo NONMIRICORDO), altrimenti l'etichetta non sarà in alcun modo informativa.
Si potrebbero trovare ancora numerosi esempi, ma per una trattazione del sistema di etichettatura è necessario svolgere sessioni di user testing e card sorting.

Soluzione

Come suggerisce il documento "The Scent of Information", rendere le etichette dei collegamenti più lunghe e più descrittive.

Torna a inizio pagina

Checkpoint 12.1 Dare un titolo a ogni frame per facilitare l'identificazione del frame e la navigazione.

Analisi

Non sono state trovate pagine che utilizzassero frame, fatta eccezione per la pagina Anagrafe che è organizzata attraverso un "frameset" del quale fanno parte due frame; nessuno dei due è dotato dell'attributo "title".

Errore

<frame name="topmask" src="mask.htm" scrolling="no" noresize>
<frame name="bottommask" src="http://h1.ath.cx/anagrafe" scrolling="auto">

Soluzione

Occorre specificare l'attributo "title" per l'elemento <frame> al fine di facilitarne l'identificazione e la navigazione.
I "title" devono essere significativi.

Torna a inizio pagina

Checkpoint 6.3 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.

Analisi

Diverse pagine del sito utilizzano javascript, ecco una lista delle violazioni più gravi riscontrate per quanto riguarda questo punto di controllo.

Errore

Nell'home page l'intero menu a sinistra non è cliccabile disabilitano javascript.

screenshot del menu a sinistre in homepage

Sempre nell'home page, neanche i collegamenti presenti nel menu in alto a destra sono selezionabili se si disabilita javascript (l'unico link funzionante è quello alla home page).

screenshot del menu in alto in homepage

Soluzione

Evitare l'uso di javascript

Errore

Nella pagina Servizio Tecnico e in tutte le pagine con lo stesso template, disabilitando javascript i collegamenti "info", "contatti", "credits", "mappa" presenti nell'header della pagina non possono essere attivati.

Menu servizio tecnico inaccessibile

Soluzione

Evitare l'uso di javascript. Si veda anche il punto di controllo 6.5.

Errore

Nella pagina P.R.I.T. disabilitando javascript non è più possibile accedere ai menu "materiali di lavoro" e "gli incontri del prit".

Menu non accessibili con javascript disabilitato

Soluzione

Organizzare in maniera differente il menu in maniera che siano visibili le varie opzioni di sottomenu, oppure, se si decide di tenere lo stesso aspetto grafico, realizzarlo tramite css inserendo i controlli per il layout grafico( es: utilizzando selettori di pseudo-classe come :hover ecc).

Torna a inizio pagina

Checkpoint 11.4 Se, nonostante ogni sforzo, non si può creare una pagina accessibile, fornire un collegamento a una pagina alternativa che usi le tecnologie W3C, sia accessibile, contenga informazioni (o funzionalità) equivalenti, e sia aggiornata con la stessa frequenza della pagina (originale) inaccessibile.

Analisi

Nel sito sono state riscontrate violazioni a linee guida di priorità 1 in tutte le pagine del sito.
Solo la home page presentava un collegamento ad una versione accessibile della pagina, il contenuto offriva effettivamente informazioni equivalenti ed aggiornate.

Torna a inizio pagina

Checkpoint 3.4 Usare unità relative e non assolute nei valori degli attributi del linguaggio di marcatura e nei valori della proprietà del foglio di stile.

Analisi

Nei fogli di stile delle pagine analizzate è frequente riscontrare l'utilizzo di unità di misura assolute anziché relative.

Errore

div { font-family: Verdana; font-size: 7pt; color:#000000}
td { font-family: Verdana; font-size: 8pt}
a { font-family: Verdana; text-decoration: none; }
input {font-family: Verdana; color:#4985DD; font-size: 10pt; font-weight: bold}

Non soltanto, ma anche i valori degli attributi nel codice html della pagina sono stati specificati usando unità assolute anzichè relative.

<table border="0" cellpadding="0" cellspacing="0"
style="border-collapse: collapse" bordercolor="#111111" width="752" id="AutoNumber1" height="565">

Soluzione

Sostituire ogni misura espressa in "cm", "in", "mm", "pc" e "pt" con valori espressi in "em" o percentuali.

Torna a inizio pagina

Checkpoint 6.5 Assicurarsi che il contenuto dinamico sia accessibile oppure fornire una presentazione o pagina alternativa.

Analisi

In diverse pagine sono stati creati collegamenti che usano "javascript" come URI.
Se un utente usa un browser privo di interprete javascript, allora i link potranno essere attivati dal momento che il browser non può creare dinamicamente il contenuto del link.

Tutte le pagine del sito che usano javascript lo fanno proprio per permettere l'accesso a menu dinamici o a collegamenti, cosa che abbiamo già fatto notare nel punto di controllo 6.3.

In generale la soluzione potrebbe essere evitare l'uso di javascript, in quanto è inammissibile che l'accesso ad intere aree del sito sia precluso se il browser non supporta javascript.

Ora consideriamo un esempio rappresentativo per evidenziare il codice scorretto.

Errore

Nella pagina Programmazione, disabilitando javascript non è possibile attivare i link con etichette "Info", "Contatti", "Credits", "Mappa" posizionati nell'header della pagina.

screenshot del menu accessibile solo attraverso javascript
<a title="info" href="javascript: apri(
'http://www.regione.abruzzo.it/programmazione
/popup/info.htm', 'info',50,50,451,430)"> Info</a>

Lo script è usato per stabilire le dimensioni della finestra di pop-up che si apre selezionando il link.
Considerando che aprire nuove finestre di browser o finestre di pop-up è da evitare, e considerando anche che la pagina pop-up cui rimanda il link ha un contenuto informativo tale da non giustificare un cambio di contesto/finestra di browser, si potrebbe evitare l'apertura di una nuova finestra.

Soluzione

La soluzione secondo noi più corretta è quindi:

<a title="info" href="http://www.regione.abruzzo.it/
programmazione/popup/info.htm"> Info</a>

Lo stesso vale anche per i link adiacenti ad "info".

Torna a inizio pagina

Checkpoint 10.1 Fino a quando i programmi utente non permetterano agli utenti di bloccare la generazione di nuove finestre, non fare apparire finestre a cascata o di altro tipo e non cambiare la finestra attiva senza informare l'utente.

Analisi

Molti collegamenti presenti in home page aprono nuove finestre del browser.
Ecco l'elenco dei link che se selezionati aprono nuove finestre di browser senza informare in alcun modo l'utente.

Nel menu a destra:

  • Il Consiglio, U.R.P.

Nel menu a sinistra:

  • sotto la voce agricoltura caccia pesca: Agricoltura, A.R.S.S.A., Caccia, Pesca (gli ultimi due collegamenti si aprono ognuno in una nuova finestra che a sua volta apre una finestra di pop-up!).
  • sotto la voce attività produttive: Consorzio fare, Abruzzo interExpo, Anagrafe telematica.
  • sotto la voce economia programmazione: FI.R.A., Programmazione.
  • sotto la voce energia ambiente: Sportello regionale ambientale.
  • sotto la voce europa: Abruzzo Europa, Archivio storico dell'UE, I*M europe portal page, Unione europea.
  • sotto la voce informatica: A.R.I.T., Cartografia, E-governement, Intesa Gis, Sistema statistico.
  • sotto la voce Formazione-istruzione-lavoro: Abruzzo lavoro, A.F.O.R.A., C.I.S.I., 626 Sicurezza sul lavoro, Sistema interscambio por 2000-2006.
  • sotto la voce istituzioni p.a. on-line: Province on-line, Regioni on-line.
  • sotto la voce legislazione: Iter progetti di legge, B.U.R.A..
  • sotto la voce ospiti: tutti i collegamenti in questa sezione aprono nuove finestre di browser.
  • sotto la voce sanità: Anagrafe canina (si apre in una nuova finestra che a sua volta apre una finestra di pop-up), Prevenzione sicurezza, Portale della sanità.
  • sotto la voce servizi: Biblioteca, Elenco telefonico.
  • sotto la voce direzione: Osservatorio sociale, Pari opportunità.
  • sotto la voce stampa: tutti i collegamenti in questa sezione aprono nuove finestre di browser.
  • sotto la voce territorio oo.pp.: Rinascimento delle coste abruzzesi, S.I.CO.R.A., Intesa Gis, Sportello regionale Ambientale, A.P.E. .
  • sotto la voce Protezione Civile: Zone Sismiche
  • sotto la voce trasporti: Piano Regionale Integrato dei Trasporti, Progetto Comunitario TWIST
  • sotto la voce turismo sport cultura: Turismo in Abruzzo, Centro regionale beni culturali, Abruzzo promozione turismo, Museo regionale della fotografia, Premio Silone 2004, Settore Cultura, Pescara 2009 - XVI Giochi del Mediterraneo, Biblioteca agenzia culturale di Lanciano, Comitato Campo Imperatore, Travelby, Storia di L'Aquila, CulturAbruzzo.

Menu sul template:

  • Info, Mappa e Credits aprono finestre di pop-up.
  • In fondo alla pagina c'è Italia.gov.it: anche questo link apre una nuova finestra.

Quindi ben 53 collegamenti su 134 aprono nuove finestre di browser senza avvisare l'utente.

Si tratta di una serie di violazioni gravi: se è vero che talvolta l'utente potrebbe supporre che la pagina che andrà a visitare sia esterna al sito (per esempio perchè l'etichetta del link parla di portale tematico), nella maggior parte dei casi egli si troverà inaspettatamente di fronte a una nuova finestra del browser, anche per sezioni che non necessitano di un portale dedicato.

È questo il caso, per esempio, del collegamento "Pari opportunità": l'etichetta non informa l'utente dell'aprirsi di una nuova finestra, ed il contenuto di questa nuova finestra non ha ragione di essere visualizzato in tale maniera.

L'apertura di nuove finestre di browser è frequente anche nelle sotto pagine, così come l'apertura di finestre di pop-up con ben poco contenuto informativo.
In alcune sotto pagine abbiamo notato che il collegamento all'home page del sito della Regione apre anch'esso una nuova finestra di browser. Facciamo un esempio:

Errore

Nella pagina Anagrafe il collegamento all'home page è costituito dal logo dell'Abruzzo posto in alto a sinistra.

screenshot che rappresenta l'immagine con il logo della regione

Se l'utente seleziona questo collegamento, si apre una nuova pagina del browser che visualizza la home page del portale della Regione Abruzzo.

<a href="http://www.regione.abruzzo.it" target="_blank"><img src="imago/logo.jpg" width="241" height="91" alt="" border="0"></a>

Soluzione

<a href="http://www.regione.abruzzo.it" title="vai alla home page" ><img src="imago/logo.jpg" width="241" height="91" alt="logo dell'Abruzzo" border="0"></a>

È opportuno notare che, dalla home page della Regione, selezionando il collegamento alla pagina Anagrafe si apriva una nuova finestra.
A sua volta, se dalla pagina Anagrafe l'utente volesse tornare all'home page della Regione dovrebbe cliccare sul logo che, come abbiamo appena detto, apre una terza nuova finestra.

Sarebbe stato opportuno inserire la pagina Anagrafe all'interno del sito della Regione, in modo che il passaggio "home Regione - Anagrafe - home Regione" si potesse svolgere tranquillamente in un'unica finestra di browser.

Torna a inizio pagina

Checkpoint 13.1 Identificare con chiarezza l'obiettivo di ogni collegamento.

Analisi

Nella home page della Regione molti collegamenti hanno la stessa etichetta ma conducono a pagine differenti, in particolare esistono:

Errore

2 occorrenze di "Consorzio Fare" che rimandano a pagine diverse.

  1. Il primo link rimanda a http://www.regione.abruzzo.it/consorziofare/index.html e si trova sotto ad "attività produttive" nel menu a sinistra.
  2. Il secondo link rimanda a http://www.regione.abruzzo.it/consorziofare e si trova sotto a "ospiti" nel menu a sinistra. Quest'ultimo url è sbagliato, rimanda ad una pagina con messaggio di errore.

Soluzione

Correggere l'url sbagliato, in questo modo le due occorrenze di "consorzio fare" rimanderebbero alla stessa pagina.

Errore

8 occorrenze del link "Direzione" che rimandano a pagine diverse:

  1. rimanda a http://www.regione.abruzzo.it/Direzioni/direzioninuove/dagricoltura.asp e si trova nel menu a sinistra, sotto "Agricoltura caccia e pesca".
  2. rimanda a http://www.regione.abruzzo.it/Direzioni/direzioninuove/dattivitaprod.asp e si trova sotto a "attività produttive".
  3. rimanda a http://www.regione.abruzzo.it/Direzioni/direzioninuove/dturismo.asp e si trova sotto a "energia ambiente".
  4. si trova sotto a "informatica" e rimanda a http://www.regione.abruzzo.it/Direzioni/direzioninuove/ssinformativo.asp.
  5. rimanda a http://www.regione.abruzzo.it/Direzioni/direzioninuove/dpolitichelav.asp e si trova sotto a "formazione istruzione e lavoro"
  6. rimanda a http://www.regione.abruzzo.it/Direzioni/direzioninuove/dsanita.asp e si trova sotto a "sanità"
  7. rimanda a http://www.regione.abruzzo.it/Direzioni/direzioninuove/dqualitavita.asp e si trova sotto a "sociale"
  8. rimanda a http://www.regione.abruzzo.it/Direzioni/direzioninuove/dtrasporti.asp e si trova sotto a "trasporti".

Soluzione

Ogni etichetta "Direzione" nelle diverse sezioni dovrebbe avere un nome che specifichi di che direzione si tratta. Per esempio il link "Direzione" sotto ad "Agricoltura caccia e pesca" potrebbe essere sostituito con "Direzione Agricoltura", e così via anche per gli altri collegamenti.

Errore

2 occorrenze di "Direzioni":

  1. trova in "turismo sport cultura" e rimanda a http://www.regione.abruzzo.it/turismocultura/direzionitucu.asp;
  2. trova in "territorio oo. pp." e rimanda alla pagina http://www.regione.abruzzo.it/territorioambiente/direzioni.asp.

Soluzione

Anche qui la soluzione è specificare di che direzioni si tratta nell'etichetta. Si otterranno etichette più lunghe ma decisamente più efficaci.

Errore

Nella pagina http://www.regione.abruzzo.it/trasporti/prit/default.htm dal nome dei link si riesce ad evincere abbastanza chiaramente il contenuto referenziato, ma non è mai presente l'attributo "title".

Nell'immagine evidenziamo tutti i link sprovvisti dell'attributo "title":

Link sprovvisti dell'attributo title

Soluzione

Aggiungere l'attributo "title" per ogni link sprovvisto di questo attributo.

Errore

Sempre nella pagina P.R.I.T tutti i link nella parte centrale della pagina (per esempio "La viabilità", "Il trasporto ferroviario", ecc.) aprono dei file P.D.F., eppure il testo dei link non suggerisce in alcun modo che verrà aperto un documento P.D.F., e l'attributo "title" manca.

Lo stesso accade nella pagina www.regione.abruzzo.it/programmazione dove il collegamento al file PDF si trova a centro pagina.

<a href="NURVV/annuncio.pdf">II° CONVEGNO della Rete dei Nuclei di Valutazione e Verifica degli Investimenti Pubblici</a>

Soluzione

Oltre ad aggiungere l'attributo "title" è necessario anche specificare nel testo del link che si tratta di un documento P.D.F., in questo modo:

<a href="NURVV/annuncio.pdf" title="annuncio in PDF" >Annuncio del II° CONVEGNO della Rete dei Nuclei di Valutazione e Verifica degli Investimenti Pubblici, documento P.D.F..</a>

Errore

Nella pagina Programmazione il valore dell'attributo "title" di un collegamento può risultare fuorviante dato che non corrisponde alla sezione cui il link rimanda:

<a title="attività" href="struttura/struttura.htm">

Soluzione

<a title="struttura" href="struttura/struttura.htm">

Per quanto riguarda il testo delle etichette, a parer nostro non abbastanza chiaro per identificare l'obiettivo di ogni collegamento, si veda il punto di controllo 14.1.

Torna a inizio pagina

Checkpoint 13.3 Fornire informazione sulla configurazione generale di un sito (per es., una mappa oppure un indice del sito).

Errore

Nell'home page è presente un collegamento alla mappa del sito. Se selezionato apre una finestra di pop-up che mette a disposizione una mappa alfabetica, una mappa tematica e viene spiegato che "è possibile procedere, inoltre, ad una ricerca avanzata tramite il pulsante Cerca presente sulla home page (in basso a sinistra)".

Innanzitutto nell'home page della Regione non è presente nessun form per la ricerca, mentre è invece presente un pulsante grafico nella stessa pagina Mappa, che però se attivato chiude la finestra Mappa.

Possiamo quindi concludere che nonostante esista il sistema di navigazione globale all'interno del sito, questo è mal funzionante.

Nelle sotto pagine in cui è presente una Mappa, questa si apre sempre in una finestra di pop-up.

Nella pagina Programmazione il collegamento alla mappa non funziona.

<a title="mappa" target="_blank" href="file:///C:/Documents and Settings/piero/Documenti/Web/10-09-2004/popup/mappa.htm"/a>

Esistono pagine in cui non vi è alcuna informazione che aiuti l'utente a capire la disposizione degli elementi nella pagina o nel sito. Nessuna sotto pagina presenta quantità di dati tali da suggerire l'utilizzo di una mappa (esclusi i portali tematici, che però non sono di competenza della Regione), ma riteniamo che sarebbe stato comunque opportuno creare una pagina di "aiuto" per dare qualche riferimento in più all'utente che visita il sito per la prima volta.

Torna a inizio pagina

Checkpoint 5.3 Non usare tabelle per impaginazioni a meno che la tabella non sia comprensibile se letta in modo linearizzato. Altrimenti, se la tabella non risulta leggibile, fornire una alternativa equivalente (che può essere una versione linearizzata).

Analisi

La home page della regione non è strutturata in tabelle.
In molte sotto pagine si utilizzano tabelle per impaginare i contenuti, ogni volta non viene presentata una versione linearizzata della pagina, ma linearizzando i contenuti questi vengono presentati comunque in ordine, ad eccezione per la pagina Programmazione.

Errore

Nella pagina Programmazione la disposizione degli elementi nella pagina è completamente affidata ad una tabella per il layout.

Ecco uno screenshot che evidenzia la struttura di tale tabella, e in che ordine vengono presentati i contenuti se venisse linearizzata (per farlo abbiamo usato lynx):

screenshot della struttura tabellare della pagina programmazione

Abbiamo quindi che l'elenco dei link "info", "contatti", "credits", "mappa" viene presentato per primo e in ordine corretto.
Poi viene letto "ultimi avvisi", cui seguono nell'ordine il primo e il secondo avviso.

A questo punto, invece di procedere il terzo avviso, troviamo il link "Struttura", e poi il link "Attività" che infatti nella tabella sono posizionati nella stessa riga del primo e del secondo avviso.
Solo adesso incontriamo il terzo avviso. A questo seguono i link "Strumenti" e "Documenti", anch'essi posizionati nella stessa riga del terzo avviso.

Si prosegue con il quarto e ultimo avviso, per poi trovare nell'ordine i link "Normativa", "link", l'immagine dei libri, il link "Nucleo Regionale di Valutazione e Verifica Investimenti Pubblici" e "Gli altri avvisi".

Da quest'analisi concludiamo che se le tabelle che costituiscono la pagina dovessero essere linearizzate, il contenuto non sarebbe più comprensibile. Infatti, quei link che graficamente compaiono tutti insieme a destra della pagina, vengono sparpagliati all'interno della parte centrale della pagina dedicata agli avvisi.

La cosa si fa ancora più grave dal momento che gli avvisi sono essi stessi dei link e che quindi un utente dotato di lettore di schermo che usi il comando per spostarsi da un link all'altro si scontrerebbe contro una moltitudine di link di tipo diverso, senza riuscire a distinguere gli avvisi e i link generici.

Soluzione

Soluzioni a questo problema potrebbero essere:

  • usare un foglio di stile per organizzare la disposizione dei contenuti.
  • fornire una versione testuale della pagina, o almeno
  • usare tabelle distinte per separare la parte degli avvisi dalla parte dedicata ai vari collegamenti ipertestuali generici.

Torna a inizio pagina

Less Important Checkpoints

Checkpoint 2.2 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. [Priorità 2 per le immagini, Priorità 3 per il testo].

Analisi

Per la verifica di questa linea guida abbiamo usato i tool disponibili al sito Visicheck e al sito Colorblind.

Abbiamo notato che il testo e le immagini sono percepibili con qualsiasi tipo di problema alla vista.
Tuttavia in alcune sotto pagine sono presenti immagini decorative che veicolano anche un contenuto testuale, e che se rese in bianco e nero rendono difficile la lettura del testo. Facciamo un esempio:

Errore

Se visualizziamo in bianco e nero la pagina Programmazione potrebbero esserci problemi nel distinguere l'indirizzo della Direzione Programmazione che fa parte di un'immagine di sfondo:

immagine con indirizzo resa in bianco e nero

Soluzione

Non veicolare l'informazione importante attraverso un'immagine, e controllare in fase di progettazione che il contrasto sia buono anche per portatori di disabilità visive.

Errore

Anche senza applicare filtri per simulare disturbi alla vista, sempre nella pagina Programmazione i link in alto alla pagina (Info, Contatti, Credits e Mappa) sono posizionati in modo poco leggibile, dato che la parte superiore dei caratteri si sovrappone ad una fascia scura.

insieme di link poco visibili

Soluzione

Disporre i collegamenti pochi pixel più in basso.

Torna a inizio pagina

Checkpoint 10.2 Fino a quando i programmi utente non supporteranno esplicite associazioni fra etichette e controlli dei moduli, assicurare, per tutti i controlli dei moduli che hanno etichette associate implicitamente, che l'etichetta sia posizionata correttamente.

Errore

Alla pagina Elenco Telefonico è presente un form in cui non sono presenti label associate agli input dei form.

<tr>
<td width="22%">
<p style="margin:5 10; " align="right"><b>Nome: </b>
</td>
<td width="78%">
<p style="margin:5 10; " align="right">
<input name="NOME" size="49" class="immissione" style="float: left">
</td>
</tr>

Soluzione

<tr>
<td width="22%">
<p style="margin:5 10; " align="right">
<label for="NOME"><b>Nome: </b></label>
</td>
<td width="78%">
<p style="margin:5 10; " align="right">
<input name="NOME" size="49" class="immissione" style="float: left">
</td>
</tr>

Torna a inizio pagina

Checkpoint 6.4 Per quanto riguarda script e applet, assicurarsi che i gestori di eventi siano indipendenti dai dispositivi di input.

Analisi

Nelle diverse pagine del sito, si fa uso di javascript per produrre l'apertura di finestre di pop-up, oppure per aprire menu di collegamenti.
In ogni script, i gestori di eventi usati sono dipendenti dal dispositivo.

Errore

Consideriamo il menu a sinistra presente in home page, che presenta una serie di collegamenti, ognuno rappresentato da un'immagine. Cliccata un'immagine si apre un sotto menu con una serie di link.
Sia la selezione dell'immagine, che quella di uno dei sotto link è gestita da javascript attraverso gestori di evento dipendenti dal mouse.

<span>Menu di navigazione</span>
<div id="menu1voce" class="voce" onclick="group_onclick('menu1')">
<div class="alt">Agricoltura Caccia Pesca</div><img src="images/agricoltura.gif" alt="Agricoltura Caccia Pesca" />
</div>
<div id="menu1sottovoce" class="sottovoce"><a onclick="ext(this)" href="http://www.regione.abruzzo.it/agricoltura/">
Agricoltura</a>

Soluzione

Usare "onclick" insieme a "onkeyup" o "onkeydown" o "onkeypressed", fornire insomma un meccanismo per la selezione dei collegamenti che sia ridondante.

Torna a inizio pagina

Checkpoint 4.3 Identificare il linguaggio naturale principale di un documento.

Errore

In nessuna pagina del sito abbiamo trovato nell'elemento <html> l'attributo lang per specificare la lingua del documento.

<html>...</html>

Soluzione

<html lang="it" >...</html>

Errore

In alcune pagine del sito abbiamo trovato che la lingua principale della pagina è segnalata come metadato, ma questo non è sufficiente.

<html>...
<http-equiv="Content-Language" content="it">

Soluzione

<html lang="it" >...
<http-equiv="Content-Language" content="it">

Torna a inizio pagina

Checkpoint 13.6

Analisi

Non abbiamo riscontrato, in nessuna pagina del sito, un raggruppamento dei collegamenti affini.
Spesso questi sono raggruppati attraverso l'elemento <div>, che però non è funzionale tanto quanto l'elemento <map>, soprattutto se i collegamenti sono privi dell'attributo "title".

Non abbiamo riscontrato la presenza di nessuno skip-link per saltare le barre di navigazione nelle diverse pagine del sito. Sarebbe particolarmente utile poter evitare di far pronunciare ad un lettore di schermo i link "home", "info", "mappa", "credits" in tutte le pagine che hanno lo stesso template dell'home page.
Facciamo un esempio.

Errore

Nella pagina Programmazione i link facenti parte della barra di navigazione non sono raggruppati in alcun modo, e manca la presenza di uno skip-link.

Soluzione

Strutturare il menu nel seguente modo:

<MAP title="Barra di navigazione">
<P>
[<A href="#contenuto">Vai direttamente al contenuto della pagina</A>]
[<A href="http://www.regione.abruzzo.it/">
Home Regione Abruzzo</A>]
[<A href="http://www.regione.abruzzo.it/
programmazione/popup/info.htm">Info</A>]
[<A href="search.html">Cerca</A>]
[<A href="http://www.regione.abruzzo.it/
programmazione/popup/contatti.htm">Contatti</A>]
[<A href="http://www.regione.abruzzo.it/
programmazione/popup/credits.htm">Credits</A>]
[<A href="http://www.regione.abruzzo.it/
programmazione/popup/mappa.htm">Mappa</A>]
</P>
</MAP>

e aggiungere un ancora nel contenuto centrale della pagina, rendere il link a quest'ancora non visibile (attraverso foglio di stile).

Torna a inizio pagina

Checkpoint 12.4 Associare esplicitamente le etichette ai loro controlli.

Errore

Alla pagina Elenco Telefonico è presente un form in cui non sono presenti label associate agli input dei form.

<tr>
<td width="22%">
<p style="margin:5 10; " align="right"><b>Nome: </b>
</td>
<td width="78%">
<p style="margin:5 10; " align="right">
<input name="NOME" size="49" class="immissione" style="float: left">
</td>
</tr>

Soluzione

<tr>
<td width="22%">
<p style="margin:5 10; " align="right">
<label for="NOME"><b>Nome: </b></label>
</td>
<td width="78%">
<p style="margin:5 10; " align="right">
<input name="NOME" size="49" class="immissione" style="float: left">
</td>
</tr>

Torna a inizio pagina

Checkpoint 9.4 Creare un ordine logico di tabulazione fra i collegamenti, i controlli dei moduli, e gli oggetti.

Analisi

L'ordine di percorrimento dei contenuti attraverso il tasto tab è nella maggior parte dei casi logico.
Tuttavia in alcune pagine questo non avviene, si veda l'esempio riportato nel punto di controllo 5.3 che spiega come questo sia dovuto ad una struttura tabellare delle pagine, che specifica in che ordine vengono percorsi i contenuti usando il tab e che suggerisce come correggere questa violazione.

Torna a inizio pagina

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

Analisi

Questo punto di controllo è spesso violato, a cominciare dall'home page in cui il menu di sinistra è tutto costituto da immagini, usate come etichette a dei collegamenti.
In altre pagine contenuti importanti sono stati rappresentati attraverso immagini, di seguito presentiamo una lista delle violazioni più eclatanti:

Errore

Nella pagina Servizio Tecnico è presente un'immagine che contiene un intero paragrafo di testo.

immagine che contine un paragrafo di testo

Soluzione

Non veicolare informazioni importanti esclusivamente attraverso immagini.

Errore

Nella pagina Anagrafe il nome della pagina è espresso tramite un'immagine, tra l'altro priva di attributo alt.

direzione attività produttive

Soluzione

Veicolare quest'informazione attraverso testo, possibilmente usando headings.

Errore

Nella pagina Avvocatura l'indirizzo della Struttura Speciale di Supporto Avvocatura Regionale è veicolato attraverso un'immagine, tra l'altro priva di alt.

indirizzo avvocatura regionale

Soluzione

Scrivere l'indirizzo attraverso il testo.

Torna a inizio pagina

Checkpoint 3.2 Creare documenti che siano validi rispetto alle grammatiche formali pubblicate.

Analisi

Per validare le pagine abbiamo usato il validatore del w3c .

Solo la validazione dell'home page non procurava errori nella validazione.

Di seguito presentiamo il risultato della validazione della pagina Programmazione che ha errori comuni a tutte le altre pagine analizzate.

  • Error Line 1 column 0:
    no document type declaration; implying "<!DOCTYPE HTML SYSTEM>". <html>
  • Error Line 4 column 29:
    required attribute "TYPE" not specified.<script language="JavaScript">
  • Error Line 18 column 16:
    there is no attribute "TOPMARGIN". <body topmargin="0" leftmargin="0" background="images/riga.jpg">
  • Error Line 18 column 31:
    there is no attribute "LEFTMARGIN". <body topmargin="0" leftmargin="0" background="images/riga.jpg">
  • Error Line 22 column 98:
    there is no attribute "BORDERCOLOR". ...rder-collapse: collapse" bordercolor="#111111" width="752" id="AutoNumber1"
  • Error Line 22 column 144:
    there is no attribute "HEIGHT". ... width="752" id="AutoNumber1" height="565">
  • Error Line 24 column 34:
    there is no attribute "BACKGROUND". <td height="161" background="images/Testata.jpg" width="700" colspan="3">
  • Error Line 34 column 78:
    required attribute "ALT" not specified. .../Pulsantino.gif" width="13" height="11">
  • Error Line 39 column 78:
    required attribute "ALT" not specified. .../Pulsantino.gif" width="13" height="11">
  • Error Line 44 column 78:
    required attribute "ALT" not specified. .../Pulsantino.gif" width="13" height="11">
  • Error Line 49 column 78:
    required attribute "ALT" not specified. .../Pulsantino.gif" width="13" height="11">
  • Error Line 90 column 151:
    there is no attribute "BORDERCOLOR". ...or="#FFFFCC" rowspan="2" bordercolor="#FFFFCC">
  • Error Line 129 column 72:
    required attribute "ALT" not specified. ...images/Pulsantino.gif" width="13" height="11"> </font>
  • Error Line 136 column 72:
    required attribute "ALT" not specified. ...images/Pulsantino.gif" width="13" height="11"> </font>
  • Error Line 162 column 83:
    required attribute "ALT" not specified. ...lign="right" width="122" height="141"></td>
  • Error Line 167 column 72:
    required attribute "ALT" not specified. ...ulsantino.gif" width="13" height="11"></font></a><font color="#666633" size="
  • Error Line 174 column 109:
    required attribute "ALT" not specified. ...ulsantino.gif" width="13" height="11">

Torna a inizio pagina

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

Analisi

Tutte le pagine sono associate ad un foglio di stile, ma la stragrande maggioranza dei controlli per il layout e la presentazione sono definiti all'interno dei file html.
Facciamo un esempio di codice scorretto.

Errore

<td width="728" style="border-top: 1px solid #000099; border-bottom: 1px solid #000099; vertical-align:middle; padding-left:15" align="center" height="25" bgcolor="#FFFFFF">

Soluzione

Usare un foglio di stile per separare elementi di presentazione dal contenuto vero e proprio della pagina.

Torna a inizio pagina

Checkpoint 3.5 Usare elementi di intestazione per veicolare la struttura del documento e usarli in modo conforme alle specifiche.

Analisi

Alcune pagine sono totalmente prive di heading elements, ma non riteniamo si tratti di una violazione così grave, dal momento che il testo presente nelle pagine prive di intestazioni è veramente poco, mentre invece sono numerosi i collegamenti.
Quindi, un utente che utilizzi un lettore di schermo sarà comunque in grado di saltare da un collegamento ad un altro utilizzando la "links list".

Quando invece gli heading elements sono stati usati, il loro uso è stato decisamente improprio.

Errore

Nell'home page della Regione gli elementi di intestazione sono usati in modo tale che la "Headings list" di un lettore di schermo presenta il seguente elenco di voci:

  • Regione Abruzzo: 1
  • Portale Regionale: 2
  • Informazioni sul sito: 3
  • Struttura della regione: 3
  • Servizi al cittadino: 3
  • Seleziona lo stile di visualizzazione per il sito: 3
  • Menu di navigazione: 3
  • Menu di navigazione: 3
  • News e avvisi: 3
  • Links: 3
  • Links: 3

Torna a inizio pagina

Checkpoint 7.5 Fino a quando i programmi utente non forniranno la capacità di bloccare l'auto-reindirizzamento, non usare marcatura per reindirizzare le pagine automaticamente. Piuttosto, configurare il server in modo che esegua i reindirizzamenti.

Errore

Se dalla home page cerchiamo seguiamo il collegamento "sistema statistico" sotto la voce "informatica" si aprirà la pagina Statistica che attua un redirect alla pagina Xstatistica.

<meta http-equiv="Refresh" content="4; url=http://www.regione.abruzzo.it/xstatistica">

Soluzione

Configurare il server in modo che sia questo ad eseguire i reindirizzamenti, o inserire un collegamento nella pagina che indichi il nuovo indirizzo.

Torna a inizio pagina

Checkpoint 11.2 Evitare le caratteristiche delle tecnologie W3C che sono disapprovate.

Analisi

Di seguito presentiamo l'elenco degli elementi e degli attributi html deprecati che abbiamo trovato nelle pagine del sito. In ogni pagina di solito sono presenti più ricorrenze di ogni elemento/attributo.

Errore

l'uso dell'elemento <center>, che è deprecato.

Soluzione

Usare l'elemento <div> e tramite foglio di stile esterno centrarlo come desiderato.

Errore

L'uso dell'elemento <font> che è deprecato, così come gli attributi "size", "face" e "color".

<font face="Verdana" size="1">

Soluzione

Specificare font e caratteristiche di questo attraverso il foglio di stile.

Errore

L'uso degli attributi "height", "width", "style", "bgcolor", "border-bottom-width" e "bordercolor" nell'elemento <td>.

<td height="50" width="637" style="padding-left: 20; border-bottom-style:solid; border-bottom-width:1" bgcolor="#FFFFCC" rowspan="2" bordercolor="#FFFFCC">

Soluzione

Specificare le caratteristiche della cella attraverso il foglio di stile.

Errore

L'uso dell' attributo "style" per l'elemento <span> è deprecato.

<span style="FONT-FAMILY: Verdana">

Soluzione

Specificare le caratteristiche dei font attraverso il foglio di stile.

Torna a inizio pagina

Checkpoint 13.2 Fornire metadata per aggiungere informazione di tipo semantico alle pagine e ai siti.

Analisi

Nella maggior parte delle pagine sono presenti dei metadati, come vediamo dal codice seguente:

<meta http-equiv="Content-Language" content="it">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

ma mancano metadati importanti che potrebbero essere aggiunti, come:

<meta name="description" content="Sito della Regione Abruzzo">
<meta name="author" content="Regione Abruzzo"">
<meta name="keywords" content="Regione Abruzzo, (ecc.)">

Torna a inizio pagina

Checkpoint 13.4 Usare meccanismi di navigazione in modo coerente.

Analisi

Si veda il punto di controllo 13.3.

Torna a inizio pagina

Checkpoint 9.3 Negli script, specificare gestori di evento logici piuttosto che gestori di evento dipendenti da dispositivo.

Analisi

Si veda il punto di controllo 6.4.

Torna a inizio pagina

Checkpoints whose violation has minor conseque

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

Analisi

L'elemento <acronym> non è mai stato usato, in nessuna pagina del sito.
Eppure sono molteplici gli acronimi presenti nel testo.

Di seguito presentiamo le violazioni più gravi a questa linea guida.

Errore

Nell'home page vi sono diversi acronimi il cui significato non viene spiegato.
Si tratta di una grave mancanza poichè spesso le etichette dei collegamenti sono costituite da acronimi, che se non conosciuti perdono di significato.

<a href="http://www.regione.abruzzo.it/
Avvisi_bandi/avvisi_bandi.htm"> Mobilità interna volontaria del personale regionale tra sedi diverse a seguito di graduatoria - D.G.R. n. 457 dell'8/06/2001 - Pubblicato sul B.U.R.A. supplemento n.14 del 14/09/2005. Le domande potranno essere presentate dal 15/09/2005 al 29/09/2005.</a>

Soluzione

<a href="http://www.regione.abruzzo.it/
Avvisi_bandi/avvisi_bandi.htm">
Mobilità interna volontaria del personale regionale tra sedi diverse a seguito di graduatoria -
<acronym title="Delibera della Giunta Regionale">
D.G.R.</acronym>
n. 457 dell'8/06/2001 - Pubblicato sul
<acronym title="Bollettino Ufficiale della Regione Abruzzo"
>B.U.R.A.</acronym>
supplemento n.14 del 14/09/2005. Le domande potranno essere presentate dal 15/09/2005 al 29/09/2005. </a>

Torna a inizio pagina

Checkpoint 9.5 Fornire scorciatoie da tastiera per i collegamenti importanti (compresi quelli nelle mappe immagini sul lato client), per i controlli dei moduli, e per i gruppi di controlli dei moduli.

Analisi

Gli sviluppatori non hanno previsto nemmeno una scorciatoia da tastiera in questo sito.
Sarebbe opportuno che valutassero quali collegamenti sono importanti e che associassero a questi l'attributo "accesskey" come nell'esempio sottostante.

Soluzione

<a title="home Regione Abruzzo" href=http://www.regione.abruzzo.it/ accesskey="h"> <img alt="home Regione Abruzzo" border="0" src="images/Logo_Prog46x82.gif" width="46" height="82"> </a>

Torna a inizio pagina

Checkpoint 11.3 3 Fornire agli utenti l'informazione necessaria perché possano ricevere i documenti in maniera che si adattino alle loro preferenze (per es. lingua, tipo di contenuto ecc.)

Errore

Nel codice html delle pagine non sono mai indicati il tipo di contenuto, e neanche la lingua.

Soluzione

usare "type" e "lang".

Nei fogli di stile associati alle pagine, non è stato usato "@media" per specificare quali elementi del foglio di stile applicare a quali dispositivi.

Soluzione

Sarebbe opportuno farlo per ridurre i tempi di download permettendo agli user agents di ignorare le regole non applicabili, e per ottenere una resa migliore degli aspetti grafici della pagina in dispositivi diversi.

Torna a inizio pagina

Checkpoint 14.3 Creare uno stile di presentazione coerente fra le pagine.

Analisi

Questo punto di controllo è assolutamente violato. Dall'home page del sito si aprono collegamenti a sezioni specifiche che hanno un layout di presentazione molto diverso tra loro.

In alcune pagine (come nelle molteplici "Direzione", per esempio), si può riconoscere un layout simile a quello dell'home page, ma si tratta di una minoranza di pagine.

Torna a inizio pagina

Checkpoint 10.3 Fino a quando i programmi utente (comprese le tecnologie assistive) non renderanno in modo corretto il testo affiancato, fornire un testo lineare alternativo (nella pagina attiva o in qualche altra) per tutte le tabelle che dispongono testo su colonne parallele e andando a capo.

Analisi

Come abbiamo fatto notare nel punto di controllo 5.3, anche quando ci sarebbe bisogno di linearizzare i contenuti di una tabella, manca una versione linearizzata della pagina.

Torna a inizio pagina

Checkpoint 10.4 Inserire caratteri di default come segnaposto nelle caselle per l'immissione di testo a una riga oppure a più righe.

Errore

Ogni campo di testo presente nel sito non conteneva caratteri di default. Riportiamo un esempio.

<input id="citta" type="text" name="citta" size="15"
style="background-color: #ffffff; font-family: Arial; font-size: 8pt; height: 18; width: 107"
onchange="Javascript:rgn.selectedIndex=0;
provincia.selectedIndex=0;tuttaitalia.checked=false" value="">

Soluzione

<input id="citta" type="text" name="citta" size="15"
style="background-color: #ffffff; font-family: Arial; font-size: 8pt; height: 18; width: 107" onchange="Javascript:rgn.selectedIndex=0;
provincia.selectedIndex=0;
tuttaitalia.checked=false" value="inserisci qui la città">

Torna a inizio pagina