Report Accessibilità del sito www.aeroporto.fvg.it

di Fabio Beghin, Arjuna Del Toso, Alessandro Duca

Sito visitato il: 04-02-2004

Sommario

Pagine prese in considerazione:

  1. http://www.aeroporto.fvg.it/
  2. http://www.aeroporto.fvg.it/ITA/index_ita.html
  3. http://www.aeroporto.fvg.it/ITA/html/charter_tutti.htm
  4. http://www.aeroporto.fvg.it/ITA/html/come_raggiungerci.htm
  5. http://www.aeroporto.fvg.it/ITA/html/cartinaFVG.htm
  6. http://www.aeroporto.fvg.it/ITA/html/home1_.htm
  7. http://www.aeroporto.fvg.it/ITA/html/blu.htm
  8. http://www.aeroporto.fvg.it/ITA/html/compagnie_centro.htm
  9. http://www.aeroporto.fvg.it/ITA/html/mappa_aeroporto.htm
  10. http://www.aeroporto.fvg.it/ITA/html/work_in_progress_az.htm
  11. http://www.aeroporto.fvg.it/ITA/html/intro.htm
  12. http://www.aeroporto.fvg.it/ITA/html/testalino.htm
  13. http://www.aeroporto.fvg.it/ITA/html/menu_dx.htm
  14. http://www.aeroporto.fvg.it/ITA/html/menu_sx.htm
  15. http://www.aeroporto.fvg.it/ITA/html/contatti_centro.htm

Per l'analisi del sito sono state prese in considerazione le linee guida WCAG 1.0 livello AA proposte dal W3C e si riscontrano gravi violazioni agli standard di accessibilità in ogni pagina analizzata e nella struttura stessa del sito tali da rendere il sito assolutamente non accessibile.

Problemi riscontrati

  1. Tutte le immagini sono prive dell`attributo alt e longdesc. I link veicolati dalle image-maps non sono raggiungibili con browser testuali. WCAG Priority 1 Checkpoint 1.1 - 1.2
  2. La disabilitazione dei CSS rende difficoltosa la lettura dei links che diventano di colore blu su sfondo blu. WCAG Priority 1 Checkpoint 6.1 - 2.1
  3. I frames non sono etichettati correttamente e le pagine spesso non hanno un titolo. WCAG Priority 1 Checkpoint 12.1 - 12.2
  4. La tecnologia Flash non è accessibile. WCAG Priority 1 Checkpoint 6.3 - 8.1
  5. Nel markup non ci sono indicazioni della lingua utilizzata. WCAG Priority 1 Checkpoint 4.1
  6. Mancano gli headers nelle tabelle contenenti dati. WCAG Priority 1 Checkpoint 5.1
  7. L'uso di tabelle per strutturare le pagine ne rende difficoltosa la navigazione con strumenti assistivi. WCAG Priority 2 Checkpoint 5.3
  8. Le pagine non sono HTML standard ed utilizzano CSS non conformi alle specifiche. WCAG Priority 2 Checkpoint 3.2 - 11.1
  9. Non utilizzare finestre di pop-up. WCAG Priority 2 Checkpoint 10.1

Dettagli

Punto 1

Pagine interessate: TUTTE

La mancanza dell'attributo alt nega la possibilità di fruire dell'informazione veicolata attraverso le immagini a tutti quegli utenti che non sono in grado di visualizzare le immagini stesse. Sono coinvolti perciò tutti gli utilizzatori di screen reader, display braille e browser testuali o semplicemente che abbiano scelto di non scaricare le immagini.

La sintassi dell'attributo alt è la seguente: <img src="nome.immagine" alt="testo descrittivo"> Il testo descrittivo, che viene letto dagli screen reader e visualizzato dai browser testuali, deve potersi sostituire all'immagine in modo che non vi sia una perdita di informazione nella pagina. Deve avere un senso anche fuori dal contesto di uso (testi come "logo_ditta" sono da evitare).
In caso di immagini complesse come cartine geografiche (vedi pagine 4 - 5) per cui l'attributo alt è troppo limitato bisogna usare l'attributo longdesc e finchè le tecnologie assistive non lo supporteranno pienamente è consigliabile affiancare all'immagine un "D-Link". Sintassi dell'attributo longdesc:
<img src="nome.immagine" alt="testo descrittivo" longdesc="carta_europa-LD.html"> Il file "carta_europa-LD.html" contiene una descrizione dettagliata dell'immagine, nel caso di una cartina può essere utile far capire a parole dove si trova l'aeroporto citando le distanze dai centri più importanti e dando segnalazioni sulle strade da percorrere per arrivare a destinazione. Tutte queste informazioni sono indispensabili per persone che non sono in grado di visualizzare le immagini ma sono anche utili a chi è nella condizione di vedere la cartina ma vuole avere indicazioni specifiche e dettagliate. Le lettere -LD aggiunte al file sono una proposta per aumentare la facilità di gestione dei file stessi.
Se l'immagine non produce alcuna informazione ma ha un puro scopo decorativo l'attributo alt va usato nella forma vuota: alt"".

Gli orari dei voli (pagina 6) vengono resi solo attraverso le immagini ma, in questo caso, l'uso dell'attributo alt non può migliorare la situazione perciò sarebbe opportuno ripensare la pagina in modo da visualizzare le informazioni in html semplice con l'uso appropriato di una tabella.

Nella pagina 12 (il frame superiore contenente solo il logo dell'aeroporto) sarebbe opportuno aggiungere un messaggio di benvenuto del tipo alt="Stai visitando il sito dell'aeroporto di Ronchi dei Legionari..." in modo da facilitare all'utente la comprensione di dove si trovi.

L'attributo alt deve essere applicato a tutte le immagini ed elementi grafici del sito quindi, tenendo presenti gli accorgimenti appena presentati, anche agli elementi input, applet e object.

Punto 2

Pagine interessate: TUTTE

Questo problema si presenta in quelle situazioni in cui il browser non è in grado di visualizzare i css oppure questi sono sovrascritti da regole personali dell'utente. Se si tenta la navigazione nel sito con i css disabilitati si può notare come lo sfondo blu renda difficoltosa la lettura dei links che per default sono appunto in blu.

Una possibile soluzione è di gestire lo sfondo direttamente nei fogli di stile cosicchè in caso di disabilitazione il testo apparirà con le regole dell'utente oppure come da default i links in blu e lo sfondo bianco.

Si consiglia pertanto di modificare le pagine (ad esempio la 13 e 14) eliminando gli attributi del tipo <body bgcolor="#1C5EB5"... o <table background="../../img_common/01.jpg" bgcolor="#333333"... con equivalenti regole css.

Punto 3

Pagine interessate: TUTTE

Precisando che l'utilizzo dei frames viene fortemente sconsigliato bisogna fare almeno 3 considerazioni:

  1. Vecchi browser e alcune tecnologie assistive non supportano affatto i frames e quindi è buona norma utilizzare l'elemento noframes. In pagina 1 questo elemento è utilizzato ma in maniera scorretta (<noframes><body> </body></noframes>) in quanto non fornisce nessuna indicazione ad un utente che non sia in grado visualizzarli sul come risolvere la situazione. Se proprio non è possibile farne a meno bisogna prendere in considerazione la costruzione di una pagina priva di frames il cui link venga reso disponibile all'interno dell'elemento noframe.
  2. Molte pagine (4,6,7,8,9,11,13,14,15) hanno come titolo "Untitled Document" mentre tutte le altre hanno lo stesso titolo senza nessuna variazione. Questo rende difficile all'utente capire in che punto del sito si trovi e cosa contiene quel determinato frame. Si consiglia perciò di dare un titolo possibilmente univoco ed espressivo ad ogni pagina del sito. Nella scelta dei titoli possibilmente evitare la punteggiatura a scopo grafico, il titolo di pagina 1 viene letto "due punti due punti Aeroporto..." dalle tecnologie assistive.
  3. L'attributo title serve per dare chiare indicazioni sul contenuto e sul senso del frame. In pagina 1 c'è un esempio di uso scorretto di questo attributo:
    <frame src="html_common/blank.htm" name="leftFrame" scrolling="NO" noresize>
      <frame src="index_.html" name="leftFrame" scrolling="NO" noresize>
      <frame src="html_common/blank.htm" name="leftFrame" scrolling="NO" noresize>
    <frame src="UntitledFrame-7">
    dare lo stesso nome a tre frames diversi crea sicuramente confusione nell'utente e il nome stesso scelto non dà nessuna indicazione su cosa ci sia all'interno. Siccome la pagina blank.htm non contiene nessuna informazione un titolo vuoto sarebbe più opportuno. Anche per i frames valgono le stesse considerazioni fatte per gli attributi alt e longdesc di img.

Punto 4

Pagine interessate: 5,9,11,12,15

"Flash è adatto a rappresentare informazioni visive e a offrire esperienze originali e creative, ancorché anomale, di interazione con l'utente. Dovrebbe essere usato per questo: per offrire esperienze alternative, per animare piccoli moduli di una pagina, per cartoni animati d'intrattenimento o per informazioni di natura intrinsecamente visiva...Anche nei casi riusciti, comunque, un file Flash dovrebbe essere sempre presentato come una scelta, e non come l'unica alternativa possibile."

Tratto da: http://www.usabile.it/022000.html visitato il 14/02/2004

Nelle pagine 11 e 12 l'animazione è puramente un abbellimento grafico e quindi puo' bastare l'aggiunta dell'attributo title all'interno di object. Nelle pagine 5,9 e 15 Flash è utilizzato per veicolare informazioni importanti come la piantina dell'aeroporto, come raggiungere l'aeroporto stesso e, nella pagina 15, serve a mostrare due campi di inserimento dati per iscriversi alla mailing-list. Non volendo eliminare queste animazioni si rende necessaria comunque la creazione di pagine alternative che permettano ad utenti sprovvisti dell'apposito plug-in di portare a termine l'obiettivo prefissato (capire come raggiungere l'aeroporto oppure iscriversi alla mailing-list).

Punto 5

Pagine interessate: TUTTE

In ogni pagina si deve specificare la lingua nell'elemento html mediante l'attributo lang e/o xml:lang a seconda che si scriva in HTML oppure in XHTML. Ecco un esempio per un documento in XHTML 1.0 : <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">Affinchè uno screen reader possa pronunciare correttamente parole in lingue diverse da quella principale è bene indicare esplicitamente di che lingua si tratta come nel seguente esempio:
<span lang="en" xml:lang="en">screen reader</span>.

Punto 6

Pagina interessata: 3

Affinchè una tabella sia facilmente consultabile è necessario identificare con chiarezza le celle che contengono le intestazioni di linee e colonne. Siccome la tabella in considerazione è molto semplice tutto questo si ottiene facilmente utilizzando th ed headers. Si può rivelare molto utile anche l'uso di caption e summary per fornire informazioni sul contenuto della tabella.

Parte della tabella di pagina 3 resa accessibile
Giorno Periodo Destinazione
DOM 01/01 - 31/12 SHARM EL SHEIKH

Ecco il codice:


<table border="1">
<summary="Esempio di tabella accessibile da confrontare con quella di pagina 3" />
<caption>Parte della tabella di pagina 3 resa accessibile</caption>
<tr>
<th id="giorno">Giorno</th>
<th id="periodo">Periodo</th>
<th id="destinazione">Destinazione</th>
</tr>
<tr>
<td headers="giorno"><abbr title="domenica">DOM</abbr></td>
<td headers="periodo">01/01 - 31/12</td>
<td headers="destinazione">SHARM EL SHEIKH</td>
</tr>
</table>

Ricordarsi che ogni modifica di tipo grafico (colore di sfondo, colore del testo, ecc.) va resa con opportune regole CSS.

Punto 7

Pagine interessate: TUTTE

Le tabelle non sono state create a scopo di impaginazione grafica ma per fornire una struttura per presentare dati. Per questo motivo non vanno usate a scopo di layout. La soluzione ottimale è di riscrivere le pagine utilizzando div e regole CSS con cui è possibile, tra l'altro, mantenere lo stesso aspetto grafico attuale.

Punto 8

Pagine interessate: TUTTE

L'aderenza agli standard internazionali del codice ha molteplici vantaggi di cui tener conto. In primo luogo, per siti di utilità pubblica, è la legge ad imporlo (per ora solo in alcune nazioni come l'Australia ma niente vieta che anche in Italia si possa arrivare a delle norme in tal senso). Secondo, un codice conforme agli standard ne assicura una maggiore longevità e terzo, avere codice "che valida" ne permette una sorta di indipendenza dal mezzo con cui viene visualizzato poichè è compito degli sviluppatori di software produrre browsers che visualizzino correttamente codice standard.

Punto 9

Pagina interessata: 4

In questa pagina c'è un link che apre pagina 5 in una nuova finestra. Tutto ciò è sconsigliato sia dal punto di vista dell'accessibilità che dell'usabilità perchè può creare disorientamento nell'utente (che potrebbe non accorgersi di essere in una nuova finestra) oppure, in presenza di un browser in cui le finestre di pop-up sono disabilitate, il" click" potrebbe non portare alcun effetto.


2004 Beghin - Del Toso - Duca