Diodati.org - Accessibilità e traduzioni dal W3C

Sponsor ufficiale di Diodati.org: Hosting a partire da 25 euro/anno | Domini a partire da 10,79 euro/anno | Server dedicati a partire da 120 euro/mese

Vediamo ora il codice che definisce un articolo in cssforma.htm:

<div class="articolo">
  Articolo n.1
</div>
<div class="data">
  data e autore
</div>
<div class="testo">
  sommario: testo testo testo testo testo testo testo
  testo testo testo testo testo testo testo testo testo
  testo testo testo testo testo testo testo testo testo
  testo testo testo testo testo testo testo testo testo
  testo testo testo testo testo testo testo testo testo
  testo testo testo
</div>
<div class="leggi">
  <a href="cssforma.htm">leggi il seguito</a>
</div>

Ed ecco il corrispondente codice in struttura.htm:

<h2 class="articolo">
  Articolo n.1
</h2>
<p title="data e autore" class="data">
  data e autore
</p>
<p class="testo">
  sommario: testo testo testo testo testo testo testo
  testo testo testo testo testo testo testo testo testo
  testo testo testo testo testo testo testo testo testo
  testo testo testo testo testo testo testo testo testo
  testo testo testo testo testo testo testo testo testo
  testo testo testo
</p>
<p class="leggi">
  <a href="cssforma.htm">leggi il seguito</a>
</p>

Come si vede, al titolo dell'articolo è stato opportunamente attribuito un elemento H, anche qui di secondo livello, come per il menu di navigazione. Le restanti voci sono state invece marcate con altrettanti elementi P. Ai paragrafi che riportano data e autore dell'articolo è stato aggiunto un attributo "title" contenente una breve descrizione, che aggiunge valore semantico (cioè un significato) agli altrimenti neutri elementi P.

Notate che in questo caso ci scontriamo con un limite di HTML e XHTML: lo scarso numero di elementi con cui si possono marcare strutturalmente dei blocchi di testo. Non considerando le tabelle e i vari tipi di elenco, per dare un valore semantico ad un blocco di testo possiamo usare H1...H6 se si tratta di un titolo, BLOCKQUOTE se si tratta di una citazione, P se si tratta di un paragrafo e... basta così!

Talvolta potrebbe essere utile, invece, avere qualche possibilità in più per definire strutturalmente un documento: pensando ad esempio ad un articolo di giornale, si potrebbero immaginare un elemento SOMMARIO, un elemento OCCHIELLO, un elemento AUTORE, e così via.

Forse XHTML 2.0, attualmente in fase di sviluppo, risolverà in parte questo problema. Per il momento, accontentiamoci di marcare con dei P tutti i blocchi di testo che non sono titoli, magari specificando per mezzo di un attributo "title" il valore strutturale di alcuni P particolari all'interno del documento e usando i CSS per dare loro il giusto rilievo grafico. Ai fini dell'accessibilità del documento questo è più che sufficiente.

Va precisato, a tal proposito, che, quando si ha a che fare con un contenuto testuale composto da più parti dotate ciascuna di una funzione logica differente - come nel caso di un articolo di giornale in cui possiamo distinguere titolo, occhiello, sommario, autore, testo dell'articolo, eventuali riquadri in evidenza - è importante ai fini dell'accessibilità evitare di commettere un errore in cui, invece, è molto facile incorrere: quello di attribuire più titoli ad un unico contenuto.

Se si applicano i titoli senza riflettere sul loro significato strutturale, ma semplicemente per ottenere un effetto di formattazione, è facile ritrovarsi per esempio con un codice di questo tipo:

<!-- Esempio errato dal punto di vista dell'accessibilità -->
<h2>
  occhiello
</h2>
<h1>
  titolo dell'articolo
</h1>
<h4>
  luogo, data, autore
</h4>
<h3>
  sommario
</h3>
<p>
  testo testo testo testo testo testo testo testo testo
  testo testo testo testo testo testo testo testo testo
  testo testo testo testo testo testo testo testo testo
</p>

Se volete sviluppare pagine chiaramente comprensibili, NON seguite l'esempio precedente! Non hanno molto senso infatti quattro titoli per un medesimo contenuto. Il titolo ha la funzione logica di annunciare un argomento, che verrà sviluppato all'interno di altri, successivi elementi strutturali (paragrafi, elenchi, tabelle, ecc.). Nell'esempio precedente vi è un solo articolo, un solo contenuto, un unico argomento. Attribuirgli quattro titoli, sia pure di livello differente, è perciò un errore logico, che nasce da un'esigenza di formattazione: il desiderio, cioè, di dare un rilievo grafico particolare agli elementi strutturali (occhiello, sommario, informazioni contestuali), che sono per importanza inferiori al titolo, ma superiori al testo.

Le WCAG 1.0 dedicano agli elementi H1...H6 il punto di controllo 3.5 che, tradotto in italiano, dice testualmente: Usate gli elementi di intestazione per esprimere la struttura del documento ed usateli in modo conforme alle specifiche [Priorità 2]. Per esempio, in HTML usate H2 per indicare una sottosezione di H1. Non usate i titoli per creare effetti con i caratteri.

Ecco perché abbiamo suggerito di usare dei normali P, magari accompagnati da un attributo "title" descrittivo della funzione, per tutti gli altri elementi strutturali diversi da titolo e testo discorsivo presenti all'interno di un medesimo blocco di contenuto (per es. un articolo di giornale), e di usare i CSS per dare a tali elementi un'opportuna caratterizzazione grafica. Gli autori dovrebbero tenere sempre a mente questa semplice regola: un titolo per un contenuto.

Le WCAG 1.0 raccomandano di non saltare livelli logici nell'uso delle intestazioni (o titoli, testatine: "headers" in inglese). Cioè, se una sezione della pagina è marcata con H2, una sua sottosezione diretta dovrebbe essere marcata con H3 e non con H4 o successivi. Se si vuole che il titolo delle sottosezioni sia notevolmente più piccolo del titolo della sezione "genitrice", si usino i fogli di stile per modificare il loro aspetto, invece che saltare illogicamente, per sole ragioni di presentazione, un livello di intestazione.