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

Proseguiamo il confronto tra il codice di cssforma.htm e di struttura.htm, analizzando il contenuto della terza colonna della pagina illustrata in figura 1, che mostra i due gruppi di link ad altri siti. Ecco come appare il relativo codice in cssforma.htm:

<div class="capo">
Link ad altri siti
</div>
<div class="gruppo">
Gruppo n.1
</div>
<div class="argo">
argomento
</div>
<div class="link">
<a href="cssforma.htm">collegamento n.01</a>
<div class="descri">
breve descrizione
</div>
[...]
<a href="cssforma.htm">collegamento n.05</a>
<div class="descri">
breve descrizione
</div>
</div>
<div class="gruppo">
Gruppo n.2
</div>
<div class="argo">
argomento
</div>
<div class="link">
<a href="cssforma.htm">collegamento n.06</a>
<div class="descri">
breve descrizione
</div>
[...]
<a href="cssforma.htm">collegamento n.10</a>
<div class="descri">
breve descrizione
</div>
</div>
Ed ecco l'equivalente di questo codice, tratto da struttura.htm:
<h2 class="capo">
Link ad altri siti
</h2>
<h3 title="nome del gruppo di link" class="gruppo">
Gruppo n.1
</h3>
<p title="argomento del gruppo di link" class="argo">
argomento
</p>
<dl class="link">
<dt>
<a href="cssforma.htm">collegamento n.01</a>
</dt>
<dd class="descri">
breve descrizione
</dd>
[...]
<dt>
<a href="cssforma.htm">collegamento n.05</a>
</dt>
<dd class="descri">
breve descrizione
</dd>
</dl>
<h3 title="nome del gruppo di link" class="gruppo">
Gruppo n.2
</h3>
<p title="argomento del gruppo di link" class="argo">
argomento
</p>
<dl class="link">
<dt>
<a href="cssforma.htm">collegamento n.06</a>
</dt>
<dd class="descri">
breve descrizione
</dd>
[...]
<dt>
<a href="cssforma.htm">collegamento n.10</a>
</dt>
<dd class="descri">
breve descrizione
</dd>
</dl>

Due le cose importanti da notare. La prima è l'uso di titoli subordinati. Il titolo della sezione è "Link ad altri siti" ed è marcato con H2. Gli sono subordinate gerarchicamente due sottosezioni, "Gruppo 1" e "Gruppo 2": entrambe sono state marcate con H3 (senza salti di livello, come richiesto dalle WCAG 1.0). Benché compaiano più titoli nella stessa sezione, è stata rispettata la regola "un titolo per un contenuto": infatti "Gruppo 1" si riferisce al contenuto del primo gruppo di collegamenti, "Gruppo 2" al contenuto del secondo gruppo, mentre "Link ad altri siti", infine, ha come contenuto l'intera sezione. Ognuno dei tre elementi H utilizzati fa dunque riferimento ad un contenuto differente.

La seconda cosa è l'uso delle liste di definizioni, al posto dei generici DIV usati in cssforma.htm, per marcare gli elenchi di collegamenti. La caratteristica di tali elenchi è che ogni link è seguito da una descrizione. Questa struttura "oggetto – descrizione" è resa al meglio in (X)HTML proprio dalle liste di definizioni. L'elemento DL racchiude l'intera lista, DT i singoli collegamenti, DD la descrizione relativa a ciascun collegamento.

Dopo la colonna di destra, ci rimane da esaminare unicamente il pie' di pagina. In cssforma.htm il suo contenuto era racchiuso all'interno del solito DIV generico:

<div id="piede">
<span class="gras">Pie' di pagina</span> (informazioni
sul diritto d'autore e sulla tutela della riservatezza)
</div>

In struttura.htm viene reso in un elemento P:

<p id="piede">
<strong>Pie' di pagina</strong> (informazioni
sul diritto d'autore e sulla tutela della riservatezza)
</p>

Notate che nel primo esempio, la scritta "Pie' di pagina" viene messa in evidenza per mezzo di una classe applicata all'elemento SPAN, che crea l'effetto grafico del grassetto, un effetto di presentazione limitato alla sola riproduzione visuale del documento. Nel secondo esempio abbiamo invece sostituito l'effetto di presentazione con un elemento strutturale universale: StrONG. Per mezzo di esso, attribuiamo alla scritta una forte enfasi rispetto al resto del testo: enfasi che potrà essere resa in qualsiasi modo, anche non visuale, a seconda delle capacità del programma utente utilizzato.

Altri articoli

Altre guide

Altre newsletter