"" 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 (turismo)

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: La pagina presenta 86 errori.
Soluzione:
- Elementi usati con attributi obbligatori mancanti:
Esempio: attributo type in <script language="VBScript">
Soluzione: inserire nei tag gli attributi mancanti
- Attributi inesistenti:
Esempio: attributo leftmargin in <body bgcolor="#FFFFFF" leftmargin="0">   
Soluzione: utilizzare nei tag gli attributi previsti dalla specifica del linguaggio
- Attributo obbligatorio ALT non specificato:
Esempio: <img src="/img/bianco.gif" width="750" height="5"></td>
Soluzione: inserire nei tag dove richiesto l’attributo ALT
- Nessuna referenza per un’entità usata:
Esempio: &fk_categoria=90
Soluzione: solitamente questo errore deriva da un errore nello spelling, da un errore nella codifica del carattere “&” o dall’assenza di “;”. In questo caso deriva dall’uso del carattere “&”. L’esatta codifica è “&amp”. La corretta referenza per un entità deve cominciare con un “&” e finire con un “;”
- Entità non definita (errore in cascata dal precedente):
Soluzione: questo errore deriva in cascata dal precedente: codificando correttamente la “&” e rispettando la sintassi delle entità il problema si risolve
- Riferimento a entità non identificate (errore in cascata)
Soluzione: anche questo è un errore in cascata. La soluzione è la stessa dei due errori precedenti
- Tipo errato del valore di un attributo
Esempio: onload=resizemenu()
Soluzione: Il valore di un attributo dev’essere un letterale a meno che non contenga solo name characters
- La specifica di un attributo deve cominciare con un nome
Esempio: ...sf/RicercaITA?Openform" TARGET="_New"">Guida disabili</A></TD>
Soluzione: un nome di attributo deve cominciare con un carattere di un insieme ristretto. Questo errore solitamente indica che non si è usato il carattere ‘”’ per chiudere il valore di un precedente attributo (così il valore di attributo sembra l’inizio di un nuovo attributo) oppure si è usato un attributo non definito.
- Uso di carattere non SGML numero 146
Esempio: get='_blank'>Programma delle attivita¼/strong>? e calendario osservazioni 2006</A>
Soluzione: rimpiazzare il carattere con l’equivalente ASCII più vicino
- Tag innestati in modo sbagliato
Soluzione: Aprire e chiudere i tag nell’ordine corretto
- Elemento indefinito
Esempio: ssnoindex in <ssnoindex><div class=TestoCentrato>Pagina
Soluzione: usare elementi definiti precedentemente.
Correggere gli errori sopra indicati, unire il DOCTYPE e programmare la transizione da HTML 4.01 Transitional a HTML 4.01 Strict

Torna all'elenco dei requisiti

Requisito 2
Definizione: Non è consentito l’uso dei frame nella realizzazione di nuovi siti.
Esito della pagina: Rispettato. La pagina non contiene 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 diverse immagini prive dell'attributo alt obbligatorio. Non ci sono alt significativi per immagini significative come la cartina del meteo (per quella del traffico non è presente). Non ci sono alt vuoti per immagini decorative. Anche quando gli attributi alt sono utilizzati si riscontrano degli errori. Infatti per immagini decorative a volte c’è un’alternativa testuale inutile, es. img: img src="/img/transparent.gif". Le immagini al centro della pagina sono cliccabili e hanno alt uguale al link testuale. Quindi usando il sito con la tastiera e sostituendo le immagini con l’alt si incontrano due volte le stesse etichette (una per il link e una per l’immagine cliccabile). A volte si incontra un problema linguistico: l’immagine propone un’ etichetta in italiano, mentre l’alt è in francese.  Aggiornando la pagina si visualizzano immagini diverse e queste hanno l’ALT appropriato.
Soluzione: fornire un valore significativo per l'alt utilizzato in immagini significative, ma evitare il ripetersi di link con etichette uguali. Utilizzare alt="" per immagini esclusivamente decorative.

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: visualizzando la pagina in scala di grigi, i link su cui si scorre il mouse non sono distinguibili dagli altri (barre di navigazione a sinistra e a destra). I testi sulle immagini risultano poco contrastati e la cartina del traffico risente dell’alterazione visto che usa dei simboli colorati.
Soluzione: rivedere le combinazioni di colori utilizzate e modificare la cartina del traffico in modo da renderla significativa anche in assenza di 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. Nella pagina non ci sono oggetti o 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 Analyser:
- 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 blu (titolo “turismo” della barra di navigazione a sinistra e al centro): 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 è 163.
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 verde (titoli della barra di navigazione a sinistra): 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 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 grigio (link per il cambiamento della lingua): 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 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
- 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
- rosso su bianco (logo “valle d'aosta è bella sempre” 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 è 181.
La differenza di colore è sufficiente. Il valore di soglia è 500 mentre quello risultante tra il colore di sfondo e di primo piano è 520
- 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: nella pagina non ci sono mappe immagine client-side o server-side.

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: nella pagina non ci sono mappe immagine client-side o server-side.

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: nella pagina non ci sono tabelle dati, ma solo tabelle di layout.

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: nella pagina non ci sono tabelle dati, ma solo tabelle di layout.

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: nella pagina sono presenti solo tabelle layout. Le informazioni sono visibili anche linearizzando le tabelle. Per definire le tabelle sono stati usati solo tag table, tr e td. Non ci sono elementi th, né summary. Sono stati utilizzati 3 attributi div, ma non sono significativi.
Soluzione: utilizzare opportunamente i tag  per una definizione corretta delle tabelle di layout.

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: nella pagina è presente solo un form per il motore di ricerca. L’etichetta di questo form non è correttamente associata al controllo (nel codice è presente solo il tag input).
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: nella pagina non ci sono applet, ma è presente Java Script. Disabilitando gli script la pagina è utilizzabile senza perdita di informazione

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: nella pagina non ci sono applet e gestori di eventi, in quanto non ci sono attributi onmouseover, onfocus, onclick, onkeypress oppure onchange.

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: nella pagina non ci sono applet, né documenti PDF. Ci sono script Java Script, ma non veicolano l'informazione.

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: nella pagina non ci sono informazioni 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: sostituendo le immagini con l’alt si ottengono sequenze di due link uguali che portano alle stesse pagine. Alcuni link non sono comprensibili, sia presi nel loro contesto sia fuori dal contesto.
Esempio:  link “webcam” a sinistra e “webcams” al centro portano alla stessa pagina. Il link “link” nella barra in alto non ha un’etichetta significativa.
Soluzione: eliminare i link ripetuti e se il problema si presenta con le immagini, prevedere un alt vuoto. Dare etichette più significative ai link ambigui.

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:nella pagina non sono previste temporizzazioni.

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: l’etichetta della form è presente nella barra di navigazione e non su pulsante e quindi non presenta problemi di selezione. Nel CSS non sono presenti indicazioni sulla separazione verticale o orizzontale dei link. Non ci sono accesskey o skip links per acceder più velocemente al contenuto e la navigazione solo con tastiera è molto lunga.
Soluzione: prevedere la separazione dei link di almeno 1 em nel CSS e la presenza di accesskey per velocizzare la navigazione.

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: la pagina non rispetta i requisiti, ma non è prevista una pagina equivalente accessibile.
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!