Logo Università di UdineUniversità degli studi di Udine - 2006/2007
Corso di Progettazione di siti web

Rapporto di conformità

Masetto Alessandro


Rapporto di conformità della pagina iniziale di Volareweb (15 febbraio 2007)

Indice:


Violazioni di priorità 1


Checkpoint 1.1  Fornire alternative equivalenti al contenuto audio e visivo. Fornire un contenuto che, una volta presentato all' utente, svolga essenzialmente la stessa funzione o raggiunga lo stesso scopo del contenuto visivo o acustico.

Problema: immagine priva di alternative testuali equivalenti.

<img src="../../../../skylights/images/SB/express/ex_top_it.jpg" width=211 height=54>

esempio


Soluzione suggerita: inserire del testo attraverso l'attributo alt.

<img src="../../../../skylights/images/SB/express/ex_top_it.jpg" width=211 height=54 alt="ACQUISTA ORA" >


Altri esempi:

newsletter

Sostituire:
<img src="../../../../shared/images/t_newsletter.jpg" alt="spacer">
con:
<img src="../../../../shared/images/t_newsletter.jpg" alt="Iscriviti alla newsletter">

informativa enac

Sostituire:
<img src="../../../../shared/images/t_enac.jpg" alt="spacer">
con:

<img src="../../../../shared/images/t_newsletter.jpg" alt="informativa enac">

sconti sui musical

Sostituire:
<img src="../../../../shared/images/t_peterpan.jpg" alt="spacer">
con:

<img src="../../../../shared/images/t_peterpan.jpg" alt="sconti sui musical">


bit 2007

Sostituire:
<img src="../../../../shared/images/t_bit.jpg" alt="spacer">
con:
<img src="../../../../shared/images/t_bit.jpg" alt="bit 2007">

Torna all'indice

Problema: immagini ricche di informazioni priva di alternative testuali equivalenti.

<img src="../../../../repository/campains/20070207_ovtop_it.gif" alt="Banner" border="0"></a>

Soluzione suggerita: inserire del testo descrittivo usando l'attributo longdesc.

<img src="../../../../repository/campains/20070207_ovtop_it.gif" alt="Banner" longdesc="../advertising/innamorati.html" border="0"></a>

Altro esempio:


Torna all'indice

Problema: le immagini spaziatrici devono avere l'attributo alt vuoto.

<img src="../../../../shared/images/spacer.gif" alt="spacer"

Soluzione suggerita: lasciare alt vuoto.

<img src="../../../../shared/images/spacer.gif" alt="">

Torna all'indice

Problema: il testo alternativo deve dare indicazioni utili, qui descrivere la sua funzione nel layout della pagina.

Alcuni esempi:

<img src="../../../../shared/images/open_lang.jpg" width="21" height="25" alt="open language">
<img src="../../../../shared/images/close_lang.jpg" width="12" height="25" alt="close language">
<img src="../../../../shared/images/open_menu.jpg" alt="menu" height="29" width="23">

Soluzione suggerita: lasciare alt vuoto.

<img src="../../../../shared/images/open_lang.jpg" width="21" height="25" alt="">
<img src="../../../../shared/images/close_lang.jpg" width="12" height="25" alt="">
<img src="../../../../shared/images/open_menu.jpg" alt="" height="29" width="23">

Torna all'indice


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. [Priorità 1] Per esempio, assicurarsi che i collegamenti che attivano script funzionino quando gli script sono disabilitati oppure non supportati (per esempio, non usare "javascript:" come obiettivo del collegamento). Se non è possibile rendere la pagina utilizzabile senza script, fornire un equivalente testuale con l'elemento NOSCRIPT, oppure usare uno script lato server al posto di uno script lato client, oppure fornire una pagina accessibile alternativa.
Assicurarsi che le pagine rimangano accessibili anche quando le tecnologie più recenti non sono supportate o sono disattivate.

Osservazione del valutatore: la form principale attraverso la quale il sito dovrebbe erogare il servizio di base non funziona con non javascript disabilitato.
Non è possibile né effettuare un acquisto, né controllare orari e disponibilità dei voli.

Problema: form con collegamento javascript senza alternative adeguate.

<a href="javascript:submit_SB_Form()">CONFERMA</a>

Soluzione suggerita : inserire dei tag <noscript>.

<noscript> <input type="submit" action="paginaX.xyz" method="post" value="CONFERMA" /> </noscript>

Torna all'indice

Problema: questi collegamenti non funzionano senza javascript.

<a href="#" onClick="MM_openBrWindow('../../../../shared/html/peter_it.html','peter','scrollbars=yes,width=620,height=400')">Clicca qui</a>
<a href="#" onClick="MM_openBrWindow('http://www.wedirect.volareweb.com/sito/iscrizione_it.asp','mail', 'width=642,height=540,scrollbars=yes')">Iscriviti</a>
<a href="#" onClick="MM_openBrWindow('../../../../shared/html/privacy_it.html','volareweb','width=470, height=235, scrollbars=yes')">privacy</a>
<a href="#" onClick="MM_openBrWindow('../../../../shared/html/credits_it.html','volarecredits','width=470, height=235, scrollbars=yes')">credits</a>

Soluzione suggerita: inserire gli elementi <noscript> e una nuova destinazione del collegamento con una descrizione.

<noscript>
<a title="Vai alla pagina dei crediti" href="../../../../shared/html/credits_it.html">credits</a>
</noscript>

Torna all'indice

Problema: contenuto non accessibile a tutti gli utenti.

<script language="JavaScript" src="/skylights/js/volareBasicFunctions.js" type="text/javascript"></script>;
<script language="JavaScript" src="../../../../shared/js/scripts.js" type="text/javascript"></script>
<script language="JavaScript" src="../../../../shared/js/flashobject.js" type="text/javascript"></script>

Soluzione suggerita : inserire dei tag <noscript>.

Torna all'indice


Checkpoint 8.1: Fare in modo che elementi di programmi come script e applet siano direttamente accessibili o compatibili con le tecnologie assistive

Osservazione del valutatore: questo punto di controllo è stato classificato come priorità 1 poichè ritenuto "importante" secondo quanto stabilito dalle linee guida.

Problema: collegamenti incompatibili con tecnologie assistive.

<input type=radio name='travel_type' onClick="change_sector_2_fields( 0, false )" checked>
<a href="#" onClick="MM_openBrWindow('../../../../shared/html/peter_it.html','peter','scrollbars=yes,width=620,height=400')">Clicca qui</a>

<a href="#" onClick="MM_openBrWindow('../../../../shared/html/peter_it.html','peter','scrollbars=yes,width=620,height=400')">Clicca qui</a>
<a href="#" onClick="MM_openBrWindow('http://www.wedirect.volareweb.com/sito/iscrizione_it.asp','mail', 'width=642, height=540, scrollbars=yes')">Iscriviti</a><a href="#" onclick="MM_openBrWindow('../../../../shared/html/phone_it.html','phone','scrollbars=yes,width=680,height=212')">Costi</a>
<a href="#" onClick="MM_openBrWindow('../../../../shared/html/privacy_it.html','volareweb','width=470, height=235, scrollbars=yes')">privacy</a>
<a href="#" onClick="MM_openBrWindow('../../../../shared/html/credits_it.html','volarecredits','width=470, height=235, scrollbars=yes')">credits</a>

Soluzione suggerita : sostituire onClick con onKeyPress.

<input type="radio" name="travel_type" onKeyPress="change_sector_2_fields( 0, false )" checked="checked">
<a href="#" onKeyPress="MM_openBrWindow('../../../../shared/html/peter_it.html','peter','scrollbars=yes,width=620,height=400')"
>Clicca qui</a>

Torna all'indice


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.

Problema: la pagina non è accessibile e non presenta collegamenti a pagine alternative.

Soluzione suggerita : costruire una pagina accessibile e posizionare il collegamento facilmente raggiungibile da un browser testuale.

Torna all'indice


Violazioni di priorità 2



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.

Problema: vedi risultato dell'analisi del CSS apre una nuova finestra

La differenza di luminosità tra i due colori non è sufficiente. Il valore di soglia è 125, e il risultato tra il colore principale e il colore di sfondo è 98.

La differenza di colore tra i due colori non è sufficiente. Il valore di soglia è 500 e il risultato della differenza tra il colore principale ed il colore di sfondo è 298.

  • Colore principale: #49495D
  • Colore di sfondo: #9FB0CA

Soluzione: cambiare la combinazione di colori. Per maggiori informazioni vedi algoritmo per il contrasto dei colori.

Torna all'indice


Chekpoint 3.2: Creare documenti che facciano riferimento a grammatiche formali pubblicate.

Problema: controllo di validità della pagina fallito. Per maggiori informazioni

Soluzione: correggere gli errori presentati dal validatore.

Torna all'indice


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

Problema: mescolanza tra contenuto e presentazione

Alcuni esempi:

<table width="767" border="0" cellspacing="0" cellpadding="0">
<table width="213" border="0" cellspacing="0" cellpadding="0">

Soluzione: utilizzare le proprietà dei fogli di stile.

Torna all'indice


Checkpoint 3.4: Usare unità relative e non assolute nei valori degli attributi del linguaggio dei marcatori e i valori della proprietà del foglio di stile.
In CSS, per esempio, usare "em" o misure di percentuale invece di "pt" o "cm", che sono misure assolute. Se si usano misure assolute accertarsi che il contenuto espresso sia utilizzabile.

Osservazione del valutatore: l' utilizzo di dimensioni assolute crea problemi con utenti che utilizzano ingranditori di schermo.

Problema: utilizzo di dimensioni assolute.

Alcuni esempi:

<table width="767" border="0" cellspacing="0" cellpadding="0">
<td class="lang" height="25" align="center" valign="top">
<table width="367" border="0" cellspacing="0" cellpadding="0" align="left">

Soluzione suggerita : utilizzare dimensioni relative.

<table width="80%" border="0" cellspacing="0" cellpadding="0">

Torna all'indice


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

Problema: non ci sono elementi di intestazione in questo documento.

Soluzione: per esempio usare H2 per indicare una sottosezione di H1. Non usare intestazioni per gli effetti di carattere

Torna all'indice


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

Problema: se linearizzata, la pagina ha problemi di leggibilità. Vedi la versione linearizzata apre una nuova finestra

Soluzione suggerita :eliminare la tabella e utilizzare le proprietà dei fogli di stile adeguatamente. Fare in modo che anche senza i fogli di stile la struttura sia lineare e congrua con lo scopo della pagina.

Torna all'indice


Checkpoint 6.4: Per quanto riguarda script e applet, assicurarsi che i gestori di eventi siano indipendenti dai dispositivi di input.
L'utente dovrebbe essere in grado di interagire con un interprete (e il documento che esso rende) usando i dispositivi di input e output supportati, secondo la propria scelta e secondo i propri bisogni. I dispositivi di input possono includere dispositivi di puntamento, tastiere, display braille, bacchette manovrate con la testa, microfoni ed altro. I dispositivi di output possono includere monitor, sintetizzatori vocali e dispositivi braille.

Problema: riferimenti a javascript non indipendenti dal dispositivo di input.

Alcuni esempi:

<input type=radio name='travel_type' onClick="change_sector_2_fields( 0, false )" checked>
<a href="#" onClick="MM_openBrWindow('../../../../shared/html/peter_it.html','peter','scrollbars=yes,width=620,height=400')">Clicca qui</a>

Soluzione suggerita : sostituire onClick con onKeyPress.

<input type="radio" name="travel_type" onKeyPress="change_sector_2_fields( 0, false )" checked="checked">
<a href="#" onKeyPress="MM_openBrWindow('../../../../shared/html/peter_it.html','peter','scrollbars=yes,width=620,height=400')"
>Clicca qui</a>

Torna all'indice


Checkpoint 10.1: Non fare apparire finestre a cascata o di altro tipo e non cambiare la finestra attiva senza informare l'utente.

Problema: questi link aprono finestre pop-up

<a href="#" onClick="MM_openBrWindow('../../../../shared/html/peter_it.html','peter','scrollbars=yes,width=620,height=400')">Clicca qui</a>
<a href="#" onClick="MM_openBrWindow('http://www.wedirect.volareweb.com/sito/iscrizione_it.asp','mail', 'width=642, height=540, scrollbars=yes')">Iscriviti</a>
<a href="#" onClick="MM_openBrWindow('../../../../shared/html/privacy_it.html','volareweb','width=470, height=235, scrollbars=yes')">privacy</a>
<a href="#" onClick="MM_openBrWindow('../../../../shared/html/credits_it.html','volarecredits','width=470, height=235, scrollbars=yes')">credits</a>

Soluzione suggerita : usare ancore e target, informare l'utente.

Soluzione da non preferire:
<a title="Apre una nuova finestra, Sconti sul musical per i clienti Volareweb.com" target="_blank" href="../../../../shared/html/peter_it.html">Clicca qui </a>

Soluzione da preferire perchè non apre altre finestre:
<a href="../../../../shared/html/peter_it.html">Sconti sul musical per i clienti Volareweb.com</a>

Torna all'indice


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

Problema: utilizzo di elementi disapprovati dal W3C.

Alcuni esempi:

<center>
<font>

Soluzione suggerita : in HTML, non usare l'elemento FONT che è disapprovato; usare al suo posto i fogli di stile (per es., la proprietà 'font' di CSS).

Torna all'indice

Problema: elementi che utilizzano attributi disapprovati dal W3C.

Alcuni esempi:

<div align="center">
<td class="lang" height="25" align="center" valign="top">
<img src="../../../../shared/images/logo_sv.gif" alt="Volareweb.com" width="350" height="78" border="0" style="margin-left:2px;">
<td width="2" align="left">
<td width="207" valign='top' background='../../../../skylights/images/SB/express/ex_bgimage.gif'>
<script language='JavaScript'>
<td bgcolor="#DCDCDC">

Soluzione suggerita : in HTML, non usare attributi disapprovati; usare al loro posto i fogli di stile.

Torna all'indice


Checkpoint 12.3: Dividere grandi blocchi di informazione in gruppi più maneggevoli quando è naturale ed appropriato. Per esempio, in HTML, usare OPTGROUP per raggruppare gli elementi OPTION all'interno di un SELECT; raggruppare i controlli dei moduli con FIELDSET e LEGEND; usare liste annidate quando è appropriato; usare intestazioni per strutturare i documenti, ecc.

Problema: non ci sono elementi d'intestazione "H1...H6" o paragrafi "P" in questa pagina.

Soluzione suggerita : dividere il contenuto in macroblocchi con questi elementi.

Torna all'indice

Problema: nella form principale gli elementi non sono raggruppati.

Soluzione suggerita : utilizzare FIELDSET e LEGEND.

Torna all'indice


Checkpoint 12.4: Associare esplicitamente le etichette ai loro controlli.

Problema: nella form le etichette non sono associate ai loro controlli.

Alcuni esempi:

<input name="travel_type" onclick="change_sector_2_fields( 0, false )" checked="checked" type="radio">
<span class="label"><strong>Andata e ritorno</strong></span>

<input name="travel_type" onclick="change_sector_2_fields( 1, false )" type="radio">
<span class="label"><strong>Andata</strong></span></font>

Soluzione suggerita : usare LABEL e il suo attributo FOR.

<label for="andataRitorno">Andata/Ritorno
<input name="travel_type" type="radio" id="andataRitorno" tabindex="1" onKeyPress="change_sector_2_fields( 0, false )" checked="checked">
</label>

<label for="andata">Andata
<input name="travel_type" type="radio" id="andata" tabindex="1" onKeyPress="change_sector_2_fields( 1, false )" checked="checked">
</label>

Torna all'indice


Checkpoint 13.1: Identificare con chiarezza l'obiettivo di ogni collegamento. Un collegamento testuale dovrebbe essere abbastanza significativo da mantenere un senso se letto fuori contesto sia da solo che come parte di una sequenza di collegamenti. Un collegamento testuale dovrebbe anche essere sintetico.

Problema: Testo dei collegamenti troppo vago.

<a href="#" onClick="MM_openBrWindow('../../../../shared/html/peter_it.html','peter','scrollbars=yes,width=620,height=400')">Clicca qui</a>
<a href="#" onClick="MM_openBrWindow('http://www.wedirect.volareweb.com/sito/iscrizione_it.asp','mail', 'width=642, height=540, scrollbars=yes')">Iscriviti</a>
<a href="#" onClick="MM_openBrWindow('../../../../shared/html/privacy_it.html','volareweb','width=470, height=235, scrollbars=yes')">privacy</a>
<a href="#" onClick="MM_openBrWindow('../../../../shared/html/credits_it.html','volarecredits','width=470, height=235, scrollbars=yes')">credits</a>

Soluzioni suggerite: definire meglio l'obiettivo del collegamento invece che scrivere "clicca qui". In aggiunta a un chiaro collegamento testuale, gli sviluppatori possono ulteriormente chiarire l'obiettivo di un collegamento con un titolo del collegamento con funzione informativa utilizzando title.

Utilizzando title:
<a title="Vai alla pagina dei riconoscimenti" href="../../../../shared/html/credits_it.html"><span lang="en">credits</span></a>

Agiungendo informazione al testo:
<a href="http://www.wedirect.volareweb.com/sito/iscrizione_it.asp">Iscriviti alla <span lang="en">newsletter</span> </a>

Combinando le tecniche:
<a title="La nostra politica di tutela dei dati personali" href="../../../../shared/html/privacy_it.html">Informativa sulla <span lang="en">privacy</span></a>

Torna all'indice

Problema: questi collegamenti hanno il testo identico ma si riferiscono a 2 risorse diverse:

<a href="#" onClick="MM_openBrWindow('../../../../shared/html/peter_it.html','peter','scrollbars=yes,width=620,height=400')">Clicca qui</a>

<a href="http://www.enac-italia.it/SecurityInformative/Informativa.htm" target="_blank">Clicca qui</a>

Soluzione suggerita: definire meglio l'obiettivo del collegamento invece che scrivere "clicca qui". In aggiunta a un chiaro collegamento testuale, gli sviluppatori possono ulteriormente chiarire l'obiettivo di un collegamento con un titolo del collegamento con funzione informativa utilizzando title.

<a title="Sconto del 25% sul musical"href="#" onClick="MM_openBrWindow('../../../../shared/html/peter_it.html','peter','scrollbars=yes,width=620,height=400')">Peter pan</a>

<a href="http://www.enac-italia.it/SecurityInformative/Informativa.htm" target="_blank">Informativa sulla sicurezza</a>

Torna all'indice


Violazioni di priorità 3


Checkpoint 4.3:
Identificare il linguaggio naturale principale di un documento.

Problema: linguaggio del documento non specificato.

Soluzione suggerita : assegnare l'attributo "lang" all'elemento HTML

<html lang="it">

Torna all'indice



Checkpoint 9.4:
Creare un ordine logico di tabulazione fra i collegamenti, i controlli dei moduli, e gli oggetti. Per esempio, in HTML, specificare l'ordine di tabulazione tramite l'attributo "tabindex" oppure garantire una disposizione logica della pagina.

Problema: ordine di tabulazione non presente.

Soluzione suggerita: specificare l'ordine di tabulazione tramite l'attributo tabindex oppure garantire una disposizione logica della pagina.

<LABEL for="firstname">First name: </LABEL>
<INPUT type="text" id="firstname" tabindex="1">
<LABEL for="lastname">Last name: </LABEL>
<INPUT type="text" id="lastname" tabindex="2">

Torna all'indice



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

Problema: non sono definite alcune scorciatoie da tastiera.

Soluzione suggerita : inserire l'attributo accesskey ai collegamenti.

<a accesskey="1" href="index.html">Home page [1]</a>

Torna all'indice



Checkpoint 11.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.)

Problema: informazioni sulla lingua non presenti.

Alcuni esempi:

<a href="../../../it/web/index/index.jsp" id="lang">Italiano</a>
<a href="../../../en/web/index/index.jsp">English</a>
<a href="../../../fr/web/index/index.jsp">Français</a>

Soluzione suggerita: specificare la lingua delle risorse a cui si fa riferimento attraverso hreflang.

<a hreflang="it" href="../../../it/web/index/index.jsp" id="lang">Italiano</a>
<a hreflang="en"href="../../../en/web/index/index.jsp">English</a>
<a hreflang="fr"href="../../../fr/web/index/index.jsp">Français</a>

Torna all'indice