Lavora con noi

Web design

Siti tematici

Speciali

Web Design » Guide » Guida Accessibilità dei siti Web teorica

Lezioni:

...
<
7
8
9
>
...
Indice

Fogli di stile (Cascading Style Sheets)

Adottando i fogli di stile gli sviluppatori di pagine html potranno esercitare un controllo più accurato sulle pagine ed eliminare codice superfluo, rendendo in tal modo più leggere e navigabili le pagine ed assicurando nel contempo una piena accessibilità ai disabili, comprese le persone con problemi di vista di cui ci stiamo in particolare occupando. Con i fogli di stile, inoltre, si consentono tempi di caricamento delle pagine più rapidi a tutti indistintamente gli utenti di Internet.

È possibile predisporre un file a sé stante con estensione .css nel quale introdurre in formato testo le indicazioni di stile da applicare a tutte le pagine html contenute in un sito web. Tali stili potranno riguardare tutti gli elementi da inserire nelle pagine stesse, quali, per esempio:

caratteri e loro formattazioni
H1 {font-size: 20pt; font-weight:bold}]
H2 {font-size: 16pt; font-weight:bold}
paragrafi
P {margin-left: -20px; margin-right: -20px; margin-top: 30px}

oltre alle indicazioni per lo sfondo, le liste, i rientri, ecc.

Con un file esterno come quello cui si è fatto ora cenno sarà sufficiente inserire in tutte le pagine del sito

Per inserire le disposizioni di stile in ogni pagina del sito, si collocheranno le definizioni di stile (contenute in parentesi graffe) all'interno del comando <STYLE> ... < /STYLE>

Esempio

<HEAD>
<STYLE TYPE="text/css">
  BODY {font-family: arial;
   font-size: 10pt; font-style: normal}
   P {margin-left: 40px; margin-right:
  40px; margin-top: 20px}
</STYLE>
</HEAD>

Un utilizzo corretto degli elementi di strutturazione fa sì che i browsers possano garantire una migliore navigazione nel documento. Un esempio di uso scorretto è, per esempio, quello di servirsi dell'elemento H1 per ottenere un testo a caratteri grandi e in grassetto, mentre questo elemento deve essere usato solo per identificare una frase di rilievo nella strutturazione del documento, come il titolo di un capitolo, distinguendolo da quello dei sottocapitoli che possono essere organizzati in una struttura gerarchica fino a 6 livelli (H1-H6).

Nell'utilizzazione dei fogli di stile sarà essenziale:

nidificare adeguatamente gli heading (H1-H6);
codificare la struttura e i componenti di una lista con gli elementi appropriati. (UL, LI, ecc.);
identificare le citazioni con gli elementi Q e BLOCKQUOTE, evitando invece di usare questi ultimi per creare effetti di rientro del testo;
usarli per l'impaginazione e la presentazione non appena la maggior parte dei browsers sarà in grado di gestirli.

Avvalersi dei fogli di stile nella progettazione delle pagine web significa eliminare definitivamente l'utilizzo di tabelle per impaginare gli ipertesti. Fino a un paio d'anni fa, tra l'altro, le tabelle non erano riconosciute dagli screen readers e, salvo rare eccezioni, navigare tra tabelle multicolonne o nidificate rappresentava un problema irrisolubile per i non vedenti. Ora ci si augura che l'eccezione diventi regola e che, sia pure con i tempi tecnici necessari, l'utilizzo dei fogli di stile si diffonda a tappeto nella cultura dei webmasters.

In attesa che la crescente diffusione dell'utilizzo dei fogli di stile ne faccia lo strumento privilegiato per l'organizzazione delle pagine web, si potranno contenere testi e immagini in una tabella di impaginazione a colonna unica, evitando altre soluzioni più complesse che renderebbero le pagine non accessibili.