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 DESTINAZIONI


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(errore già riscontrato in altre pagine).

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#ffffff">

SOLUZIONE:

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.

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

Errore di sintassi dell'attributo VIEWASTEXT

... id="mappa" align="middle" VIEWASTEXT>

SOLUZIONE:

... id="mappa" align="middle" viewastext="Mappa"

PROBLEMA:

Mancata chiusura tag Embed

<embed src="destinazioni.aspx_files/mappa.swf" quality="high" bgcolor="#ffffff" name="mappa" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" align="center" height="237" width="528">

SOLUZIONE:

<embed src="destinazioni.aspx_files/mappa.swf" quality="high" bgcolor="#ffffff" name="mappa" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" align="center" height="237" width="528" / >

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 sono numerose anche qui le immagini senza ALT. L'alternativa testuale è assente, e questo è considerato un problema molto grave.

ESEMPI:

Logo alpieagles
...ges/it/logoalpi01.jpg" alt="" border="0" height="113" width="649" />

SOLUZIONE:

...ges/it/logoalpi01.jpg" alt="" border="0" height="113" width="649" alt="Logo Alpiealges" />
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."


Anche eliminando i colori, considerando quello che è stato detto per le altre pagine e notando che i colori tra le pagine variano di pochissimo o sono identici, possiamo affermare che in assenza di colori la pagina è comunque leggibile ed i servizi quindi usufruibili.
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 presenta 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.

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"

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


PROBLEMA:

All'interno della pagina compare solamente una mappa realizzata in FLASH di tipo lato client.Ciò rispetta il requisito 7, tuttavia in assenza di plugin Flash non è possibile visualizzarla.

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=6,0,0,0" id="mappa" viewastext="" align="middle" height="237" width="528"> <param name="allowScriptAccess" value="sameDomain"> <param name="movie" value="images/it/mappa.swf"> <param name="quality" value="high"> <param name="bgcolor" value="#ffffff"> <embed src="../img/mappa.swf" quality="high" bgcolor="#ffffff" name="mappa" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" align="center" height="237" width="528"> </object>

SOLUZIONE

Fornire un'alternativa compatibile con qualunque browser (testuale,statica..)
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"

Nella pagina grosso peso insieme alla mappa ce l'ha la tabella che indica le informazioni sulle destinazioni (hotel,comuni..).

PROBLEMA:

Fare differenza tra tag d'intestazione (TH) e tag di dati (TD) e collegarli alle celle dati corrispondenti.

<tbody>
<tr bgcolor="#004488">
<td class="bianco" colspan="3" height="15"> <strong>
INFO DESTINAZIONI:</strong></td>
</tr>

SOLUZIONE:

Uso di TH,TD e SCOPE

<tbody>
<th bgcolor="#004488">
<th SCOPE="ROW" class="bianco" colspan="3" height="15"> <strong>
INFO DESTINAZIONI:</strong></th>
</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 comprensibile ma all'interno della tabella le voci si sfalsano di qualche posizione e risulta un pò più difficoltoso l'apprendimento. Inoltre il cambiamento del constrasto del titolo lo fa risultare meno leggibile (2 colori scuri per il FOREGROUND e BACKGROUND).

ESEMPIO:

Pagina Orari 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:

Il contenuto dopo il ridimensionamento rimane uguale, e occorre utilizzare molto i due scrollbar.

Ridimensionamento pagina Destinazioni
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:

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


PROBLEMA:

La pagina contiene degli script che si attivano con il rollover del mouse.Disattivando javascript l'effetto scompare.


SOLUZIONE:

Occorre realizzare lo stesso effetto utilizzando ad esempio il tag HOVER sui link all'interno del CSS.
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:

All'interno della pagina compare solamente una mappa realizzata in FLASH di tipo lato client.Ciò rispetta il requisito 7, tuttavia in assenza di plugin Flash non è possibile visualizzarla.

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=6,0,0,0" id="mappa" viewastext="" align="middle" height="237" width="528"> <param name="allowScriptAccess" value="sameDomain"> <param name="movie" value="images/it/mappa.swf"> <param name="quality" value="high"> <param name="bgcolor" value="#ffffff"> <embed src="../img/mappa.swf" quality="high" bgcolor="#ffffff" name="mappa" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" align="center" height="237" width="528"> </object>

SOLUZIONE

Fornire un'alternativa compatibile con qualunque browser (testuale,statica..)

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

FATTO:

I link nella tabella sono ad una distanza ragionevole.

Parte di tabella delle destinazioni

MIGLIORAMENTO:

Utilizzare misure relative per la distanza tra link (em oppure %).
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