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 HOMEPAGE


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:

Queste sono le prime righe di codice della homepage.


<HTML>
<HEAD>
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<title>Alpi Eagles Spa - Home Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Fade(duration=.5)" />
<link href="CSS/styles.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" media="all" href="scripts/jscalendar/calendar-win2k-cold-1.css" title="win2k-cold-1"></script>
....
<script language="Javascript">

ERRORI RISCONTRATI:


1. Manca la dichiarazione del !DOCTYPE HTML SYSTEM.
2. Manca il tag di chiusura del link.
3. Manca l'attributo TYPE sul tag Javascript.
4. E' stato chiuso un tag SCRIPT senza essere stato aperto.

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 name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<title>Alpi Eagles Spa - Home Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Fade(duration=.5)" />
<link href="CSS/styles.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" media="all" href="scripts/jscalendar/calendar-win2k-cold-1.css" title="win2k-cold-1"></script>
....
<script language="Javascript" type="text/javascript" >

ALTRO ESEMPIO:


...ges/dot_divider.gif" align="absBottom">

SOLUZIONE:

...ges/dot_divider.gif" align="BOTTOM">

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

ESEMPI:


IMMAGINE PULSANTE:

<img id="f_trigger_FL_Datapartenza" onmouseover="this.style.background='blue';" title="Date selector" style="border: 1px solid blue;" onmouseout="this.style.background=''" src="Alpi%20Eagles%20Spa%20-%20Home%20Page_files/icon_calender.gif" height="13" width="18">

logo calendario

SOLUZIONE:

<img id="f_trigger_FL_Datapartenza" onmouseover="this.style.background='blue';" title="Date selector" style="border: 1px solid blue;" onmouseout="this.style.background=''" src="Alpi%20Eagles%20Spa%20-%20Home%20Page_files/icon_calender.gif" alt ="icona calendario"height="13" width="18">

IMMAGINE CON ALT VUOTO

<img id="alpiRussia" src="Alpi%20Eagles%20Spa%20-%20Home%20Page_files/bannerRussia.jpg" alt="" style="height: 45px; width: 191px;" border="0"></a>

logo Russia

SOLUZIONE:

<img id="alpiRussia" src="Alpi%20Eagles%20Spa%20-%20Home%20Page_files/bannerRussia.jpg" alt="Logo Russia" style="height: 45px; width: 191px;" border="0"></a>

IMMAGINE PUBBLICITARIA CON LINK

<a href="http://www.alpieagles.com/tbookNew.aspx?lang=it"><img src="Alpi%20Eagles%20Spa%20-%20Home%20Page_files/tbook.jpg" border="0" height="145" width="178"></a>

pubblicita carnet

SOLUZIONE:

<a href="http://www.alpieagles.com/tbookNew.aspx?lang=it"><img src="Alpi%20Eagles%20Spa%20-%20Home%20Page_files/tbook.jpg" alt= "Carnet abbonamento" border="0" height="145" width="178"></a>
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 per realizzare la homepage sono i seguenti.
Colori homepage
Tali colori 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."


banner lampeggiante

Questo è un esempio di immagine in cui all'interno della pagina in cui compare un scritta lampeggiante.Ad un normale utente non crea troppo disturbo, perchè sono in una parte della pagina lontana dalle zone "operative", infatti al centro di essa dominano le pubblicità (i due casi presi in esempio sono banner pubblicitari creati per attirare attenzione). Se invece ad utilizzare il sito web è un utente affetto da disturbi epilettici, ecco che il continuo lampeggiare dei due banner attira la visione periferica degli occhi dell'utente, facendolo attrarre e creando quindi una situazione pericolosa.

SOLUZIONE:

Occorre evitare di utilizzare GIF animate con animazioni lampeggianti, o limitarne il lampeggiamento.

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:
Il contrasto è chiaro ma si utilizzano le immagini come testo.

Tabella visualizzazione contrasto colori



Il contrasto chiaro/scuro risulta leggibile e chiaro. Le diverse zone sono identificate dal colore,e quindi il tutto rispetta la prima parte del requisito. Tuttavia il testo non è sempre leggibile perchè si fa molto uso di testo attraverso le immagini(come spiega l'immagine).

SOLUZIONE:

Il contrasto non ha bisogno di soluzioni per la conformità, ma potrebbe subire modifiche nel campo del design. Per quanto riguarda il testo nelle immagini, occorre fare una separazione tra contenuto (testo) e presentazione(immagine o logo). Così risulta comprensibile il messaggio legato all'immagine anche in assenza di quest'ultima o nel caso non abbia il tag del testo alternativo (ALT o LONGDESC).
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."

ESEMPIO:

bandiere lingue

<MAP NAME="band">
<AREA SHAPE="RECT" COORDS="3,0,24,33" HREF="?lang=IT">
<AREA SHAPE="RECT" COORDS="27,0,50,33" HREF="?lang=EN">
<AREA SHAPE="RECT" COORDS="53,0,76,33" HREF="?lang=FR">
<AREA SHAPE="RECT" COORDS="79,0,101,33" HREF="?lang=ES">
<AREA SHAPE="RECT" COORDS="104,0,126,33" HREF="?lang=CS">
<AREA SHAPE="RECT" COORDS="129,0,152,33" HREF="?lang=EL">
<AREA SHAPE="RECT" COORDS="155,0,178,33" HREF="?lang=RU">
<MAP>
Nella pagina vengono utilizzate mappe lato client,perciò gli accorgimenti riguardano il requisito 7.

MIGLIORAMENTO:

Aggiungere questa parte di codice

<OBJECT data="band.gif" type="image/gif" usemap="#band"> <P>Mappa immagine selezione lingue.<p> </OBJECT>

Torna ad inizio pagina

Requisito 9: Tabelle dati #1

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

Nella pagina non sono presenti tabelle dati.
Torna ad inizio pagina

Requisito 10: Tabelle dati #2

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

Torna ad inizio pagina
Nella pagina non sono presenti tabelle dati.

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"


Home senza CSS



Il sito in tutte le pagine si appoggia ad un foglio di stile CSS.
La parte raffigurata della homepage priva di CSS risulta chiara e comprensibile.
Non necessita perciò di alcuna modifica.

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

QUALCHE ESEMPIO:

.borderbox {
BORDER-RIGHT: #5a86b3 1px solid; BORDER-TOP: #5a86b3 1px solid; BORDER-LEFT: #5a86b3 1px solid; BORDER-BOTTOM: #5a86b3 1px solid
}
.BarraBlu {
FONT-WEIGHT: bold; FONT-SIZE: 9px; COLOR: #ffffff; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #00aef0; TEXT-DECORATION: none
}
.pad0 {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px;
}
A.blue:hover {
FONT: 10px verdana; TEXT-TRANSFORM: none; COLOR: #002a7c; BACKGROUND-COLOR: #cce0e0
}

SOLUZIONI:

.borderbox {
BORDER-RIGHT: #5a86b3 font:0.2em solid; BORDER-TOP: #5a86b3 0.2em solid; BORDER-LEFT: #5a86b3 0.2em solid; BORDER-BOTTOM: #5a86b3 0.2em solid
}
.BarraBlu {
FONT-WEIGHT: bold; FONT-SIZE: 0.3em COLOR: #ffffff; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #00aef0; TEXT-DECORATION: none
}
.pad0 {
PADDING-RIGHT: 0%; PADDING-LEFT:0%; PADDING-BOTTOM: 0%; MARGIN: 0%; PADDING-TOP: 0%;
}
A.blue:hover {
FONT: 0.4em Verdana; TEXT-TRANSFORM: none; COLOR: #002a7c; BACKGROUND-COLOR: #cce0e0
}


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 risulta formata quasi interamente da una struttura tabellare per l'impaginazione.
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 SENZA ETICHETTE

Form senza etichette <input name="lang" value="it" type="hidden">

SOLUZIONE:

Utilizzare LABEL e il suo attributo FOR

< label for="Lingua"></label>
<input name="lang" value="it" type="hidden" id="Lingua">
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"

Al contrario delle norme WCAG la legge Stanca impone che gli script non siano necessari per usare la pagina. Per prenotare un volo,accedere al calendario o interagire in qualche modo dinamicamente con il sito è essenziale avere il browser dotato di interprete Javascript;non c'è altro modo di svolgere tali operazioni.

<script type="text/javascript"> Calendar.setup({inputField:"FL_Dataritorno",weekNumbers:false,firstDay:1,
ifFormat:"%d/%m/%Y",align:"Bl",button:"f_trigger_FL_Dataritorno",
singleClick:true,dateStatusFunc:HidePastDates});

</script>

PROBLEMA:

Per visualizzare il calendario per la prenotazione di un volo è necessario avere javascript.

SOLUZIONE:

Inserire dei tag <noscript> che offrono un'alternativa testuale al codice Java.
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"


Questo requisito prende spunto dal Checkpoint 6.4 del WCAG, e cioè l'utente dovrebbe essere in grado di interagire con un interprete (e il documento che esso rende) usando i dispositivi di input e output supportati, secondo la propria scelta e secondo i propri bisogni. I dispositivi di input possono includere dispositivi di puntamento, tastiere, display braille, bacchette manovrate con la testa, microfoni ed altro.
I dispositivi di output possono includere monitor, sintetizzatori vocali e dispositivi braille.

PROBLEMA #1:

Ci sono dei riferimenti a javascript non indipendenti dal dispositivo di input.

<td class="grigio" bgcolor="#ff9933" width="48%">
<input name="FL_Travelmode" value="OW" onclick="ClearRoundTripFields();" type="radio"> solo andata
</td>

SOLUZIONE:

Sostituire OnClick (che dipende dal dispositivo MOUSE, con OnKeyPress che invece gestisce l'evento indipendentemente dal dispositivo)

<td class="grigio" bgcolor="#ff9933" width="48%">
<input name="FL_Travelmode" value="OW" onKeyPress="ClearRoundTripFields();" type="radio"> solo andata
</td>

PROBLEMA #2:

Analogo al problema #1

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


In questa pagina il requisito non è soddisfatto, come già detto in precedenza senza javascript non si può accedere ad un volo e quindi usufruire della maggior utilità del sito.Un altro esempio di fallimento a questo requisito è dato dalle applicazioni pubblicitarie create in Flash e senza alternztiva testuale.

ESEMPIO:

Non c'è alternativa testuale all'applicazione Flash (è predisposta ma vuota!!)

<object type="application/x-shockwave-flash" data="Alpi%20Eagles%20Spa%20-%20Home%20Page_files/new_flights.swf" viewastext="" height="133" width="230">
<param name="Src" value="swf/new_flights.swf">
</object>

SOLUZIONE:

Riempire il campo VIEWASTEXT

<object type="application/x-shockwave-flash" data="Alpi%20Eagles%20Spa%20-%20Home%20Page_files/new_flights.swf" viewastext="NUOVI VOLI" height="133" width="230">
<param name="Src" value="swf/new_flights.swf">
</object>
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."

Nella homepage non sono stati trovati tanti link; tra quelli presenti solamente quelli che riguardano la scelta della lingua non sono molto chiari e significativi a tutti gli utenti.
A nostro parere non è comunque un errore grave.

ESEMPIO:

...REA SHAPE="RECT" COORDS="3,0,24,33" HREF="?lang=IT"</span>>

SOLUZIONE:

...REA SHAPE="RECT" COORDS="3,0,24,33" HREF="?lingua=ITA">
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."

Il servizio si attiva quando andiamo a ricercare un volo attraverso una form ed il processo lato server è mette in attesa l'utente.

PROBLEMA:

Il messaggio di avvertimento compare ma non da indicazioni sul tempo mancante dell'attesa.Così l'utente non ha idea di quanto possa attendere e non ha un feedback se davvero è in attesa o si è bloccato il programma.

attesa evento

SOLUZIONE:

Nella applet o applicazione che si occupa dell'avviso di attesa, mettere un campo REVERSE-COUNTER che invita l'utente ad attendere un periodo breve di tempo mostrando nell'applet il countdown. Al termine del countdown se la situazione non si è sbloccata, si invita l'utente a riprovare ad effettuare l'operazione.
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."

Per quanto riguarda la grandezza dei tasti di invio dell form, nella pagina è presente solo il tasto CERCA che a nostro avviso è comunque piccolo per la sua importanza.

PROBLEMA:

<a href="#" onclick="window.open ('annunci/kishiniev/lettera-Kishiniev.html','newWin','
scrollbars=yes,status=no,resizable=yes,top=100,
left=100,width=610,height=860');">

SOLUZIONE:

<a href="#" onkeypress="window.open ('annunci/kishiniev/lettera-Kishiniev.html','newWin','scrollbars=yes,
status=no,resizable=yes,top=100,left=100,width=610,height=860');">

PROBLEMA:

Il tasto CERCA è troppo piccolo. Cerca il volo

SOLUZIONE:

Ingrandirlo e rendere più leggibile la scritta.Cerca il volo
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