Logo Università degli studi di Udine

Università degli studi di Udine

Corso di laboratorio di Progettazione di siti e portali web

Dettagli dei requisiti della conformità della pagina ORARI


Torna alla tabella
Ecco uno per uno i requisiti imposti:

Requisito 1: Validità del codice

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


Questa è la pagina da noi analizzata con più errori in compilazione. Qui di seguito faremo una panoramica generale degli errori più gravi riscontrati.

ERRORI RISCONTRATI:

All'interno del tag non sono stati dati valori ai margini.

SOLUZIONE:

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#ffffff"> Mettere dei valori adatti ad impostare gli attributi del body.In alternativa non usare attributi di dimensione al body.

PROBLEMA:

All'inizio del codice manca ancora il DOCTYPE.

SOLUZIONE:

<html><head>
<meta content="http://schemas.microsoft.com/intellisense/ie5 name=vs_targetschema">
<title>Alpi Eagles Spa</title>
...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<html><head>
<meta content="http://schemas.microsoft.com/intellisense/ie5 name=vs_targetschema">
<title>Alpi Eagles Spa</title>
...

PROBLEMA:

Manca il tag di chiusura.
<link href="CSS/styles.css" rel="stylesheet" type="text/css">

SOLUZIONE:

<link href="CSS/styles.css" rel="stylesheet" type="text/css"/>

PROBLEMA:

Ci sono elementi di contenuto con elementi di presentazione insieme.

<a style="color: rgb(0, 0, 128); text-decoration: none;" href="http://www.simod.it/alpieagles/alpi/alpimedia/media.htm">
AlpiEagles per i media</a>

SOLUZIONE:

Eliminare i tag di presentazione ed affidarli al CSS.

<a href="http://www.simod.it/alpieagles/alpi/alpimedia/media.htm"> AlpiEagles per i media</a>
Torna ad inizio pagina

Requisito 2: No Frame

"Non è consentito l'uso dei frame nella realizzazione di nuovi siti, ad eccezione di quelli già esistenti."


In questo caso il requisito è soddisfatto, infatti non sono presenti frame di alcun genere.

SOLUZIONE:

Non serve alcun tipo di soluzione.
Torna ad inizio pagina

Requisito 3: Alternativa testuale

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


Nello studio delle immagini, ciò che abbiamo trovato sono immagini del tipo ; per ognuna delle tipologie comunque è stato trovato lo stesso fallimento del requisito 3. L'alternativa testuale è assente, e questo è considerato un problema non di poco conto, ad esempio nella scelta della lingua l'assenza dell'immagine provoca l'impossibilità di cambiare la lingua e quindi per un browser testuale tutta la sezione del sito in altre lingue risulta impraticabile.Questa è la pagina con più errori di questo tipo.
Vediamo alcuni esempi:

ESEMPI:

Questi 4 tipi di errori riguardano le immagini di spaziamento e sono molto frequenti in quanto sono utilizzati all'interno di una tabella dati enorme, che contiene gli orari dei voli.

..." src="images/spacer.gif" width="190"></TD>
...eccia_giu.gif" width="12" height="15"></div>
..." colspan="3"><img src="images/spacer.gif"></td>
...olspan='8'><img src='images/line.gif'></td></tr><tr bgColor='#999999'>

SOLUZIONE:

Fornire l'attributo ALT="" in tutte le immagini di tipo spaziatore.
Torna ad inizio pagina

Requisito 4: Colore

"Garantire che tutti gli elementi informativi e tutte le funzionalità siano disponibili anche in assenza del particolare colore utilizzato per presentarli nella pagina."


I colori utilizzati sono prevalentemente freddi, e perciò non risulta grave la mancanza di essi.
Infatti se usufruiamo della stessa pagina in bianco e nero risultano comprensibile i contenuti.

SOLUZIONE:

Non serve alcun tipo di soluzione.
Torna ad inizio pagina

Requisito 5: Scritte lampeggianti

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

La pagina non contiene scritte lampeggianti.

Torna ad inizio pagina

Requisito 6: Contrasto

"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"


I maggiori ostacoli alla buona fruizione di un sito web attengono agli utenti ciechi o ipovedenti, poichè gran parte dell'effetto di un sito è affidato all'impatto grafico-visivo. Un abbinamento sbagliato di colori tra sfondo e testo non solo rende la lettura più difficoltosa a ogni utente, ma rende la pagina praticamente illeggibile per un utente daltonico. Si dovrebbe garantire un forte contrasto tra i colori del testo e dello sfondo, evitando i motivi di sfondo troppo elaborati che disturbano la lettura
Nel nostro caso, tra le pagine che abbiamo visitato non sono sorti problemi, quindi possiamo affermare che il requisito 6 è risulta validato.

ESEMPIO:I colori della tabella sono chiari e distinguibili.

Contrasto colori nella pagina Orari

Torna ad inizio pagina

Requisito 7/8: Mappe Immagine

"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"

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

La pagina non contiene mappe immagine.
Torna ad inizio pagina

Requisito 9,10: Tabelle dati

"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"

"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"
Il discorso relativo alle tabelle è il più delicato per quanto riguarda la pagina; essa è infatti composta prevalentemente da una lunga tabella contenente le partenze,gli arrivi e gli orari della campagnia per un dato periodo. La tabella deve essere il più accessibile possibile per far poter comprendere a TUTTI i vari spostamenti degli aerei Alpieagles.
Vedremo di seguito gli errori più gravi riscontrati.

PROBLEMA:

Il tag <TABLE> è stato chiuso PRIMA dei tag relativi alle righe e alle colonne.
Questo problema si manifesta molte altre volte all'interno della pagina.
...0%' align='center' border='0'></table></td></tr><tr><td class='ver9'..

SOLUZIONE:

...0%' align='center' border='0'></td></tr></table><tr><td class='ver9'..

PROBLEMA:

Non è presente il tag SUMMARY che descrive la tabella ad un utente di browser testuale.
Questo problema si manifesta molte altre volte all'interno della pagina.
<table border="0" cellpadding="0" cellspacing="0" width="720">

SOLUZIONE:

<table border="0" summary="Tabella con funzione di menu con le voci principali riguardo Alpieagles S.P.A."cellpadding="0" cellspacing="0" width="720">

PROBLEMA:

Non c'è differenza tra celle d'intestazione e celle normai di dati.
Questo problema si manifesta molte altre volte all'interno della pagina.

<table align="center" border="0" cellpadding="1" cellspacing="0" width="95%">
<tbody><tr bgcolor="#999999"><td class="ver9" colspan="8" height="20">
<strong> ALGHERO - BARI</strong></td></tr><tr bgcolor="#cccccc">
<td class="ver9" width="16%"><div align="left"><strong> Volo</strong></div></td>..

SOLUZIONE:

<table align="center" border="0" cellpadding="1" cellspacing="0" width="95%">
<tbody><th bgcolor="#999999"><th class="ver9" colspan="8" height="20">
ALGHERO - BARI</th></th>

<td bgcolor="#cccccc"> <td class="ver9" width="16%"><div align="left"><strong> Volo</strong></div></td>..

Nel caso l'intestazione non compaia in grassetto, modificare così il CSS associato:
TH {text-weight: normal; text-align: left}

PROBLEMA:

Non sono associate le celle d'intestazione con quelle dei dati
Prendiamo come esempio il caso precedente (modificato da noi).

<table align="center" border="0" cellpadding="1" cellspacing="0" width="95%">
<tbody><th bgcolor="#999999"><th class="ver9" colspan="8" height="20">
ALGHERO - BARI</th></th>
<td bgcolor="#cccccc"> <td class="ver9" width="16%"><div align="left"><strong> Volo</strong></div></td>..

SOLUZIONE:

Associare la riga dopo l'intestazione con l'attributo SCOPE relativo alla riga o colonna(dato che si tratta di una tabella semplice).

<table align="center" border="0" cellpadding="1" cellspacing="0" width="95%">
<tbody><th bgcolor="#999999"><th class="ver9" <SCOPE="row" colspan="8" height="20">
ALGHERO - BARI</th></th><td bgcolor="#cccccc">
<td class="ver9" <SCOPE="col" width="16%"><div align="left"><strong> Volo</strong></div></td>..

PROBLEMA:

Manca un titolo interpretabile subito da un browser testuale.Inolte eliminare gli attributi deprecati in XHTML 1.0
Prendiamo come esempio il solito caso (modificato da noi).

<table align="center" border="0" cellpadding="1" cellspacing="0" width="95%">
<tbody><th bgcolor="#999999"><th class="ver9" colspan="8" height="20">
ALGHERO - BARI</th></th>
<td bgcolor="#cccccc"> <td class="ver9" width="16%"><div align="left"><strong> Volo</strong></div></td>..

SOLUZIONE:

Aggiungere il campo CAPTION all'interno delle intestazioni di ogni tabella, che descriva brevemente il contenuto senza per forza scorrerla tutta (sempre nel caso di browser testuale).Inolte eliminare gli attributi BGCOLOR,ALIGN,BORDER.

<table cellpadding="1" cellspacing="0" CAPTION="Tabella degli orari di tutti i voli dell'Alpieagles in Italia e In Europa" width="95%">
<tbody><th bgcolor="#999999"><th class="ver9" <SCOPE="row" colspan="8" height="20">
ALGHERO - BARI</th></th><td bgcolor="#cccccc">
<td class="ver9" <SCOPE="col" width="16%"><strong> Volo</strong></div></td>..

Torna ad inizio pagina

Requisito 11: Fogli di stile

"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"

La pagina una volta tolto il foglio di stile è ancora chiara e comprensibile.

ESEMPIO:

Pagina Orari senza CSS

Requisito 12: Liquid layout

"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"

La pagina risponde bene al ridimensionamento della finestra del Browser. Come si vede dall'esempio è possibile scorrere in verticale e orizzontale attraverso i due scrollbar senza che ci siano sovrapposizioni di elementi, ma ciò per un ipovedente ad esempio è causa di perdita di tempo,fatica,attenzione...Tuttavia non sono state utilizzate misure relative per i componenti (EM e %).

ESEMPIO:

Ridimensionamento pagina Orari
Torna ad inizio pagina

Requisito 13: Tabelle Layout

"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"


Per quanto riguarda il mancato utilizzo degli attributi SUMMARY, TH, HEADERS (che sono relativi a tabelle di dati), il requisito è soddisfatto.
Torna ad inizio pagina

Requisito 14: Form

"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"


In questa pagina non sono presenti moduli FORM.
Torna ad inizio pagina

Requisito 15: Script,applet..

"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"


In questa pagina non sono presenti SCRIPT di alcun genere.
Torna ad inizio pagina

Requisito 16: Eventi

"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"


PROBLEMA:

Senza Javascript non si ottiene l'effetto di rollover su un pulsante

<td class="BarraAlpi" onmouseover="this.className='BarraAlpiOn'" onmouseout="this.className='BarraAlpi'" align="center" height="19" width="116"><a href="http://www.alpieagles.com/default.aspx?lang=it" style="color: rgb(255, 255, 255); text-decoration: none;">Biglietti on line</a></td>

SOLUZIONE:

Sostituire onmouseover con onfocus e onmouseout con onblur

<td class="BarraAlpi" onfocus="this.className='BarraAlpiOn'" onblur="this.className='BarraAlpi'" align="center" height="19" width="116"><a href="http://www.alpieagles.com/default.aspx?lang=it" style="color: rgb(255, 255, 255); text-decoration: none;">Biglietti on line</a></td>
Torna ad inizio pagina

Requisito 17: Script,applet,PDF...

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


Non ci sono oggetti che utilizzano tecnologie non definite da grammatiche formali.
Torna ad inizio pagina

Requisito 18: Applicazioni multimediali

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


Nella pagina non sono presenti filmati.
Torna ad inizio pagina

Requisito 19: Link non ambigui

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

Gli unici link sono quelli della barra orizzontale superiore (identica a quella della homepage) e quelli del menu laterale che manda l'utente alle pagine per conoscere Alpieagles (la loro compagnia,flota..) oppure ai servizi online, o ancora a servizi speciali (ad esempio per agenzie di viaggio..).
In tutti i casi sono chiare le destinazioni dei link.

ESEMPI:

<a style="color: rgb(0, 0, 128); text-decoration: none;" href="http://www.simod.it/alpieagles/alpi/alpimedia/media.htm"> AlpiEagles per i media</a>
<a style="color: rgb(0, 0, 128); text-decoration: none;" href="http://www.alpieagles.com/documenti/timetable.zip"> Scarica il TimeTable</a>
<div align="right"><a href="http://www.alpieagles.com/laflotta.aspx?lang=it" class="blue">La Flotta</a></div>

Torna ad inizio pagina

Requisito 20: Temporizzazioni

"Nel caso che per la fruizione del servizio erogato in una pagina è 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."


Non ci sono avvisi che inducono all'attesa l'utente per qualche tipo di azione.

Torna ad inizio pagina

Requisito 21: Link distanti

"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 orizzontale e verticale 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."

PROBLEMA:

I link del menu superiore sono troppo vicini.

Menu superiore

CODICE:

<tr> <td class="BarraAlpi" onmouseover="this.className='BarraAlpiOn'" onmouseout="this.className='BarraAlpi'" align="center" height="19" width="116"><a href="http://www.alpieagles.com/default.aspx?lang=it" style="color: rgb(255, 255, 255); text-decoration: none;">Biglietti <on line</a></td> <td class="BarraAlpi" onmouseover="this.className='BarraAlpiOn'" onmouseout="this.className='BarraAlpi'" align="center" height="19" width="125"><a href="http://www.alpieagles.com/orari.aspx?lang=it" style="color: rgb(255, 255, 255); text-decoration: none;">Orario <on line</a></td> <td class="BarraAlpi" onmouseover="this.className='BarraAlpiOn'" onmouseout="this.className='BarraAlpi'" align="center" height="19" width="91"><a href="http://www.alpieagles.com/destinazioni.aspx?lang=it" style="color: rgb(255, 255, 255); text-decoration: none;">Destinazioni</a></td> <td class="BarraAlpi" onmouseover="this.className='BarraAlpiOn'" onmouseout="this.className='BarraAlpi'" align="center" height="19" width="120"><a href="http://www.alpieagles.com/registra_agenzie.aspx?lang=it" style="color: rgb(255, 255, 255); text-decoration: none;">Agenzie <di viaggio</a></td> <td class="BarraAlpi" onmouseover="this.className='BarraAlpiOn'" onmouseout="this.className='BarraAlpi'" align="center" height="19" width="83"><a href="http://www.alpieagles.com/contatto.aspx?lang=it" style="color: rgb(255, 255, 255); text-decoration: none;">Informazioni</a></td> <td class="BarraAlpi" onmouseover="this.className='BarraAlpiOn'" onmouseout="this.className='BarraAlpi'" align="center" height="19" width="129"><a style="color: rgb(255, 255, 255); text-decoration: none;" href="http://www.alpieagleshotels.com/servlet/Main?rlnk=26425">Prenota <il tuo hotel</a></td> </tr>

SOLUZIONE:

Aggiungere una distanza tra loro di almeno 0.5em.
Torna ad inizio pagina

Requisito 22:Pagine equivalenti

"Per le pagine di siti esistenti che non possano rispettare i suelencati 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."

Il sito non solo non è conforme alla maggior parte dei requisiti sovrastanti, ma non è in grado di fornire pagine equivalenti accessibili, continuando ancora a non poter avere utenti con disabilità tra i clienti online.

SOLUZIONE:

Fornire un sistema completo di "sito alternativo", che magari si basi meno sulla grafica ma che sia accessibile a tutti.
Torna ad inizio pagina