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 Alitalia

Valutazione della conformità alla Legge Stanca del sito Alitalia

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 del sito Alitalia non presenta pagine valide, ma tutte con errori più o meno rilevanti, e fa della sua home page la pagina con la presenza di maggiori errori. Questa pagina infatti rissume tutti i principali errori che il sito produce.
Vengono ora visionati un riassunto degli errori trovati:

<SCRIPT LANGUAGE="JavaScript">

Qui si può notare come nel tag <script> non venga inserito l'attributo type; questo errore viene ripetuto molte volte all'interno del sito.

…h="741" height="85px" frameborder="no" scrolling="no" title="MilleMiglia">

L'attributo frameborder non può assumere "no" come valore

<div class="news" id="homeNews"><a href="/IT_IT/footer/news/nw_2007_11_16.htm

…T/footer/news/nw_2007_11_16.htm" id="homeNews" class="news">NEWS PASSAPORTO

In questo caso viene evidenziato l'errore di ripetizione dell'attributo id="homeNews" che come tale, può richiamare le proprietà del css ad un solo elemento.

Anche le liste vengono scritte in maniera errato, in quanto nel primo caso qui sotto, viene usata una lista non ordinata mettendo l'elemento senza la tag dovuta <li>. Nel secondo caso invece il problema è contrario, ovvero la presenza dell'elemento <li> senza definire la lista a cui appartiene, ordinata <ol> oppure <ul>.

<td> <ul class="service"><div id="div1">

<li class="service1"><a href="/IT_IT/WebCheckIn/CheckIn.aspx" title="CHECK-IN

Da sottolineare anche errori di chiusura delle tag immagini:

<img src="/IT_IT/Images/imm_calendario_tcm10-3100.gif" width="17" height="17" border="0" alt="Calendario" border="0">

I due esempi di codici qui sotto mostrano un errata sintassi del valore dell'attributo name e id che non possono iniziare con un carattere come "_" ma solo con una lettera, e nel secondo caso, la ripetizione dell'attributo border="0" in una stessa tag.

…type="hidden" name="__VIEWSTATE" id="_VIEWSTATE" value="/wEPDwUKLTQxMTcyMjQy

…" border="0" alt="Calendario" border="0"></a>

Possibili soluzioni:
Correggere i ripetuti <script language="javascript"> aggiungendo l'attributo <script ... type="text/javascript"> e sostituire alcuni errori di ripetizione di attributi come id="homenews" e l'attributo border="0" ripetuto due volte nello stesso elemento. Inoltre riscrivere in modo corretto gli attributi lista che in molti casi vengono scritte in modo incompleto e non corretto, usando solo l'attributo li oppure solo l'attributo ul/ol. Infine un errore di sintassi nello scrivere il nome dell'attributo id="_viewstate" il quale non può iniziare con un carattere, ma solo con una lettera.
Complessivamente il codice presenta molti errori ma nessuno che comprometta totalmente la navigazione. Si può notare ad esempio il corretto utilizzo della tag <noscript></noscript> che viene scritta dopo tutte le tag <script> permettendo agli utenti senza javascript di poter comunque fruire del contenuto del sito.

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 è presente un unico frame nella parte alta, che permette di entrare nel club MilleMiglia tramite questo codice:

Frame MilleMiglia

<iframe id="boxMM" src="Alitalia%20-%20Home%20Page_files/BoxMMPage.htm" title="MilleMiglia" frameborder="no" height="61" scrolling="no" width="741"></iframe>

La legge sconsiglia l'uso dei frame, e nel caso fossero già presenti siano ben titolati; In questo caso abbiamo frameborder="no" quando i due possibili valori dell'attributo possono essere 0 o 1. Inoltre il mancato utilizzo dell'elemento <noframes> al fine di garantire un equivalente testuale agli utenti che non hanno accesso ai frame. Utilizzando un lettore di schermo notiamo come non riesca ad indentificare il frame ed il contenuto al suo interno, non permettendo quindi ad un utente cieco, ad esempio, di usufruire del club MilleMiglia.

Possibili soluzioni:
Sostituire il valore di frameborder con 0 o 1 ed inserire l'elemento <noframes> con l'alternativa testuale del frame di riferimento; oppure utilizzare il codice seguente:

<iframe src="URL" attributi> il tuo browser non supporta l'iframe:
per vedere il contenuto clicca <a href="URL">qui</a> </iframe>

Livello gravità: BASSO

[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 viene rispettato in parte questo requisito in quanto tutte le immagini presentano un attributo alt.
Un possibile consiglio riguardo le immagini è quello di cambiare alcuni alt poco chiari che non spiegano in modo abbastanza chiaro quello che l'utente può trovare. Un esempio:

<img src="/IT_IT/Images/guide_265x85_tcm10-19528.gif" width="266" align="right" alt="guide_IT_265x85" border="0">

<img src="/IT_IT/Images/Auto_tcm10-15814.jpg" width="266" align="right" alt="expedia_auto_265x85" border="0">

Anche in molti link ipertestuali manca l'attributo title=" " non guidando l'utente che utilizza un lettore di schermo di sapere dove porta quel link.

<a href="/IT_IT/choose_your_destination/destination/guide.htm">

<a href="/IT_IT/choose_your_destination/service_web/carrental.asp">

Un altro problema più serio è rappresentato dal menù "Offerte speciali" in basso della home page. Utilizzando un lettore di schermo, infatti, non viene letto alcun titolo in quanto il titolo Offerte Speciali è un immagine di sfondo caricata dal css, e preclude un utente cieco all'accesso a queste informazioni.

Offerte speciali alitalia


L'immagine presa dal css di Offerte Speciali

Possibili soluzioni:
Come soluzione al problema si potrebbe mettere l'immagine non in background tramite css, ma bensì metterla direttamente in html con tag <img src".." alt"Offerte Speciali"/>, aggiungere ai link ipertestuali un attributo title="" che permetta all'utente di sapere dove porta.

Livello gravità: MEDIO

[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.

Pagina dell'Alitalia con colore


Pagina dell'Alitalia senza colore

I colori utilizzati nel sito Alitalia sono principalmente il verde, il grigio ed il bianco, con la presenza di pulsanti o gif con la presenza di colore rosso. Lasciando in bianco e nero la pagina, riusciamo a capire in ogni caso tutti i link e le immagini senza alcun problema in tutte le pagine analizzate.

Risultato analisi: SODDISFATTO

[t] Torna al sommario

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

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.

Analizzando in maniera approfondita la pagina principale del sito, la pagina che più delle altre contiene il maggior numero di differenze di colore fra sfondo e scritte, notiamo che la maggior parte del contrasto risulta sufficiente:

Esempio contrasto


Esempio contrasto


Esempio contrasto

qui sopra possiamo notare 3 esempi di contrasti presi con differenti colori fra sfondo e scritte, tutti però con un contrasto sufficiente.
Ora invece, due esempi all'interno della pagina iniziale, dove il contrasto non risulta sufficiente:

Esempio contrasto Insufficiente

In questo elenco di link ad esempio, la differenza di luminosita' e' di 96 e quella del colore di 312. I coefficienti minimi sono rispettivamente 125 e 500.

Esempio contrasto Insufficiente

Anche qui la differenza di luminosita' e' 112 e il colore 336, non superando quindi i requisiti minimi imposti dalla Legge Stanca.

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 anche se la violazione riguarda una piccola parte del sito, puo' comprometterepermette la prenotazione dei voli/hotel/auto. Anche se l'altra violazione riguarda una parte del sito di seconda importanza, la gravita' e' seria 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 troviamo questa mappa :

<map name="map01"><area alt="Logo Alitalia" coords="0,0,125,62" href='/IT_IT/'><area alt="Logo SkyTeam" coords="125,0,166,62" href='/IT_IT/information/partnerships/index.htm'></map>

Possibili soluzioni:
Una possibile soluzione sarebbe utilizzare questo codice:

<OBJECT data="logo.gif" type="image/gif" usemap="#map01"> <P>Mappa Logo Alitalia e Partners.<p> </OBJECT>

<map name="map01"><area alt="Logo Alitalia" coords="0,0,125,62" href='/IT_IT/'><area alt="Logo SkyTeam" coords="125,0,166,62" href='/IT_IT/information/partnerships/index.htm'></map>

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.

esempio tabella alitalia

Questo un esempio della tabella che possiamo trovare nella pagina dei parcheggi aeroportuali Alitalia ed analizzando il codice di questa parte di sito notiamo questo:

<TABLE cellSpacing=4 cellPadding=4 width=" " border="100%">
<TBODY>
<TR>
<TD vAlign=top width=" 47%"><B>Servizi inclusi:</B>
<UL>
<LI>Navetta da e per l’aeroporto operativa 24 h
<LI>Polizza di furto e incendio
<LI>Vigilanza e custodia dei veicoli </LI></UL></TD>
<TD width="53%"><B>Servizi su richiesta: </B>
<UL>
<LI>Protezione e avvolgimento bagagli Best Wrappers
<LI>Lavaggio auto e rifornimento carburante
<LI>Tagliando completo e servizio pneumatici </LI></UL></TD></TR></TBODY></TABLE>

Come possiamo vedere non vengono usati attributi come th o summary..

Possibili soluzioni:
Una soluzione potrebbe essere sostituendo questo codice:

<TABLE cellSpacing=4 cellPadding=4 summary="Servizi parcheggi Aeroportuali"><caption>Servizi a disposizione</caption>
<TBODY>
<TR>
<TH><B>Servizi inclusi:</B></TH>
<TH><B>Servizi su richiesta: </B></TH>
</TR>
<TR>
<TD><UL>
<LI>Navetta da e per l’aeroporto operativa 24 h </LI>
<LI>Polizza di furto e incendio </LI>
<LI>Vigilanza e custodia dei veicoli </LI></UL></TD>
<TD>
<UL>
<LI>Protezione e avvolgimento bagagli Best Wrappers </LI>
<LI>Lavaggio auto e rifornimento carburante </LI>
<LI>Tagliando completo e servizio pneumatici </LI>
</UL>
</TD></TR>
</TBODY>
</TABLE>

È stato inserito l'attributo "summary" al tag <table> per far diventare la tabella autoesplicativa e permettere a utenti con lettore di schermo di capire meglio il contenuto della tabella. Inoltre è stata inserita il tag <caption> per dare un titolo alla tabella.

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 Alitalia senza css

Questo è un esempio della pagina senza il foglio di stile. Come possiamo notare la struttura si presenta allo stesso modo, ma non vengono visualizzate tutte le voci dei menù. Il motivo è nel codice perchè le voci del menù sono delle immagini poste come sfondo delle celle della tabella tramite il css. In assenza del foglio di stile quindi, la funzionalità del sito è compromessa.
Inoltre vengono definite quasi sempre le immagini all'interno della pagina html invece di usare opportunamente le funzionalità del css. Ecco alcuni esempi:

<img src="/IT_IT/Images/imm_calendario_tcm10-3100.gif" width="17" height="17"../>

<img id="company_logo" src='/IT_IT/Images/logo_tcm10-14088.gif' width="166"../>

<img src="/IT_IT/Images/1-scegli-e-acquista_tcm10-14508.gif" height ="26"../>

Possibili soluzioni:
Non utilizzare immagini funzionali messe come sfondo delle celle delle tabelle tramite css, ma utilizzare un link testuale che eredita proprietà simili da foglio di stile, lasciando l'immagine di sfondo. Inoltre per le immagini usare correttamente la loro presentazione:

<div class="dimensione_cal> <img src="/IT_IT/Images/imm_calendario_tcm10-3100.gif" width="17" height="17"../></div>

CSS:
.dimensione_cal {width:17px; height:17px;}

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.

Per verificare questo punto abbiamo usato due browser: Internet explorer 6 e Mozilla Firefox; con il primo vediamo il sito con dimensioni fisse anche ingrandendolo, tranne un punto:

Ingrandimento pagina Alitalia con Internet 6

In questo caso ci è difficile capire il significato dei link, compromettendo l'obiettivo della sezione.
Con Mozilla invece il sito si presenta così:

Ingrandimento pagina Alitalia con Mozilla

Con questo browser quindi il discorso è totalmente diverso, in quanto si ingrandisce correttamente e il frame MilleMiglia a differenza di Explorer, si può muovere permettendo di capirne il contenuto, ma la sezione offerte speciali crea qualche problema:

Ingrandimento pagina Alitalia con Mozilla

Possibili soluzioni:
Per questo problema la soluzione principali per entrambi i browser è quella di cambiare il tipo di lunghezze nel file CSS, portandolo quindi dalle lunghezze fisse, a lunghezze relative (em) o percentuali (%). Inoltre la sezione "Offerte speciali" sarebbe meglio realizzarlo tramite tabella, in quanto in questo caso, utilizzando l'attributo "float" da css, ingrandendo da problemi di corretta visualizzazione. Questo punto crea un problema di certo non di poco conto, in quanto la navigazione per persone disabili o con deficit percettivi incontrerebbe qualche problema, soprattutto utilizzando Explorer che non permette di ingrandire la pagina.

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.

Nella home page troviamo subito una tabella principale che contiene le funzioni principali che il sito mette a disposizione:

Esempio tabella Alitalia

Questa tabella si divide nella parte centrale che offre le funzioni di ricerca per i voli, e nella tabella della parte alta del sito dove si puo' effettuare la scelta tra noleggio auto, hotel e voli

Esempio tabella Alitalia

e dalla tabella a destra con il menu' verticale.

Esempio tabella Alitalia

Analizzando il codice delle tabelle, notiamo come l'uso di headers, summary e elementi th vengano evitati.

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.

Un esempio di una form sul sito Alitalia

All'interno del sito troviamo una form principale, quella per prenotare il volo, analizzando il codice:

<strong><label for="Day1">Data Partenza:</label></strong>
<br> <select name="Day1" id="Day1"onChange='changeDay()' TABINDEX='3'><option value='1'>1</option></select>

<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value=".." />

Nel primo caso notiamo il corretto uso dell'attributo for nell'elemento label, e il correlato attributo name dell'elemento select. All'interno della form gli elementi label vengono usati nel modo appropriato. Inoltre Nel secondo esempio l'attributo name e id contengono un valore che però non dovrebbe contenere iniziare con il carattere "__".
Qui sotto invece notiamo l'evento:

<input type="image" src="/IT_IT/Images/cerca_tcm10-14092.gif" TABINDEX="40" title="Premi per cercare" ALT="Premi per cercare" name="SearchButton" onclick="setAction();">

dove il gestore evento onClick="" dovrebbe essere sostituito con onKeyPress="" che permette oltre al mouse anche l'interazione con tastiera. Inoltre non è stato inserito il tag fieldset per raggruppare più controlli.

Possibili soluzioni:
Una soluzione è quella di sostituire i gestori eventi onClick con onKeyPress per permettere di fruire del servizio anche senza mouse. Inserire il tag fieldset per raggruppare i controlli. Un possibile esempio dell'uso del fieldset è questo:

<form name="FormBooking" method="post" action="index.aspx" id="FormBooking">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value=".." />
<fieldset class="itemForm">
<label for="boapt1">Da:</label>
<input name="boapt1" type="text" id="boapt1" tabindex="1" size="25" class="text" autocomplete="off" />
<label for="arapt1">A:</label>
<input name="arapt1" type="text" id="arapt1" tabindex="2" size="25" class="text" autocomplete="off" />
</fieldset>
</form>

Livello gravità: MEDIO

[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.

Disabilitando Javascript, la navigabilità del sito non rimane uguale poichè alcune parti vengono a mancare e non si può accedere ad alcuni link. La pagina principale con il Javascript attivato si presenta in questo modo:

menu jsp KLM

mentre disabilitandolo il risultato è questo

menu jsp KLM

Nella seconda immagine quindi notiamo come i due banner non compaiano in quanto realizzati tramite javascript come anche il menù offerte speciali, che viene compromesso perdendo le offerte in primo piano. Anche i link "Ragazzi non accompagnati", "Tutte le altre offerte" e "Copyright Alitalia" non risultano accessibili.

Possibili soluzioni:
Rendere il menù fruibile anche senza il javascript, cercando quindi di realizzare i due banner senza javascript, utilizzando ad esempio l'elemento <img> con i suoi attributi, <a href="esempio.html" title="pagina di esempio"><img src="esempio.gif" alt"banner hp esempio"/></a> all'interno dell'elemento <noscript>.
Anche per la sezione "Offerte speciali" si può attuare un simile accorgimento, principalmente per il link "tutte le altre offerte" e i due link affetti dallo stesso problema.

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.

Come analizzato in precedenza nella form sono presenti dei gestori di eventi che vincolano l'utente all'uso del solo mouse :

<input type="image" src="/IT_IT/Images/cerca_tcm10-14092.gif" TABINDEX="40" title="Premi per cercare" ALT="Premi per cercare" name="SearchButton" onclick="setAction();">

<A href=\"#" onClick="changeStato();">

Da sottolinare che negli altri casi vengono usati correttamente i gestori di eventi, un esempio:

<a onclick="return openAirportHelp_HP(0)" onkeypress="return openAirportHelp_HP(0)" href="#">

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

<input type="image" src="/IT_IT/Images/cerca_tcm10-14092.gif" TABINDEX="40" title="Premi per cercare" ALT="Premi per cercare" name="SearchButton" onKeyPress="setAction();">

<A href=\"#" onKeyPress="changeStato();">

Questa violazione non è grave, anche se onKeyPress manca sul pulsante cerca, non permettendo quindi di raggiungerlo tramite tastiera.

Livello gravità: MEDIO

[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 in precedenza alcuni link nella pagina principale non funzionano correttamente senza javascript, alcune immagini funzionali non vengono visualizzate e nella form sono presenti gestori di eventi di tipo onclick="" senza onkeypress="".

Possibili soluzioni:
una soluzione è l'utilizzo dell'elemento <noscript> nel caso lo script non dovesse funzionare, oppure sostituire i link con elemento <a href".." title".."> che permetterebbe il loro accesso anche senza script. Nella form invece sostituire i gestori di eventi onclick="" con onkeypress="".

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 non sono presenti attributi title="" ripetitivi, ognuno spiega correttamente la destinazione del link. Invece in molti casi il problema è la mancanza dell'attributo title="" in molti link come possiamo vedere da questi esempi:

<a href="http://corporate.alitalia.it/it/"> </a>

<a href="http://corporate.alitalia.it/it/press/index.htm"></a>

<a href="/IT_IT/footer/news/index.htm"></a>

Possibili soluzioni:
Aggiungere ad ogni collegamento ipertestuale un attributo title che possa aiutare l'utente nella navigazione spiegandogli il contenuto del link.

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 Alitalia

Cliccando sul link voli, e mettendo nella form i dati del volo, una volta dato l'ok, il sito ci presenta questa pagina d'attesa, che specifica correttamente quanto ammonta l'attesa per l'utente. Questo però non viene fatto per gli altri metodi di ricerca per gli hotel e le auto, i quali ci collegano ad un sito esterno a quello corrente, e anche se l'attesa ammonta a qualche secondo, non veniamo avvisati di niente.

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 oppure specificare la quantità di attesa a cui l'utente è sottoposto.

Livello gravità: MEDIO

[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.

Nel sito non sono presenti acceskey e in alcune parti della form il sito non permette di interagire se non tramite il mouse.

Possibili soluzioni:
aggiungere il gestore di eventi onKeyPress="" e per migliorare la navigabilità del sito, aggiungere gli acceskey almeno nelle parti principali del sito. Corretto invece l'uso del tabindex per creare un ordine di tabulazione corretto e logico.

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

Analizzando il sito abbiamo potuto notare come molti punti della Legge Stanca non vengano rispettati, a partire dalla mancanza di testo alternativo come gli attributi title nelle tag <a>, alla mancanza delle tag <noscript> nel caso il javascript non funzionasse correttamente, ed alla presenza di gestori degli eventi come onclick="" ma non gli onkeypress="". Nel sito non è presente una versione alternativa accessibile, anche se i vari cambiamenti non richiederebbero molto tempo.

[t] Torna al sommario

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