27. Note sul layout accessibile

Il layout accessibile usato nel nostro esempio si rivolge soprattutto alle persone ipovedenti e a quegli utenti che possono trarre beneficio da un contrasto di colori invertito. Nello specifico, esso presenta le seguenti caratteristiche:

  1. tutte le immagini di sfondo sono state eliminate
  2. il testo è stato ingrandito del 180%
  3. i colori sono stati ridotti a combinazioni web safe (#0ff, #ff0, ecc.)

La struttura a due colonne è stata mantenuta, anche se si può linearizzare completamente la pagina eliminando le dichiarazioni di floating o di posizionamento. Nel nostro caso, poiché la struttura principale di navigazione è stata posta dopo i contenuti, si è preferito evitare all'utente il fastidio di dover scrollare l'intera pagina per accedere a tali informazioni. In ogni caso, si può sempre nascondere un menu di navigazione ad hoc e visualizzarlo solo nel layout alternativo.

Uno stile così concepito può anche essere usato come foglio di stile utente. In questo caso occorrerà usare la dichiarazione !important per sovrascrivere il foglio di stile dell'autore e del browser. Esempio:

  1. body {
  2. background-color: #000 !important;
  3. background-image: none !important;
  4. color: #fff !important;
  5. font-family: sans-serif !important;
  6. font-size: 180% !important;
  7. margin: 1em !important;
  8. padding: 0 !important;
  9. font-weight: bold !important;
  10. line-height: 1.5 !important;
  11. }