"" Università degli Studi di Udine
Facoltà di scienze matematiche, fisiche e naturali
Esame di progettazione siti web
A.A. 2005/2006
Realizzato da: Delle Donne Eleonora, Gortan Giuseppe
Corso di laurea specialistica in Informatica, classe 23/S
Sei in: Home  Conformità Valle d'Aosta  Verifica delle pagine analizzate (home page)

Requisito 1: produrre codice valido
Requisito 2: non utilizzare frame
Requisito 3: utilizzare alternative testuali
Requisito 4: uso del colore
Requisito 5: scritte lampeggianti
Requisito 6: uso del contrasto
Requisito 7: utilizzo delle mappe immagine
Requisito 8: mappe immagine lato server
Requisito 9: attributi delle tabelle dati
Requisito 10: tabelle a più livelli
Requisito 11: uso dei fogli di stile
Requisito 12: layout adattivo
Requisito 13: utilizzo delle tabelle di layout
Requisito 14: etichettare le form
Requisito 15: utilizzo di script, applet o oggetti di programmazione
Requisito 16: gestori di eventi
Requisito 17: funzionalità degli script, applet  o oggetti di programmazione
Requisito 18: uso della multimedialità
Requisito 19: non ambiguità dei link
Requisito 20: servizi temporizzati
Requisito 21: distanziamento dei link
Requisito 22: uso di pagine equivalenti ma accessibili

Requisito 1
Definizione: 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.
Esito della pagina: Il codice generato presenta  42 errori.
Soluzione: (vengono indicate solo le tipologie di errore riscontrate)
1. errore linea 208
<IMG SRC="/img/bianco.gif" WIDTH="750" HEIGHT="5">
Non c'è l'attributo alt.
SOLUZIONE
Inserire in img alt="".

2. errore linea 215
<SSNOINDEX>
Viene utilizzato un tag che non esiste o non è stato definito. Inoltre è scritto in lettere maiuscole.
SOLUZIONE
Cancellare il tag.

3. warning linea 287
<td class="BarraTitolo2" width="103"><a href="http://notes.regione.vda.it/dbweb/dpl/DPLtab.nsf/Accesso!OpenForm&default_i">Lavoro</a></td>
Utilizzo del carattere & in un URL.
SOLUZIONE
Sostituire & con &amp anche se si tratta di un URL.

4. errore linea 287
E' causato direttamente dall'errore 3. Viene letto il carattere d e ci si aspetterebbe di trovare la a di amp

5. errore linea 287
Causato da errore 3. Si fa riferimento ad una entità "default_i" che non può essere generata da un system identifier

6. errore linea 440
</a><a href="http://www.regione.vda.it/intranet/default_i.asp" class="BarraTitolo1">
Viene chiuso un tag <a> che non è mai stato aperto.
SOLUZIONE
Eliminare </a>.

7. errore linea 461
<TABLE WIDTH="463" BORDER="0" CELLSPACING="0" CELLPADDING="0" HEIGHT="100%">
Non viene riconosciuto HEIGHT come attributo di TABLE.
SOLUZIONE
Poichè TABLE non può avere come attributo HEIGHT, si consiglia di eliminare l'attributo.

8. errore linea 462
<TR HEIGHT="237">
Non viene riconosciuto HEIGTH come attributo di TR.
SOLUZIONE
HEIGTH non è un attributo concesso per TR, va quindi rimosso

9. errore linea 465
<TABLE WIDTH="629" BORDER="0" CELLSPACING="0" CELLPADDING="0" VALIGN="top">
Errore per VALIGN.  Il tag TABLE non accetta come attributo valign.
SOLUZIONE
Eliminarlo dal tag TABLE e inserirlo nel corretto TH

10. errore linea 656
</td></tr></td></tr></table></td></tr>
Non è stato chiuso un tag <table>
SOLUZIONE
Sostituire la riga con la seguente
</td></tr></table></td></tr></table></td></tr>

11. errore linea 713
<TD WIDTH="153" HEIGHT="25"><A HREF=/turismo/default_i.asp>
Link errato
SOLUZIONE
Sostituire il link con <A HREF=./turismo/default_i.asp>

12. errore linea 713
<IMG SRC=img/evid_turismo.jpg ALT="Turismo" ...
Errore nella definizione della sorgente dell'immagine.
SOLUZIONE
Sostituire la riga con
<IMG SRC=./img/evid_turismo.jpg ALT="Turismo" ...

13. errore linea 713
<IMG SRC=img/evid_webcam.jpg ALT="Webcam" BORDER="0" ...
Errore di interpretazione del validatore.

14. errore linea 790
</TABLE></TD></TR>
Chiusura del tag <TD> che non era stato aperto.
SOLUZIONE
Cancellare dalla stringa <TD>.

15. errore linea 791
<TR HEIGHT="2">
Utilizzo del tag <TR> non consentito.
SOLUZIONE
Rimuovere la stringa

Torna all'elenco dei requisiti

Requisito 2
Definizione: Non è consentito l’uso dei frame nella realizzazione di nuovi siti.
Esito della pagina: Rispettato. Non sono presenti frame

Torna all'elenco dei requisiti

Requisito 3
Definizione: 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.
Esito della pagina: Sono presenti immagini prive di alt. In particolare è ricorrente l'uso di transparent.gif.
Soluzione: Affinchè sia evitata la lettura del path dell'immagine da un lettore di schermo, è consigliabile aggiungere come attributo dell'immagine alt="".

Torna all'elenco dei requisiti

Requisito 4
Definizione: Garantire che tutti gli elementi informativi e tutte le funzionalità siano disponibili anche in assenza del particolare colore utilizzato per presentarli nella pagina.
Esito della pagina: Rispettato. Tutte le informazioni sono presenti anche disabilitando i colori.

Torna all'elenco dei requisiti

Requisito 5
Definizione: 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.
Esito della pagina:Rispettato. Non sono presenti scritte lampeggianti.

Torna all'elenco dei requisiti

Requisito 6
Definizione: 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; ove non sia possibile, ricorrere agli stessi criteri di distinguibilità indicati in precedenza.
Esito della pagina: Non ci sono effetti sonori associati alla pagina. Per quanto riguarda il contrasto dei colori e la luminosità, la pagina è stata testata con Color Contrast Analyzer:
-verde e bianco (titolei nei link es. valle d’aosta): La differenza di luminosità fra i due colori non è sufficiente. Il valore di soglia è 125 mentre quello risultante fra il colore di sfondo e di primo piano è 118. La differenza di colore non è sufficiente. Il valore di soglia è 500 mentre quello risultante tra il colore di sfondo e di primo piano è 356.
- nero e grigio (link sulla parte sinistra): La differenza di luminosità fra i due colori è sufficiente. Il valore di soglia è 125 mentre quello risultante tra il colore di sfondo e di primo piano è 206. La differenza di colore è sufficiente. Il valore di soglia è 500 mentre quello risultante tra il colore di sfondo e di primo piano è 619.
- bianco e blu (titoli sulla parte destra es. ANSA): La differenza di luminosità fra i due colori è sufficiente. Il valore di soglia è 125 mentre quello risultante tra il colore di sfondo e di primo piano è 164.  La differenza di colore non è sufficiente. Il valore di soglia è 500 mentre quello risultante tra il colore di sfondo e di primo piano è 459.
- bianco e blu (barra di navigazione a sinistra): La differenza di luminosità fra i due colori è sufficiente. Il valore di soglia è 125 mentre quello risultante tra il colore di sfondo e di primo piano è 186. La differenza di colore è sufficiente. Il valore di soglia è 500 mentre quello risultante tra il colore di sfondo e di primo piano è 524.
- bianco e verde (titolo sulla destra es. meteo): La differenza di luminosità fra i due colori è sufficiente. Il valore di soglia è 125 mentre quello risultante tra il colore di sfondo e di primo piano è 170. La differenza di colore è sufficiente. Il valore di soglia è 500 mentre quello risultante tra il colore di sfondo e di primo piano è 516.
- bianco e verde scuro (titoli “meteo” e “situazione traffico” a destra): La differenza di luminosità fra i due colori è sufficiente. Il valore di soglia è 125 mentre quello risultante tra il colore di sfondo e di primo piano è 170. La differenza di colore è sufficiente. Il valore di soglia è 500 mentre quello risultante tra il colore di sfondo e di primo piano è 516.
- bianco e marrone chiaro (titoli delle immagini a centro pagina): La differenza di luminosità fra i due colori è sufficiente. Il valore di soglia è 125 mentre quello risultante tra il colore di sfondo e di primo piano è 200. La differenza di colore è sufficiente. Il valore di soglia è 500 mentre quello risultante tra il colore di sfondo e di primo piano è 569.
- testi delle immagini a fondo pagina (es. turismo): La differenza di luminosità fra i due colori è sufficiente. Il valore di soglia è 125 mentre quello risultante tra il colore di sfondo e di primo piano è 149. La differenza di colore non è sufficiente. Il valore di soglia è 500 mentre quello risultante tra il colore di sfondo e di primo piano è 463.
- nero e beige (barra di navigazione in alto): La differenza di luminosità fra i due colori è sufficiente. Il valore di soglia è 125 mentre quello risultante tra il colore di sfondo e di primo piano è 200. La differenza di colore è sufficiente. Il valore di soglia è 500 mentre quello risultante tra il colore di sfondo e di primo piano è 569
- nero e bianco (testo scritto in fondo alla pagina): La differenza di luminosità fra i due colori è sufficiente. Il valore di soglia è 125 mentre quello risultante tra il colore di sfondo e di primo piano è 255. La differenza di colore è sufficiente. Il valore di soglia è 500 mentre quello risultante tra il colore di sfondo e di primo piano è 765
- rosso su bianco (simbolo del cuore in fondo alla pagina): La differenza di luminosità fra i due colori è sufficiente. Il valore di soglia è 125 mentre quello risultante tra il colore di sfondo e di primo piano è 191. La differenza di colore è sufficiente. Il valore di soglia è 500 mentre quello risultante tra il colore di sfondo e di primo piano è 528
- nero su azzurrino (“cerca nel sito”): La differenza di luminosità fra i due colori è sufficiente. Il valore di soglia è 125 mentre quello risultante tra il colore di sfondo e di primo piano è 214. La differenza di colore è sufficiente. Il valore di soglia è 500 mentre quello risultante tra il colore di sfondo e di primo piano è 649
- scritta sfumata “benvenuti” (nell’immagine in alto): La differenza di luminosità fra i due colori non è sufficiente. Il valore di soglia è 125 mentre quello risultante fra il colore di sfondo e di primo piano è 65. La differenza di colore non è sufficiente. Il valore di soglia è 500 mentre quello risultante tra il colore di sfondo e di primo piano è 188.
- freccia della ricerca (motore di ricerca): La differenza di luminosità fra i due colori non è sufficiente. Il valore di soglia è 125 mentre quello risultante fra il colore di sfondo e di primo piano è 88. La differenza di colore non è sufficiente. Il valore di soglia è 500 mentre quello risultante tra il colore di sfondo e di primo piano è 247.
- bianco e rosso (titolo della pagina): La differenza di luminosità fra i due colori è sufficiente. Il valore di soglia è 125 mentre quello risultante tra il colore di sfondo e di primo piano è 155. La differenza di colore non è sufficiente. Il valore di soglia è 500 mentre quello risultante tra il colore di sfondo e di primo piano è 474.
Soluzione: nei casi di insufficiente differenza di luminosità e colore, prevedere degli accostamenti di colori che rispettino i valori soglia stabiliti.

Torna all'elenco dei requisiti

Requisito 7
Definizione: 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.
Esito della pagina: Rispettato. Non sono presenti mappe immagine.

Torna all'elenco dei requisiti

Requisito 8
Definizione: In caso di utilizzo di mappe immagine lato server, fornire i collegamenti di testo alternativi necessari per ottenere tutte le informazioni o i servizi raggiungibili interagendo direttamente con la mappa.
Esito della pagina: Rispettato. Non sono presenti mappe immagine.

Torna all'elenco dei requisiti

Requisito 9
Definizione: 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.
Esito della pagina: Non ci sono tabelle dati all'interno della pagina ma il layout del sito è realizzato utilizzando tabelle. Disabilitando le tabelle di layout la navigazione diventa confusa.
Soluzione: Si potrebbe utilizzare il tag <div> per impaginare le informazioni. 

Torna all'elenco dei requisiti

Requisito 10
Definizione: Per le tabelle dati usare gli elementi (marcatori) e gli attributi previsti nella 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.
Esito della pagina: Non sono presenti tabelle dati.

Torna all'elenco dei requisiti

Requisito 11
Definizione: 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.
Esito della pagina: il CSS non è valido, ma disabilitandolo tutte le informazioni risultano essere ancora disponibili.
Soluzione: correggere e validare il CSS

Torna all'elenco dei requisiti

Requisito 12
Definizione: 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.
Esito della pagina: Essendo utilizzate nei CSS misure assolute e non relative, l'adattamento della pagina allo schermo è impossibile. Ridimensionando la finestra o riducendo la risoluzione dello schermo, compaiono le barre di scorrimento orizzontale.
Soluzione: Sostituire nei CSS le misure dei font, espresse in pt, con misure in % o em.

Torna all'elenco dei requisiti

Requisito 13
Definizione: 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.
Esito della pagina: Vengono utilizzate le tabelle per l'impaginazione. In particolare il loro utilizzo viene esteso a tutto il sito. 
Soluzione: Si potrebbe utilizzare il tag <div> per impaginare le informazioni. 

Torna all'elenco dei requisiti

Requisito 14
Definizione: 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.
Esito della pagina: Non è presente il tag <label> in corrispondenza della form di ricerca.
Soluzione: Aggiungere il tag <label> nel seguente modo: <form><label>Cerca nel sito</label><input ....

Torna all'elenco dei requisiti

Requisito 15
Definizione: 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.
Esito della pagina: E' presente un javascript ma serve solo a controllare che il campo del search non sia vuoto. Disabilitandolo viene a mancare questo controllo e viene effettuata una ricerca su tutte le pagine del sito.

Torna all'elenco dei requisiti

Requisito 16
Definizione: 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.
Esito della pagina: Come per il requisito 15.

Torna all'elenco dei requisiti

Requisito 17
Definizione: 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.
Esito della pagina: Come per il requisito 15.

Torna all'elenco dei requisiti

Requisito 18
Definizione: 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.
Esito della pagina: Rispettato. Non sono presenti filmati o presentazioni multimediali.

Torna all'elenco dei requisiti

Requisito 19
Definizione: 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.
Esito della pagina: Non viene utilizzato l'attributo title per i link. Sono presenti inoltre link privi di nome.
Soluzione: nominare tutti i link e possibilmente aggiungere l'attributo title ai link visibili.

Torna all'elenco dei requisiti

Requisito 20
Definizione: Nel caso in cui per la fruizione del servizio erogato in una pagina sia 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.
Esito della pagina: Rispettato. Non sono presenti servizi che richiedano un intervallo di tempo prefissato per essere eseguiti.

Torna all'elenco dei requisiti

Requisito 21
Definizione: 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 orizzontali e verticali 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.
Esito della pagina: Non sono presenti scorciatoie da tastiera. La navigazione a tab è a tratti frustrante. Ciò è dovuto anche all'uso intensivo di tabelle.
Soluzione: Aggiungere l'attributo accesskey ai link diretti a sezioni ritenute importanti del sito. Inoltre si consiglia di aggiungere skip link per gli utenti utilizzatori di lettori di schermo.

Torna all'elenco dei requisiti

Requisito 22
Definizione: Per le pagine di siti esistenti che non possano rispettare i sopraelencati 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.
Esito della pagina: Non esistono pagine accessibili e conformi alla normativa.
Soluzione: E' consigliabile realizzare delle pagine di solo testo, costantemente aggiornate, per tutti i contenuti presenti sul sito e pianificare il passaggio ad un sito conforme almeno ai requisiti tecnici della normativa.

Torna all'elenco dei requisiti

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