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 orari

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: 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: immagine priva di alternative testuali equivalenti.

<img src="../../../../shared/images/it/call_center.gif" alt="call center">

esempio

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

<img src="../../../../shared/images/it/call_center.gif" alt="numero del call center 199414500">


Altri esempi:

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

news

Soluzione: sostituire alt="spacer" con alt="Isciviti alla newsletter" .

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 5.1 : Per tabelle di dati, identificare le intestazioni di righe e colonne.

Problema: la tabella dati non identifica le intestazioni e le righe.

Dettaglio tabella:

dettaglio tabella

Osservazione: se linearizzata, la tabella dati perde di senso. Emulazione di lettura della tabella .

dettaglio tabella linearizzata

<td class="" height="19">Bari - Milano Linate<font color="#ff0000"> </font></td>
<td class="">12.45-14.10</td>
<td class="">03/02/07</td>
<td class="">24/03/07</td>

<td class="">-----6-</td>
<td class="">VE 8423</td>

Soluzione suggerita: utilizzare TH e le relative intestazioni.

Ad esempio:

<TR>
<TH id="header1">Da/a</TH>

<TH id="header2">Orari</TH>
<TH id="header3">Dal al </TH>


<TR>
<TD headers="header1">Bari - Milano Linate</TD>

<TD headers="header2">12.45-14.10</TD>
<TD headers="header3">03/02/07</TD>

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.


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/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>
<input class="pulsante" value="Cerca" onclick="verifica_to(); document.forms['search'].action = document.forms['search'].action + '_to_' + select_value_to + '.jsp'" type="submit">

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

<noscript>
<input class="pulsante" value="Cerca" type="submit" action="paginaDinamicaXYZ.xyz" method="post" >
...
<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: questo punto di controllo è stato classificato come priorità 1 poichè ritenuto "importante" secondo quanto stabilito dalle linee guida.

Problema: collegamenti incompatibili con tecnologie assistive.

<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>
<input class="pulsante" value="Cerca" onclick="verifica_to(); document.forms['search'].action = document.forms['search'].action + '_to_' + select_value_to + '.jsp'" type="submit">

Soluzione suggerita : sostituire onClick con onKeyPress.

<a href="#" onKeyPress="MM_openBrWindow('../../../../shared/html/peter_it.html','peter','scrollbars=yes,width=620,height=400')">Clicca qui</a>
<a href="#"onKeyPress="MM_openBrWindow('http://www.wedirect.volareweb.com/sito/iscrizione_it.asp','mail', 'width=642, height=540,scrollbars=yes')">Iscriviti</a>
<a href="#"onKeyPress="MM_openBrWindow('../../../../shared/html/phone_it.html','phone','scrollbars=yes,width=680,height=212')">Costi</a>
<a href="#" onKeyPress="MM_openBrWindow('../../../../shared/html/privacy_it.html','volareweb','width=470, height=235, scrollbars=yes')">privacy</a>
<a href="#"onKeyPress="MM_openBrWindow('../../../../shared/html/credits_it.html','volarecredits','width=470, height=235, scrollbars=yes')">credits</a>
<input class="pulsante" value="Cerca"onKeyPress="verifica_to(); document.forms['search'].action = document.forms['search'].action + '_to_' + select_value_to + '.jsp'" type="submit">

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.

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

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.

<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>
<input class="pulsante" value="Cerca" onclick="verifica_to(); document.forms['search'].action = document.forms['search'].action + '_to_' + select_value_to + '.jsp'" type="submit">

Soluzione suggerita : sostituire onClick con onKeyPress.

<a href="#" onKeyPress="MM_openBrWindow('../../../../shared/html/peter_it.html','peter','scrollbars=yes,width=620,height=400')">Clicca qui</a>
<a href="#"onKeyPress="MM_openBrWindow('http://www.wedirect.volareweb.com/sito/iscrizione_it.asp','mail','width=642,height=540,scrollbars=yes')">Iscriviti</a>
<a href="#"onKeyPress="MM_openBrWindow('../../../../shared/html/phone_it.html','phone','scrollbars=yes,width=680,height=212')">Costi</a>
<a href="#" onKeyPress="MM_openBrWindow('../../../../shared/html/privacy_it.html','volareweb','width=470, height=235, scrollbars=yes')">privacy</a>
<a href="#"onKeyPress="MM_openBrWindow('../../../../shared/html/credits_it.html','volarecredits','width=470, height=235, scrollbars=yes')">credits</a>
<input class="pulsante" value="Cerca"onKeyPress="verifica_to(); document.forms['search'].action = document.forms['search'].action + '_to_' + select_value_to + '.jsp'" type="submit">

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/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 : 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">Peter pan</a>

Soluzione da preferire perchè non apre altre finestre:
<a title="Sconti sul musical per i clienti Volareweb.com" href="../../../../shared/html/peter_it.html">Peter pan</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.


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 : definire l'attributo accesskey nei 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