vai al menu sezioni pagina

'Il codice' dal sito 4elementi.info ~ accessolibero

sei su: Home [0] > Presentazione > Il codice


Contenuti

primo stadio orme sulla spiaggia de La Calettasecondo stadio orme sulla spiaggia de La Caletta

menu di navigazione [2] ~ contenuti [3] ~ menu lingua [7]


Un sito accessibile non è quello che si vede o che ci colpisce a primo impatto con suoni, colori e animazioni: quella è solo la sua proiezione visiva, audio.

La nostra composizione nella creazione di un sito accessibile è la scrittura del codice: alcuni utenti leggono solo il testo contenuto nei tag, oppure scorrono la pagina avendo disabilitato il Foglio di stile dal browser.

Il risultato è la visione sequenziale degli elementi che abbiamo incastonato nella pagina secondo l'ordine in cui li abbiamo disposti.

Ecco perchè è bene cominciare a scrivere (o a riscrivere) ex novo un sito web, se vogliamo che sia accessibile.
Se analizziamo il nostro operato, l'impaginazione riflette una poetica interiore: il mio vivo consiglio è di proiettarla nel codice e non sul risultato visuale.
Il Foglio di stile ~ dopo, però ~ può dare alla pagina il layout che desideriamo. Guarda ad esempio questa pagina, l'ordine sequenziale in cui ho inserito le sezioni è il seguente:

inizio elenco sezioni di questa pagina web: 5 voci
  1. L'intestazione: 4elementi.info ~ accessolibero;
  2. Contenuti: il testo che stai leggendo;
  3. Certificati di accessibilità e contatto con il webmaster (le tre righe in fondo alla pagina);
  4. il menu di navigazione a sinistra (le tre voci da 'Home page' a 'Blog');
  5. il menu di scelta della lingua (Italiano o Inglese).
fine elenco sezioni di questa pagina web

Nei contenuti ho inserito un'immagine, anch'essa è parte del mio componimento.
E' bene ricordare sempre che i non vedenti percepiscono l'immagine solo come descritta dal loro lettore vocale, un browser che legge 'a voce alta' il codice: quindi dovrò descriverla utilizzando l'attributo <alt> o <title>.

Puoi vedere come si presenta questa pagina letta senza l'ausilio del Foglio di stile.

Ho poi provveduto a strutturare il contenuto delle singole sezioni in blocchi di testo, racchiudendoli con i tag <div> cui ho attribuito lo stile che ho preferito, con il Foglio di stile: ho voluto i due menu (navigazione e lingua) in un riquadro verticale (finto frame) che non scorre e i contenuti, il contatto con il webmaster e i link ai due validatori nel riquadro grande a destra, scorrevole come un frame con la barra di scorrimento verticale.

Se noti, tra un blocco di informazioni e l'altro ho inserito le righe orizzontali, alcune visibili sempre, alcune rese invisibili dal Foglio di stile

Ho aggiunto infine una sezione e alcuni link, resi invisibili con il Foglio di stile, che permettono agli utenti non vedenti e a chi naviga senza il Foglio di stile di saltare con un click da una sezione all'altra... ma se voglio, senza modificare il codice della pagina, posso ribaltare tutto senza compromettere l'accessibilità...

vai al menu sezioni pagina

Certificati di accessibilità e contatto con il webmaster

webmaster: dalziani [6]

xhtml valido

css valido

vai al menu sezioni pagina

Menu di navigazione

vai al menu sezioni pagina

Menu di scelta della lingua

vai al menu sezioni pagina
fine documento