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 tabella VOLI


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


Come già spiegato tra tutte le pagine da noi visitate non ne compare nessuna valida. Il codice è pieno di errori che vanno dalla mancanza di attributi a errori sintattici. Qui di seguito faremo una panoramica generale degli errori più gravi riscontrati.

ESEMPI:

PROBLEMA:

All'inizio del codice manca ancora il DOCTYPE(errore causato da copia/incolla delle pagine e quindi propagato).

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

SOLUZIONE:

<!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 del BODY

<body leftmargin="0" topmargin="0" onunload="trydis()" bgcolor="#ffffff" marginheight="0" marginwidth="0">

SOLUZIONE:

<body leftmargin="0" topmargin="0" onunload="trydis()" bgcolor="#ffffff" marginheight="0" marginwidth="0" />

PROBLEMA:

Non è riconosciuto l'attributo absBottom.
... src="images/dot_divider.gif" align="absBottom">

SOLUZIONE:

Utilizzare uno tra gli attributi "TOP", "MIDDLE", "BOTTOM", "LEFT", "RIGHT".
... src="images/dot_divider.gif" align="absBottom">

PROBLEMA:

Il codice di contenuto e presentazione viene utilizzato nella stessa riga.
<img src="mxSelezioneVoli.aspx_files/dot_divider.gif" align="absbottom">
<a href="http://www.maxxcom.it/" target="_blank"><img src="mxSelezioneVoli.aspx_files/logo_crs5.gif" border="0" height="17" width="109"></a>
</strong>

SOLUZIONE:

Dvidere il contenuto (pagina HTML o XHTML) dalla presentazione (CSS).
<div class="selezionaVoli">
<img src="mxSelezioneVoli.aspx_files/dot_divider.gif" align="absbottom">
<a href="http://www.maxxcom.it/" target="_blank"><img src="mxSelezioneVoli.aspx_files/logo_crs5.gif" ></a>
</strong>
</div>

CSS:

.selezionaVoli{
border:0;
height:17
width:109;
}

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


Nella pagina non sono presenti frame.
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 di vario 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.

ESEMPIO 1:

<img src="images/arrow.gif">  

SOLUZIONE:

<img src="images/arrow.gif" alt="Freccia">  

ESEMPIO 2:

...timetable.jpg" width="14" height="16">

SOLUZIONE:

...timetable.jpg" width="14" height="16"alt="Tabella orari">

ESEMPIO 3:

...ht="18" src="images/bott_mailing2.gif" width="21">

SOLUZIONE:

...ht="18" src="images/bott_mailing2.gif" width="21"alt="Bootone MailingList">
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."


In questa pagina a differenza delle altre il colore cambia, soprattutto per quanto riguarda la tabella dei voli, che a secoda della tariffa suddivide in colonne colorate i voli. Determinante quindi è la scelta cromatica all'interno della pagina. Se considerassimo l'ipotesi che un utente daltonico entri nella pagina per prenotare un volo, il tempo di ricerca sarebbe molto superiore e con un alto tasso di errore e confusione
I colori utilizzati sono i seguenti:

Colori usati in pagina Voli

I colori più vivaci sono usati all'interno della tabella.Senza tali colori la capacità di comprensione scende molto. Ecco come si presenta la pagina senza colori nella tabella:

Tabella senza colori

SOLUZIONE:

Fare meno affidamento sui colori e utilizzare gli attributi testuali per identificare le voci(grassetto,sottolineatura..)
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."


Nella pagina non sono presenti 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
In questa pagina ci siamo concentrati sulla tabella, vero contenuto informativo, notando che il contrasto è buono tra FOREGROUND e BACKGROUND, perchè utilizza colori tenui (sia caldi che freddi) per lo sfondo e una marcatura nera per il testo.

ESEMPIO:I colori della tabella sono chiari e distinguibili.

Tabella visualizzazione contrasto colori
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"


La pagina non utilizza 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, come era accaduto per la pagina degli orari; essa è infatti composta prevalentemente da una lunga tabella contenente i voli dopo una richiesta inoltrata da un form nella pagina precedente. La tabella deve essere il più accessibile possibile per far poter comprendere a TUTTI quali sono i voli disponibili, gli orari ,le tariffe e i codici di volo.
Vedremo di seguito gli errori più gravi riscontrati.

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 align="center" bgcolor="#004488" border="0" cellpadding="1" cellspacing="1" width="720">

SOLUZIONE:

<table align="center" summary="Tabella riguardante gli orari,tariffe,prezzi e codici volo tra le destinazioni richieste dall'utente"bgcolor="#004488" border="0" cellpadding="1" cellspacing="1" 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.

<td style="border-color: rgb(0, 0, 0); border-top: 1px solid rgb(0, 0, 0); border-left: 1px solid rgb(0, 0, 0); border-bottom: 1px solid rgb(0, 0, 0);" height="18">
<div class="blue" align="center">Data</div>
</td>

SOLUZIONE:

<th style="border-color: rgb(0, 0, 0); border-top: 1px solid rgb(0, 0, 0); border-left: 1px solid rgb(0, 0, 0); border-bottom: 1px solid rgb(0, 0, 0);" height="18">
<div class="blue" align="center">Data</div>
</th>
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).

<th style="border-color: rgb(0, 0, 0); border-top: 1px solid rgb(0, 0, 0); border-left: 1px solid rgb(0, 0, 0); border-bottom: 1px solid rgb(0, 0, 0);" height="18">
<div class="blue" align="center">Data</div>
</th>

SOLUZIONE:

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

<th style="border-color: rgb(0, 0, 0); <SCOPE="col" border-top: 1px solid rgb(0, 0, 0); border-left: 1px solid rgb(0, 0, 0); border-bottom: 1px solid rgb(0, 0, 0);" height="18">
<div class="blue" align="center">Data</div>
</th>

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

<th style="border-color: rgb(0, 0, 0); SCOPE="col" border-top: 1px solid rgb(0, 0, 0); border-left: 1px solid rgb(0, 0, 0); border-bottom: 1px solid rgb(0, 0, 0);" height="18">
<div class="blue" align="center">Data</div>
</th>

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,prezzi,codici volo oridanti per categoria dei voli richiesti dall'utente" width="95%">
<th SCOPE="col" height="18">
<div class="blue" >Data</div>
</th>
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.L'unica nota stonata la possono dare i caratteri che aumentando di grandezza riempiono lo spazio in maniera leggermente più disordianta.

ESEMPIO:

Pagina Voli senza CSS
Torna ad inizio pagina

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:

La pagina mantiene sempre la stessa grandezza, per visualizzare tutta la tabella occorre usare i due scrollbar
Ridimensionamento pagina voli
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"


La pagina è strutturata come una tabella (non ci sono marcatori DIV) nella quale non compaiono intestazioni di tabelle dati (ad esempio tag SUMMARY,TH,HEADERS). Le informazioni all'interno se vengono lette linearmente risultano chiare e comprensibili perchè strutturate in maniera adeguata.

ESEMPIO 1:

Struttura ordinata delle tabelle all'inizio pagina.

<table align="center" border="0" cellpadding="0" cellspacing="0" width="720">
...</table>
<table border="0" cellpadding="0" cellspacing="0" width="720">
...</table>
<table border="0" width="729">
<td class="BarraAzzurra" colspan="7" height="19" width="792">
<table cellpadding="0" cellspacing="0" width="100%">
....
....
..</table>
....</table>

ESEMPIO 2:


Struttura tabellare pagina dei voli

Struttura ordinata delle tabelle dei voli (versione grafica).
I colori rappresentano le tabelle dello stesso livello

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"


ESEMPIO:

<form id="cambiadata" name="cambiadata" method="post" action="mxSelezioneVoli.aspx">
<input name="lang" value="it" type="hidden">
<input name="FL_TravelMode" value="" type="hidden">
<input name="FL_Departure" value="VCE" type="hidden">

SOLUZIONE:

<form id="cambiadata" name="cambiadata" method="post" action="mxSelezioneVoli.aspx">
<label for="lingua" type="hidden">lingua</label>
<input name="lang" value="it" type="hidden" id="lingua">
<label for="travelmode" type="hidden">travelmode</label>
<input name="FL_TravelMode" value="" type="hidden id="travelmode">
<label for="departure" type="hidden">departure</label>
<input name="FL_Departure" value="VCE" type="hidden" id="departure">
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"


PROBLEMA:

Gli script interni della pagina sono l'unico mezzo per poter scorrere in avanti le pagine degli orari. Disattivando il javascript è possibile solamente visualizzare la prima pagina degli orari

SOLUZIONE:

Occorre affidare il link da una pagina all'altra al linguaggio HTML, tramite un collegamento ipertestuale.
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"


Gli eventi relativi alla pagina riguardano il linguaggio Javascript.

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>

PROBLEMA:

Senza Javascript non si viene avvertiti dell'errore che si sta commettendo.

Alert javascript

SOLUZIONE:

Sostituire l'evento dipendente da javascript con un'alternativa testuale (magari un link ad una pagina HTML di errore).

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


Gli oggetti in questa pagina che non sono definiti da grammatiche formali sono solo script, come già visto sono accessibili solamente se il browser è supporta il medesimo linguaggio.
Infine non ci sono documenti o link a documenti PDF nella 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.

PROBLEMA:

I link del menu di selezione pagine sono troppo vicini.


Menu cambio pagina voli

SOLUZIONE:

Aggiungere una distanza tra loro di almeno 0.5em.
Ecco un esempio grafico:
Menu cambio pagina voli

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