'Il codice' dal sito 4elementi.info ~ accessolibero
sei su: Home [0] > Presentazione > Il codice
Menu sezioni pagina
- intestazione
- contenuti [3]
- menu di navigazione [2]
- menu scelta lingua [7]
- certificati di accessibilità web e contatto webmaster
fine menu sezioni pagina
Contenuti
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:
- L'intestazione: 4elementi.info ~ accessolibero;
- Contenuti: il testo che stai leggendo;
- Certificati di accessibilità e contatto con il webmaster (le tre righe in fondo alla pagina);
- il menu di navigazione a sinistra (le tre voci da 'Home page' a 'Blog');
- il menu di scelta della lingua (Italiano o Inglese).
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 paginaCertificati di accessibilità e contatto con il webmaster
webmaster: dalziani [6]
xhtml valido
css valido
vai al menu sezioni pagina