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 acquisti

Indice:


Violazioni di priorità 1



Checkpoint 1.1 link esterno 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: 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.3link esternoAssicurarsi 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.


Problema: questo collegamento non funziona con javascript disabilitato.

<a href="javascript:submit_SB_Form()">CONFERMA</a>
<a href="javascript:history.go(-2)">TORNA INDIETRO</a>

Ossevazione: il tasto back del browser non funziona anche con javascritpt abilitato.

Soluzione suggerita: inserire un pulsante alla form o un'laternativa <noscript>

<input type="submit" action="paginaDinamica.xyz" metodo="post" value="Conferma" id="conferma" />
<label for="conferma">Conferma</label>

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>

Soluzione suggerita : inserire dei tag <noscript>.

Torna all'indice


Checkpoint 8.1:link esterno 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>

<input type=radio name='travel_type' onClick="change_sector_2_fields( 1, false )">

Soluzione suggerita : aggiungere onKeypress.

<input type=radio name='travel_type' onKeypress="onClick()" onClick="change_sector_2_fields( 0, false )" checked="checked">

<input type=radio name='travel_type' onKeypress="onClick()" onClick="change_sector_2_fields( 1, false )">

Torna all'indice


Checkpoint 11.4:link esternoSe, 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:
link esternoAssicurarsi 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.

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 link esterno

Torna all'indice



Chekpoint 3.3:link esternoUsare 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:link esterno 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">
<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:link esterno 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 6.4:link esterno 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.

<input type=radio name='travel_type' onClick="change_sector_2_fields( 0, false )" checked>
<input type=radio name='travel_type' onClick="change_sector_2_fields( 1, false )">

Soluzione suggerita : aggiungere onKeypress.

<input type=radio name='travel_type' onKeypress="onClick()" onClick="change_sector_2_fields( 0, false )" checked="checked">
<input type=radio name='travel_type' onKeypress="onClick()" onClick="change_sector_2_fields( 1, false )">

Torna all'indice


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

Problema: la chiamata a questa funzione javascript apre una finestra di dialogo.

Osservazione: i campi obbligatori non vengono dichiarati espressamente.

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

snapshot finestra di dialogo

Soluzione suggerita : informare l'utente prima che provi a sottomettere la form.

Torna all'indice

Problema: questo link apre una finestra pop-up senza avvertire esplicitamente l'utente.

calendario
<img name="calendar_1" src="http://buy.volareweb.com/skylights/images/SB/b-cal-c-up.gif" alt="Fai click per aprire il calendario" align="top" border="0"></a>

snapshot finestra di dialogo

Soluzione suggerita : informare l'utente meglio.

Torna all'indice


Checkpoint 11.2:link esterno 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:

<body link=#FF8000 vlink=#FF8000 alink=#163F7E onLoad="initSky();" onLoad="init(); change_sector_2_fields( '', true ); if (document.SBform.travel_type[1].checked){ swap_icon('calendar_2', 'frozen'); swap_icon_ok=false}; defaultStatus='Volareweb.com'">

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

Torna all'indice


Checkpoint 12.3:link esterno 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 gli elementi non sono raggruppati.

Soluzione suggerita : utilizzare FIELDSET e LEGEND.

Torna all'indice


Checkpoint 12.4:link esterno associare esplicitamente le etichette ai loro controlli.

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

Alcuni esempi:

<select name='sector1_o' size=1 onChange="changeOrigDestList(document.SBform.sector1_o, document.SBform.sector1_d, 'Destinazione', false, 1)" class='dropdown'>

<input type=radio name='travel_type' onClick="change_sector_2_fields( 1, false )">

Soluzione suggerita : usare LABEL e il suo attributo FOR.

<label for="destinazione">Destinazione
<select id="destinazione"name='sector1_o' size=1 onChange="changeOrigDestList(document.SBform.sector1_o, document.SBform.sector1_d, 'Destinazione', false, 1)" class='dropdown'>
</label>

<label for="travel_type">Tipo di viaggio
<input type=radio name="travel_type" onClick="change_sector_2_fields( 1, false )">
</label>

Torna all'indice


Violazioni di priorità 3


Checkpoint 4.3:link esterno
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:
link esterno 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:
link esternoFornire scorciatoie da tastiera per i collegamenti importanti (compresi quelli nelle immagini sensibili sul lato clientlink esterno), 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