Laboratorio avanzato di Progettazione Siti Web

Autori: Bove Simone e Damiani Andrea
simonebove@gmail.com, andriy85@gmail.com

Sei in: Home [h] sovrasezione di conformitá alla Legge Stanca del sito KLM

Valutazione della conformità alla Legge Stanca del sito KLM

Sommario

[i] Introduzione
[p] Pagine su cui è stata verificata la conformitá
[s] Software utilizzato
[v] Accessibilità delle pagine analizzate
[c] Conclusioni

Introduzione

La Valutazione di conformità è stata svolta sul sito della compagnia KLM, www.alitalia.it e si basa sui requisiti previsti dalla Legge Stanca.

Questo metodo di valutazione permette di verificare l'accessibilità tramite 22 requisiti, che un sito appartenente ad enti pubblici o enti privati che erogano servizi pubblici deve possedere per raggiungere un elevato livello di qualità dal punto di vista dell'accessibilità.

In questa valutazione, si sono verificati in ogni pagina i requisiti uno alla volta ed è stato indicato per ciascuno di essi se è stato soddisfatto o violato all'interno del sito. Se il requisito è stato violato viene indicato un livello di gravità del problema riscontrato che può essere: basso, medio, alto.

[t] Torna al sommario

Pagine su cui è stata verificata la conformitá

Questo é l'elenco delle pagine controllate:

[t] Torna al sommario

Software utilizzato

[t] Torna al sommario

Accessibilità delle pagine analizzate

Priorità 1

1. VALIDITA' DEL CODICE
Realizzare le pagine e gli oggetti al loro interno utilizzando tecnologie definite da grammatiche formali pubblicate nelle versioni più recenti disponibili quando sono supportate dai programmi utente. Utilizzare elementi ed attributi in modo conforme alle specifiche, rispettandone l'aspetto semantico.

Il codice analizzato delle pagine sotto esame, risulta pieno di errori, e nessuna pagina è valida. Gli errori vanno dalla mancanza di attributi nei vari tag, ad errori sintattici.
I principali errori rinscontrati sono la mancanza dell'attributo "alt" nelle immagini

/www.skyteam.com/IT/" target="_blank">

hape="rect" coords="0,0,185,47" href="/travel/it_it/">

com/IT/" shape="rect" target="_blank">

Sono presenti anche errori sintattici come ad esempio la scrittura di molti <br/> in modo errato

Choose country:<br>


ed in seguito

…iv id="remember"><input checked="true" name="remember" type="checkbox">Rememb

all'interno della tag <input> l'attributo "checked" che ha assunto valore true non rispettando la validazione.
Inoltre come possiamo analizzare nella pagina della prenotazione voli, notiamo che le tag meta non sono chiuse correttamente:

<meta name="ContentType" content="B2B">

<meta name="Owner" content="Cygnific">

…stomers - Staying at home relatives">

Possibili soluzioni:
Correggere le tag chiuse in modo errato, come appunto i <br/> e le tag <meta />. Inoltre da inserire nelle tag <img> gli attributi alt corretti per permettere ad utenti che utilizzano lettori di schermo di poter fruire nel miglior modo dell'informazione del sito e delle sue funzionalità. Altro aspetto importante è il mancato uso della corretta sintassi di alcuni attributi come ad esempio l'attributo checked.
La violazione del requisito risulta essere basso, perchè le violazioni presenti sono per la maggior parte sintattiche e facilmente corregibili e non procurano prolemi importanti a persone diversamente abili

Livello gravità: BASSO

[t] Torna al sommario

2. NO FRAME
Non è consentito l'uso dei frame nella realizzazione di nuovi siti

All'interno del sito non sono presenti frame.

Risultato analisi: SODDISFATTO

[t] Torna al sommario

3. ALTERNATIVE TESTUALI
Fornire una alternativa testuale equivalente per ogni oggetto non di testo presente in una pagina e garantire che quando il contenuto non testuale di un oggetto cambia dinamicamente vengano aggiornati anche i relativi contenuti equivalenti predisposti; l'alternativa testuale equivalente di un oggetto non testuale deve essere commisurata alla funzione esercitata dall'oggetto originale nello specifico contesto.

Nel sito non viene rispettato del tutto questo punto in quanto la maggior parte delle immagini vengono specificate correttamente con un attributo "alt" corretto che spiega l'immagine in esame in modo esaustivo, ma alcune immagini funzionali come il calendiario, con il quale si può cercare la data più adatta per il proprio volo, presenta un alt vuoto:

Immagine Calendario

<img src="/travel/it_it/images/calendar_tcm108-10340.gif" alt="" id="calret" />

Inoltre le immagini che hanno una funzione decorativa, non presentano nessun alt:

Avviso bagagli Avviso Viaggi

<img src="/travel/it_it/images/baggage_warning_tcm108-57767.gif"/>

<img src="/travel/it_it/images/arrow_blue_tcm108-57766.gif" width="7" height="7" />

Possibili soluzioni:
Aggiungere anche alle immagini decorative un attributo alt="" , in seguito alle immagini come quelle citate nell'esempio qui sopra (bagagli e news viaggi) aggiungere un alt del tipo alt="avviso bagagli".
Inoltre è presente l'immagine del calendario che ha una funzione importante, quella di visualizzare all'utente i possibili giorni di andata e ritorno da poter selezionare, in assenza di alt l'utente non può sfruttarla nel miglior modo. Si può quindi risolvere aggiungendo un alt="Immagine Calendario".
Anche in questo caso, gli errori non sono così gravi da compromettere la navigazione ad un utente disabile, ma vanno svolti alcuni accorgimenti per correggere il codice.

Livello gravità: BASSO

[t] Torna al sommario

4. COLORE
Garantire che tutti gli elementi informativi e tutte le funzionalità siano disponibili anche in assenza del particolare colore utilizzato per presentarli nella pagina.

I colori utilizzati sono principalmente colori freddi con varie tonalità di azzurro e blu. Lasciando in bianco e nero la pagina, riusciamo a capire in ogni caso tutti i link e le immagini senza alcun problema.

Risultato analisi: SODDISFATTO

[t] Torna al sommario

5. SCRITTE LAMPEGGIANTI
Evitare oggetti e scritte lampeggianti o in movimento le cui frequenze di intermittenza possano provocare disturbi da epilessia fotosensibile o disturbi della concentrazione, ovvero possano causare il malfunzionamento delle tecnologie assistive utilizzate; qualora esigenze informative richiedano comunque il loro utilizzo, avvertire l'utente del possibile rischio prima di presentarli e predisporre metodi che consentano di evitare tali elementi.

Non sono presenti scritte lampeggianti all'interno delle pagine analizzate

Risultato analisi: NON VALUTABILE

[t] Torna al sommario

6. CONTRASTO
Garantire che siano sempre distinguibili il contenuto informativo (foreground) e lo sfondo (background), ricorrendo a un sufficiente contrasto (nel caso del testo) o a differenti livelli sonori (in caso di parlato con sottofondo musicale); evitare di presentare testi in forma di immagini.

In questo caso, visto che i colori sono costituiti principalmente da varie tonalità di azzurro e blu, analizzandole si nota che il contrasto non basta a creare un sufficiente contrasto tra contenuto infrmativo e lo sfondo, come possiamo vedere dal menu in alto:

Esempio contrasto

oppure dalla scritta

Esempio contrasto

e soprattutto la mancanza di contrasto su rollover nel menu principale:

Esempio contrasto

Possibili soluzioni:
Rimedi possibili a questo problema sono correggere i colori di alcuni punti della pagina al fine di raggiungere i parametri minimi consentiti dalla Legge Stanca.

E' un problema che però ha una gravità seria in quanto l'insufficienza del contrasto fra background e foreground avviene in parti indispensabili per la fruizione del sito, come il menu principale ad esempio, e la prenotazione dei voli. Diventa quindi impraticabile per utenti con deficit visivi.

Livello gravità: ALTO

[t] Torna al sommario

7 / 8 MAPPE IMMAGINE
Utilizzare mappe immagine sensibili di tipo lato client piuttosto che lato server, salvo il caso in cui le zone sensibili non possano essere definite con una delle forme geometriche predefinite indicate nella DTD adottata.

All'interno delle pagine analizzate non troviamo mappe immagine lato server, ma bensì alcune mappe immagine lato client. Ad esempio troviamo:

<map name="klmlogo"> <area shape="rect" coords="0,0,185,47" href="/travel/it_it/"></area> <area shape="rect" coords="185,0,220,47" href="http://www.skyteam.com/IT/" target="_blank"></area> </map>

<map name="nwalogo"> <area shape="rect" coords="0,0,50,27" href="http://www.nwa.com" target="_blank" ></area> <area shape="rect" coords="50,0,73,27" href="http://www.skyteam.com/IT/" target="_blank"></area>

Possibili soluzioni:
Una possibile miglioria sarebbe utilizzare questo codice:

<OBJECT data="klmlogo.gif" type="image/gif" usemap="#klmlogo"> <P>Mappa immagine logo KLM <p> </OBJECT>

<map name="klmlogo"> <area shape="rect" coords="0,0,185,47" href="/travel/it_it/"></area> <area shape="rect" coords="185,0,220,47" href="http://www.skyteam.com/IT/" target="_blank"></area> </map>

<OBJECT data="nwalogo.gif" type="image/gif" usemap="#nwalogo"> <P>Mappa immagine logo NWA <p> </OBJECT>

<map name="nwalogo"> <area shape="rect" coords="0,0,50,27" href="http://www.nwa.com" target="_blank" ></area> <area shape="rect" coords="50,0,73,27" href="http://www.skyteam.com/IT/" target="_blank"></area>

Livello gravità: BASSO

[t] Torna al sommario

9. TABELLE DATI
Per le tabelle dati usare gli elementi (marcatori) e gli attributi previsti dalla DTD adottata per descrivere i contenuti e identificare le intestazioni di righe e colonne.

Nelle pagine analizzate troviamo un unica tabella dati:

<div class="table">
<table border="0" cellpadding="0" cellspacing="0"><caption>Franchigia di bagaglio</caption>
<tr>
<td>&nbsp;</td>
<td><strong>Sistema a peso</strong></td>
<td class="last"><strong>Sistema a collo</strong></td>
</tr>
<tr class="two">
<td><strong>Classe Economy</strong></td>
<td>20 kg (44 lbs)</td>
<td class="last">2 colli per persona max. 23 kg (50 lbs)<br>
max. 158 cm (l x p x a)&nbsp;</td>
</tr>
<tr class="one">
<td><strong>Business class</strong></td>
<td>30 kg (66 lbs)</td>
<td class="last">2 colli per persona max. 32 kg (70 lbs)<br> max. 158 cm (l x p x a)</td>
</tr>
<tr class="two">
<td><strong>Bagaglio extra per soci Flying Blue</strong></td>
<td>Silver: +5 kg (11 lbs)</td>
<td class="last">N/D</td>
</tr>
<tr class="one">
<td>&nbsp;</td>
<td>Gold: +10 kg (22 lbs)</td>
<td class="last">N/D</td>
</tr>
<tr class="two">
<td>&nbsp;</td>
<td>Platinum: + 20 kg (44 lbs) + uno dei seguenti articoli sportivi fino ad un massimo di 20 kg: sacca da golf, attrezzatura subacquea, sci, snowboard</td>
<td class="last">N/D</td>
</tr>
</table>

Come possiamo notare in questa tabella non vengono usati gli elementi (marcatori) e gli attributi previsti per descrivere i contenuti e identificare le intestazioni di righe e colonne.

Possibili soluzioni:

<table border="0" cellpadding="0" cellspacing="0" summary="Franchigia di bagaglio"><caption>Franchigia di bagaglio</caption>
<tbody>
<tr>
<th scope="col" colspan="2"><strong>Sistema a peso</strong></th>
<th scope="col"><strong>Sistema a collo</strong></th>
</tr>
<tr>
<td scope="row"><strong>Classe Economy</strong></td>
<td>20 kg (44 lbs)</td>
<td>2 colli per persona max. 23 kg (50 lbs)<br>
max. 158 cm (l x p x a)&nbsp;</td>
</tr>
<tr>
<td scope="row"><strong>Business class</strong></td>
<td>30 kg (66 lbs)</td>
<td>2 colli per persona max. 32 kg (70 lbs)<br> max. 158 cm (l x p x a)</td>
</tr>
<tr>
<td scope="row"><strong>Bagaglio extra per soci Flying Blue</strong></td>
<td>Silver: +5 kg (11 lbs)</td>
<td>N/D</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>Gold: +10 kg (22 lbs)</td>
<td>N/D</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>Platinum: + 20 kg (44 lbs) + uno dei seguenti articoli sportivi fino ad un massimo di 20 kg: sacca da golf, attrezzatura subacquea, sci, snowboard</td>
<td>N/D</td>
</tr>
</tbody>
</table>

È stato inserito l'attributo "summary" al tag <table> per far diventare la tabella autoesplicativa; è stata inserita il tag <caption> per dare un titolo alla tabella ed è stato anche inserito l'attributo "scope" per associare i <th> ai relativi <td>; Inoltre sono stati inseriti i colspan="" per poter unire due colonne in una.

Livello gravità: BASSO

[t] Torna al sommario

10. TABELLE DATI 2
Per le tabelle dati usare gli elementi (marcatori) e gli attributi previsti dalla DTD adottata per associare le celle di dati e le celle di intestazione che hanno due o più livelli logici di intestazione di righe o colonne.

Non sono presenti tabelle dati di questo tipo all'interno del sito

Risultato analisi: NON VALUTABILE

[t] Torna al sommario

11. FOGLI DI STILE
Usare i fogli di stile per controllare la presentazione dei contenuti e organizzare le pagine in modo che possano essere lette anche quando i fogli di stile siano disabilitati o non supportati.

pagina iniziale KLM senza css

Le pagine analizzate in assenza di css presentano notevoli problemi di visualizzazione, anche se è stato diviso correttamente il ruolo di presentazione tramite css e contenuto tramite html.
Infatti in un solo episodio si nota la presenza di una immagine le cui grandezze sono definite all'interno della pagina html senza sfruttare le proprietà del foglio di stile:

<img src="/travel/it_it/images/arrow_blue_tcm108-57766.gif" width="7" height="7" />

Nel sito però si può notare la presenza sporadica di tag di intestazione come <h1></h1>, <h2></h2>, <h3></h3>, di elenchi ordinati o non ordinati <ol></ol>, <ul></ul>, <li></li> o di elenchi di definizione <dl></dl>, <dt></dt>, <dd></dd>.
Un corretto uso delle tag di intestazioni e degli elenchi si può notare nella pagina "franchigia per bagaglio" dove possiamo notare che la struttura anche senza foglio di stile viene presentata in modo ottimale, anche se quando con il mouse si seleziona la voce "prenota volo", la parte di pagina che scende da quel punto va a coprire la parte di testo già presente andando cosi a compromettere l'efficacia.

Possibili soluzioni:
Utilizzare nel miglior modo le tag di intestazione e di elenchi per poter presentare la pagina fruibile anche in mancanza del foglio di stile, ed inoltre nel caso dell'immagine usare:

<div class="dimensione_img"><img src="/travel/it_it/images/arrow_blue_tcm108-57766.gif" width="7" height="7" /></div>

CSS:
.dimensione_img {width:7px; height:7px;}

Livello gravità: ALTO

[t] Torna al sommario

12. LIQUID LAYOUT
La presentazione e i contenuti testuali di una pagina devono potersi adattare alle dimensioni della finestra del browser utilizzata dall'utente senza sovrapposizione degli oggetti presenti o perdita di informazioni tali da rendere incomprensibile il contenuto, anche in caso di ridimensionamento, ingrandimento o riduzione dell'area di visualizzazione o dei caratteri rispetto ai valori predefiniti di tali parametri.

pagina iniziale KLM ingrandita

Questo è quello che possiamo vedere ingrandendo la pagina con Mozilla Firefox, fruibilità totalmente compromessa. Con Internet Explorer 6, la pagina invece risulta di dimensioni fisse, non ridimensionabile.

Possibili soluzioni:
Per questo problema la soluzione primaria è quella di cambiare il tipo di lunghezze nel file CSS, portandolo quindi dalle lunghezze fisse (pixel), a lunghezze relative (em) o percentuali (%). Questo punto crea un problema di certo non di poco conto, in quanto la navigazione per persone disabili o con deficit percettivi risulterebbe totalmente compromessa.

Livello gravità: ALTO

[t] Torna al sommario

13. TABELLE LAYOUT
In caso di utilizzo di tabelle a scopo di impaginazione, garantire che il contenuto della tabella sia comprensibile anche quando questa viene letta in modo linearizzato e utilizzare gli elementi e gli attributi di una tabella rispettandone il valore semantico definito nella specifica del linguaggio a marcatori utilizzato.

tabella impaginazione klm

Nel sito viene usata solo questa tabella per impaginare due link del menù. Vengono correttamente evitati gli attributi Summary, th e Headers per questa tabella.

Risultato analisi: SODDISFATTO

[t] Torna al sommario

14. FORM
Nei moduli (form), associare in maniera esplicita le etichette ai rispettivi controlli, posizionandole in modo che sia agevolata la compilazione dei campi da parte di chi utilizza le tecnologie assistive.

<form name="frmOtherKLMsites" id="frmOtherKLMsites" action="" method="post">
<select name="otherKLMsites" id="otherKLMsites">
<option value="#|">Altri siti KLM</option>
<option value="http://www.klm.com/travel/nl_nl/redirect.html?http://www.afklcargo.com|New window">KLM Cargo</option>
<option value="http://www.klm.com/travel/nl_nl/redirect.html?http://www.klm.com/travel/corporate_en/corporate.htm|New window">KLM Corporate</option>
<option value="http://www.klm.com/travel/nl_nl/redirect.html?http://www.klmcityhopper.nl/e-charter/index_english.htm|New window">KLM Cityhopper</option>
<option value="http://www.klm.com/travel/nl_nl/redirect.html?http://www.klm.com/corporate/jobs/en/|New window">KLM Jobsite</option>
<option value="http://www.klm.com/travel/nl_nl/redirect.html?www.klm.com/aircraftservices|New window">KLM Aircraft Services </option>
<option value="http://www.klm.com/travel/nl_nl/redirect.html?http://www.systemsservices.klm.com/|New window">KLM Systems Services</option>
<option value="http://www.klm.com/travel/nl_nl/redirect.html?http://airfranceindustries.airfrance.com/en/home/home.htm|New window">KLM Engineering &amp; Maintenance</option>
<option value="http://www.klm.com/travel/nl_nl/redirect.html?http://www.klmclubafrica.com/|New window">KLM Club Africa</option>
<option value="http://www.klm.com/travel/nl_nl/redirect.html?http://clubchina.klm.com/|New window">KLM Club China</option>
<option value="http://www.klm.com/travel/nl_nl/redirect.html?http://www.fbgolfclub.com/|New window">Flying Blue Golf Club</option>
</select>
</form>

<form name="frmDestinations" action="/travel/it_it/apps/ebt/ebt_home.htm" method="post" id="frmDestinations">
<select name="dest_country" id="dest_country">
<option value="">Select a country</option> </select><br />
<select name="dest_airport" id="dest_airport">
</select><br />
<span class="btnlblue">
<span><a href="#" title="" id="sel">Select</a></span>
</span>
</form>

Queste sono due delle form che troviamo nella homepage del sito, entrambe però non sono accessibili, in quanto mancano le relative etichette.

Possibili soluzioni:
Una soluzione a queste due form può essere questa

<form name="frmOtherKLMsites" id="frmOtherKLMsites" action="" method="post">
<p><label for="otherKLMsites">Altri siti KLM </label> <select name="otherKLMsites" id="otherKLMsites">
<option value="#|">Altri siti KLM</option>
<option value="http://www.klm.com/travel/nl_nl/redirect.html?http://www.afklcargo.com|New window">KLM Cargo</option>
<option value="http://www.klm.com/travel/nl_nl/redirect.html?http://www.klm.com/travel/corporate_en/corporate.htm|New window">KLM Corporate</option>
<option value="http://www.klm.com/travel/nl_nl/redirect.html?http://www.klmcityhopper.nl/e-charter/index_english.htm|New window">KLM Cityhopper</option>
<option value="http://www.klm.com/travel/nl_nl/redirect.html?http://www.klm.com/corporate/jobs/en/|New window">KLM Jobsite</option>
<option value="http://www.klm.com/travel/nl_nl/redirect.html?www.klm.com/aircraftservices|New window">KLM Aircraft Services </option>
<option value="http://www.klm.com/travel/nl_nl/redirect.html?http://www.systemsservices.klm.com/|New window">KLM Systems Services</option>
<option value="http://www.klm.com/travel/nl_nl/redirect.html?http://airfranceindustries.airfrance.com/en/home/home.htm|New window">KLM Engineering &amp; Maintenance</option>
<option value="http://www.klm.com/travel/nl_nl/redirect.html?http://www.klmclubafrica.com/|New window">KLM Club Africa</option>
<option value="http://www.klm.com/travel/nl_nl/redirect.html?http://clubchina.klm.com/|New window">KLM Club China</option>
<option value="http://www.klm.com/travel/nl_nl/redirect.html?http://www.fbgolfclub.com/|New window">Flying Blue Golf Club</option>
</select>
<input type="button" name="Bottone1" value="Vai" onclick="MM_jumpMenuGo('menuKLM','parent',0)" onkeypress="MM_jumpMenuGo('menuKLM','parent',0)"/>
</p>
</form>

<form name="frmDestinations" action="/travel/it_it/apps/ebt/ebt_home.htm" method="post" id="frmDestinations">
<p><label for="dest_country">seleziona destinazione </label><select name="dest_country" id="dest_country">
...
</select><br />
<input type="button" name="Bottone2" value="Vai" onclick="MM_jumpMenuGo('menuKLM2','parent',0)" onkeypress="MM_jumpMenuGo('menuKLM2','parent',0)"/>
...
</p>
</form>

La violazione risulta grave in quanto non permette ad utenti disabili di fruire dei servizi centrali del sito in modo corretto.

Livello gravità: ALTO

[t] Torna al sommario

15. SCRIPT, APPLET..
Garantire che le pagine siano utilizzabili quando script, applet, o altri oggetti di programmazione sono disabilitati oppure non supportati; ove ciò non sia possibile fornire una spiegazione testuale della funzionalità svolta e garantire una alternativa testuale equivalente, in modo analogo a quanto indicato nel requisito n. 3.

In questo caso disabilitando Javascript, la navigabilità del sito è compromessa del tutto, in quanto non si può accedere a tutte le risorse che il sito mette a disposizione. Il menù principale infatti è interamente realizato tramite javascript con menu a tendina, la quale non viene resa in forma testuale nel caso il javascript sia disabilitato.

menu jsp KLM

Possibili soluzioni:
Rendere il menu fruibile anche senza il javascript, tramite versione testo nel caso fosse disabilitato il javascript o tramite l'elemento <noscript>

Livello gravità: ALTO

[t] Torna al sommario

16. EVENTI
Garantire che i gestori di eventi che attivano script, applet o altri oggetti di programmazione o che possiedono una propria specifica interfaccia, siano indipendenti da uno specifico dispositivo di input.

Nel sito sono presenti:

<a href="#" onclick="showCalendar('dep', 'Data di partenza');">

<a href="#" onclick="showCalendar('ret', 'Data di ritorno');">

<div id="close"><a href="#" onclick="closeCalendar();">&nbsp;</a></div>

Possibili soluzioni:
sostituire onclick con onKeyPress che a differenza del primo gestisce l'evento indipendentemente dal dispositivo

<a href="#" onKeyPress="showCalendar('dep', 'Data di partenza');">

<a href="#" onKeyPress="showCalendar('ret', 'Data di ritorno');">

<div id="close"><a href="#" onKeyPress="closeCalendar();">&nbsp;</a></div>

Questa violazione non è molto grave in quanto le parti coinvolte non sono fondamentali per l'utente in quanto riguardano principalmente il calendario; la funzione del calendario si può comunque raggiungere anche in sua assenza grazie al form apposito

Livello gravità: BASSO

[t] Torna al sommario

17. SCRIPT, APPLET, PDF...
Garantire che le funzionalità e le informazioni veicolate per mezzo di oggetti di programmazione, oggetti che utilizzano tecnologie non definite da grammatiche formali pubblicate, script e applet siano direttamente accessibili.

Come già detto anche in precedenza il menù principale del sito è realizzato tramite javascript, senza però permettere la visualizzazione del menù stesso in assenza di esso.

Possibili soluzioni:
l'uso del tag <noscript> permetterebbe la visualizzazione del menù sotto esame anche con il javascript disattivato, inoltre trasformare tutti gli eventi dipendenti solamente dal mouse come onClick="" con un evento che permetta l'interazione anche con la tastiera come onKeyPress="".
Nel nostro caso la violazione è critica in quanto non adottando questi tipi di eventi la navigazione del sito da parte di utenti disabili risulta compromessa.

Livello gravità: ALTO

[t] Torna al sommario

18. APPLICAZIONI MULTIMEDIALI
Nel caso in cui un filmato o una presentazione multimediale siano indispensabili per la completezza dell'informazione fornita o del servizio erogato, predisporre una alternativa testuale equivalente, sincronizzata in forma di sotto-titolazione o di descrizione vocale, oppure fornire un riassunto o una semplice etichetta per ciascun elemento video o multimediale tenendo conto del livello di importanza e delle difficoltà di realizzazione nel caso di trasmissioni in tempo reale.

Non sono presenti filmati o presentazioni multimediali all'interno del sito.

Risultato analisi: NON VALUTABILE

[t] Torna al sommario

19. LINK NON AMBIGUI
Rendere chiara la destinazione di ciascun collegamento ipertestuale (link) con testi significativi anche se letti indipendentemente dal proprio contesto oppure associare ai collegamenti testi alternativi che possiedano analoghe caratteristiche esplicative, nonché prevedere meccanismi che consentano di evitare la lettura ripetitiva di sequenze di collegamenti comuni a più pagine.

All'interno del sito troviamo molti link, ad esempio:

<div id="help"><a href="javascript:void(window.open('/travel/it_it/travel_tools/book_a_flight/ebt_help/help_classes.htm', 'win', 'width=630,height=390,toolbar=no,scrollbars=yes,location=no,menubar=no'))" title="">&rsaquo; Aiuto </a>

<a href="javascript:void(window.open('/travel/it_it/travel_tools/book_a_flight/ebt_help/ebt_5-15yrs_help.htm', 'win', 'width=630,height=390,toolbar=no,scrollbars=yes,location=no,menubar=no'))" title="">&rsaquo; 5 -14 anni?</a>

<li><a href="/travel/it_it/apps/ebt/ebt_home_prefill.htm?campaignId=&origin=&destination=ams&noFrameSet=yes&" title="Book flights">Amsterdam</a><span>da&nbsp;<strong>€143 a/r</strong></span></li>
<li><a href="/travel/it_it/apps/ebt/ebt_home_prefill.htm?campaignId=&origin=&destination=lhr&noFrameSet=yes&" title="Book flights">Londra</a><span>da&nbsp;<strong>€265 a/r</strong></span></li>
<li><a href="/travel/it_it/apps/ebt/ebt_home_prefill.htm?campaignId=&origin=&destination=edi&noFrameSet=yes&" title="Book flights">Edinburgo</a><span>da&nbsp;<strong>€291 a/r</strong></span></li>
<li><a href="/travel/it_it/apps/ebt/ebt_home_prefill.htm?campaignId=&origin=&destination=cph&noFrameSet=yes&" title="Book flights">Copenhagen</a><span>da&nbsp;<strong>€307 a/r</strong></span></li>
<li><a href="/travel/it_it/apps/ebt/ebt_home_prefill.htm?campaignId=&origin=&destination=arn&noFrameSet=yes&" title="Book flights">Stoccolma</a><span>da&nbsp;<strong>€308 a/r</strong></span></li>
<li><a href="/travel/it_it/apps/ebt/ebt_home_prefill.htm?campaignId=&origin=&destination=rix&noFrameSet=yes&" title="Book flights">Riga</a><span>da&nbsp;<strong>€343 a/r</strong></span></li>

Analizzando questo codice possiamo notare come nei primi due casi l'attributo title è presente ma vuoto, non dando nessun aiuto all'utente disabile che non viene informato sulla destinazione e sul contenuto del link.
Inoltre nel terzo esempio notiamo come venga ripetuto lo stesso attributo title="" per tutti gli elementi, non dando quindi una spiegazione esaustiva sul contenuto di ciasciun link.

Possibili soluzioni:
Aggiungere ad ogni collegamento ipertestuale un attributo title che possa spiegare esaustivamente il suo funzionamento e contenuto, evitando inoltre di ripeterlo nello stesso modo con altri link, cercando di specificarne uno ad uno in modo adeguato, aiutando cosi l'utente nella navigazione nel miglior modo possibile.

Livello gravità: MEDIO

[t] Torna al sommario

20. TEMPORIZZAZIONI
Nel caso che per la fruizione del servizio erogato in una pagina è previsto un intervallo di tempo predefinito entro il quale eseguire determinate azioni, è necessario avvisare esplicitamente l'utente, indicando il tempo massimo consentito e le alternative per fruire del servizio stesso.

Avviso KLM
 altroAvviso  KLM

Questi sono due screens di due momenti di attesa in cui si va incontro quando si vuole prenotare un viaggio, il primo viene presentato subito dopo la selezione di una stazione di partenza e di arrivo e, come possiamo vedere, non mostra nessuna informazione sui tempi di attesa per l'utente. Stessa cosa anche per la seconda immagine che si incontra nell'inserimento dei dati; si nota quindi la mancanza di feedback tra il sito e l'utente.

Possibili soluzioni:
Inserire un campo "reverse-counter" nell'applicazione che gestisce l'avviso di attesa, che quindi possa visualizzare all'utente il tempo rimanente all'operazione.

Livello gravità: BASSA

[t] Torna al sommario

21. LINK DISTANTI
Rendere selezionabili e attivabili tramite comandi da tastiere o tecnologie in emulazione di tastiera o tramite sistemi di puntamento diversi dal mouse i collegamenti presenti in una pagina; per facilitare la selezione e l'attivazione dei collegamenti presenti in una pagina è necessario garantire che la distanza verticale di liste di link e la spaziatura orizzontale tra link consecutivi sia di almeno 0,5 em, le distanze orizzontale e verticale tra i pulsanti di un modulo sia di almeno 0,5 em e che le dimensioni dei pulsanti in un modulo siano tali da rendere chiaramente leggibile l'etichetta in essi contenuta.

Come prima cosa nel sito non sono presenti acceskey ed in seguito il sito basato su un menu in javascript, dovrebbe permettere all'utente anche di interagire tramite tastiera, ma l'attributo onClick="" limita tutto questo, rendendo impossibile la navigazione con solo tastiera.
Inoltre pulsanti importanti come "cerca" e "login" a nostro parere dovrebbero essere scritti in maniera piu visibile.

pulsante cerca KLM
pulsante login KLM

Possibili soluzioni:
le soluzioni primarie sono quelle di provvedere al cambiamento del gestore degli eventi onClick="" con onKeyPress="" e al miglioramento dei due pulsanti.

Livello gravità: ALTO

[t] Torna al sommario

22. PAGINE EQUIVALENTI
Per le pagine di siti esistenti che non possano rispettare i suelencati requisiti (pagine non accessibili), in sede di prima applicazione, fornire il collegamento a una pagina conforme a tali requisiti, recante informazioni e funzionalità equivalenti a quelle della pagina non accessibile ed aggiornata con la stessa frequenza, evitando la creazione di pagine di solo testo; il collegamento alla pagina conforme deve essere proposto in modo evidente all'inizio della pagina non accessibile.

Come analizzato nei vari punti, il sito non è conforme a molti dei punti della legge Stanca e non presenta neanche una versione accessibile.

Possibili soluzioni:
Creare un link che porti ad una versione accessibile del sito, aggiornata nello stesso modo in cui viene aggiornato il sito in versione normale, e che magari mantenga la stessa base grafica, per permettere all'utente di non trovarsi a disagio le prime volte che navighi nella versione accessibile.

Livello gravità: MEDIO

[t] Torna al sommario

Conclusioni

Questo sito viola molti punti della legge Stanca mostrando nell'uso non corretto del javascript il suo punto debole, in quanto in sua assenza la fruibilità del sito risulta totalmente compromessa. Inoltre è da rivedere l'uso dei colori in quanto nel caso utenti con deficit visivi usufruissero del sito, troverebbero notevoli problemi causati dall'insufficienza di contrasto fra scritta e sfondo. Alt e title delle immagini e dei link ipertestuali vanno rivisti, e sistemati nel modo migliore per permettere all'utente di poter capire in che cosa si sta imbattendo.

[t] Torna al sommario

Valid HTML 4.01! Valid CSS! Level Double-A conformance icon,W3C-WAI Web Content Accessibility Guidelines 1.0