Heading (titoli)

Definizione — Gli heading (titoli h1–h6) organizzano i contenuti in una gerarchia logica. Per chi usa screen reader consentono la scansione semantica (spostamento rapido tra titoli), per tutti migliorano leggibilità e orientamento. Sono fondamentali per accessibilità (WCAG 2.1 → 1.3.1 Informazioni e relazioni) e utili anche per SEO.

Buone pratiche

• Un H1 significativo per la pagina (titolo principale). HTML5 consente più h1 in contesti sezionati, ma in pratica è preferibile un solo H1 e poi H2/H3…
• Gerarchia coerente: evita “salti” immotivati (da H2 a H4). Non è un errore WCAG, ma è cattiva esperienza.
• Titoli descrittivi: sintetizzano il contenuto della sezione; evita “Sezione” o “Varie”.
• Non usare heading per stile: i titoli sono struttura, non solo grafica. Usa CSS per l’aspetto.

Esempio corretto

<main>
  <h1>Guida all’accessibilità dei form</h1>

  <section>
    <h2>Etichette e istruzioni</h2>
    <p>Ogni campo deve avere un <code>label</code>…</p>
  </section>

  <section>
    <h2>Messaggi di errore</h2>
    <h3>Error summary</h3>
    <p>Dopo il submit…</p>
  </section>
</main>

Esempi da evitare

• Usare <div class="title"> al posto di h2/h3 (perdi semantica e navigazione via titoli).
• Mettere il logo come h1 in tutte le pagine: l’H1 deve descrivere il contenuto della pagina.

Relazioni utili

• Landmark/regioni: i titoli lavorano insieme a Landmark / Regioni ARIA (<main>, <nav>, <aside>) per un orientamento robusto.
• Skip link: il link “Salta al contenuto” dovrebbe portare al primo titolo significativo (h1 o h2).

Checklist rapida

• La pagina ha un H1 unico e descrittivo?
• Gli heading riflettono la struttura logica (indice coerente)?
• Non usi heading per solo stile e non salti livelli senza motivo?