Un modello di sito accessibile

(Corrado Del Buono)

In questo tutorial proponiamo un modello di sito web accessibile, ovvero che rispetti i requisiti della legge Stanca; analizzeremo la sua struttura, le sue caratteristiche e gli accorgimenti da utilizzare nella compilazione delle pagine web. Il modello è costruito ad hoc per un sito scolastico ma può essere adattato a qualsiasi tipo di web. [...]

I file del modello

Il modello è costituito da due file di tipo HTM (uno per la HOME PAGE ed un secondo, da duplicare per i contenuti interni del sito) associati al foglio di stile (file STILE.css) posizionato nella cartella CSS. La struttura utilizzata per le pagine web è HTML 4.01 di tipo STRICT; tale architettura richiede un “codice” di tipo “semplificato” e “ripulito” da quei tag generati dagli applicativi web ma non necessari; analizzeremo, di seguito, il codice da utilizzare per inserire i vari elementi in una pagina web. - DOWNLOAD DEL MODELLO (formato ZIP)

Il layout della pagina web

I contenuti della pagina web devono essere organizzati in maniera da poter essere ridimensionati automaticamente in base alla risoluzione dello schermo dell’utente: ciò consente, difatti, al visitatore di evitare l’uso delle barre di scorrimento nel caso di utilizzo di uno schermo a bassa risoluzione.

Un layout completamente “fluido” difficilmente si concilia con l’utilizzo di immagini nella pagina web; per superare questo inconveniente proponiamo una struttura con un livello a larghezza fissa (non eccessiva), da utilizzare per l’inserimento del menu e per le immagini.

Il layout delle pagine web si articola in tre livelli:

1. un livello ridimensionabile (#INTESTAZIONE) per l’intestazione dell’istituto scolastico che abbia un padding sinistro pari alla larghezza del livello che accoglierà il menu e le immagini (ciò eviterà eventuali sovrapposizioni di testo);
2. un livello (#SINISTRA) a posizione fissa e largo 240px da utilizzare per il menu ed eventuali immagini;
3. un livello ridimensionabile (#CONTENUTI), caratterizzato da un margine sinistro pari alla larghezza del DIV#SINISTRA, ovvero a 240px che andrà a collocarsi sotto il livello DIV#INTESTAZIONE in quanto si è utilizzata una posizione assoluta per il livello DIV#SINISTRA.

All’interno del tag BODY delle pagine web si è utilizzata, quindi, la seguente struttura:

©2009 - E' vietata la riproduzione, anche parziale, di questo editoriale.