Gerarchia delle intestazioni

La gerarchia delle intestazioni è la disciplina che consiste nell’usare gli elementi <h1>-<h6> per formare una struttura coerente del contenuto di una pagina. Se realizzata correttamente, offre agli utenti di screen reader un indice gratuito. Se realizzata male (livelli saltati, intestazioni solo decorative, più h1, div generici usati come intestazioni) rende la pagina incomprensibile per gli utenti di tecnologie assistive.

La struttura di base

<h1>Titolo dell'articolo (uno per pagina)</h1>
  <h2>Sezione principale</h2>
    <h3>Sotto-sezione</h3>
    <h3>Sotto-sezione</h3>
  <h2>Sezione principale</h2>
    <h3>Sotto-sezione</h3>
      <h4>Sotto-sotto-sezione</h4>

Le regole:

1. Un solo <h1> per pagina — il titolo principale della pagina. Più h1 confondono gli screen reader riguardo all’identità della pagina.
2. Nessun livello saltato in discesa. Un <h2> può essere seguito da un <h3> (un livello più in profondità) ma non da un <h4> (due livelli più in profondità). Saltare un livello segnala allo screen reader che è stato omesso qualcosa nel mezzo.
3. Le intestazioni riflettono la struttura del contenuto, non lo stile visivo. Se un testo appare grande ma non è un’intestazione di un nuovo contenuto, si usa un paragrafo stilizzato, non un’intestazione.
4. Nessuna intestazione vuota. <h2></h2> è privo di significato. O lo si popola o lo si elimina.

Perché gli screen reader si basano sulle intestazioni

L’operazione di navigazione più comune con uno screen reader è «salta alla prossima intestazione» — il tasto H in JAWS e NVDA, la modalità rotore «Intestazioni» in VoiceOver, il controllo di lettura delle intestazioni in TalkBack.

Un utente che apre un articolo lungo preme H ripetutamente per farsi un’idea della struttura dell’articolo prima di leggerne il contenuto. Se le intestazioni sono coerenti, ottiene un indice gratuito del pezzo. Se le intestazioni sono solo decorative o saltano livelli, ottiene rumore.

Cosa va storto in produzione

• Nessun <h1>. La pagina non ha un’intestazione principale. Gli screen reader annunciano il titolo della pagina da <title>, ma la navigazione per intestazioni nella pagina non ha un’ancora. È comune nelle pagine CMS mal strutturate in cui il titolo dell’articolo è reso come testo stilizzato ma non viene mai marcato come <h1>.
• Più <h1>. «Titolo dell’hero» + «titolo della prima sezione» entrambi marcati <h1>. Gli utenti di screen reader sentono due h1 e non riescono a capire quale sia il titolo della pagina.
• Livelli saltati. <h1> → <h3> perché il design non voleva il testo di dimensione <h2>. La navigazione con screen reader segnala «livello di intestazione mancante».
• Div stilizzati come intestazioni. <div class="hed-xl">Titolo sezione</div>. Lo screen reader non rileva alcuna intestazione. Soluzione: usare il corretto <hN> e stilizzarlo con CSS.
• Intestazioni usate per il layout. Inserire <h2> su un’etichetta della barra laterale affinché sembri visivamente un’intestazione, ma l’etichetta non è un’intestazione nei termini del contenuto. Si usa un paragrafo stilizzato.

Come verificare la gerarchia delle intestazioni

Tre approcci:

1. Elenco delle intestazioni dello screen reader. Aprire Insert+F7 in NVDA o VO+U → Intestazioni in VoiceOver. L’elenco visualizzato dovrebbe avere senso come indice della pagina. In caso contrario, correggere il markup.
2. Estensione browser HeadingsMap. Visualizza graficamente la struttura delle intestazioni della pagina. I livelli e le lacune sono immediatamente evidenti.
3. Scansione con axe-core. Individua h1 mancante, livelli saltati (in alcune configurazioni) e intestazioni vuote.

Perché «un solo h1 per pagina» è un punto dibattuto

HTML5 originariamente suggeriva che gli elementi <section> annidati creassero ambiti propri per le intestazioni, consentendo più <h1>. I browser e gli screen reader non hanno mai implementato questo comportamento. Il Gruppo di lavoro WCAG del W3C è tornato al principio «un solo h1 per pagina» come linea guida operativa. La maggior parte delle guide di stile moderne e degli audit di accessibilità applica la regola del singolo h1.