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

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 accessibili, NON seguite l'esempio precedente!

Non possono esservi 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.

Altri articoli

Altre guide

Altre newsletter