WCAG 2.4.10: Intestazioni di sezione

Cosa Significa Questa Regola

WCAG 2.4.10 — Intestazioni di sezione (Livello AAA) afferma: «Le intestazioni di sezione sono usate per organizzare il contenuto.» Questo significa che quando una pagina web o un documento è suddiviso in più sezioni distinte, ogni sezione deve avere un’intestazione determinabile a livello di programma che ne descriva l’argomento o lo scopo. L’intento non è semplicemente avere del testo stilizzato visivamente che sembri un’intestazione, ma usare un vero markup di intestazione che trasmetta la struttura gerarchica sia ai browser sia alle tecnologie assistive.

In HTML, questo significa usare in modo appropriato gli elementi di intestazione nativi <h1> fino a <h6>. Una pagina con un argomento principale dovrebbe avere un <h1>, le sezioni principali dovrebbero usare <h2>, le sottosezioni al loro interno usare <h3> e così via. Il livello di intestazione dovrebbe riflettere la profondità logica del contenuto, non essere scelto arbitrariamente per motivi di stile visivo. Dove viene usata ARIA, anche la combinazione di role="heading" con aria-level è accettabile, sebbene gli elementi HTML nativi siano sempre preferiti.

Un superamento di questo criterio significa che ogni sezione di contenuto distinta sulla pagina ha un’intestazione che descrive accuratamente ciò che segue, che l’intestazione è marcata semanticamente (non solo testo visivamente in grassetto o di grandi dimensioni) e che la gerarchia delle intestazioni riflette logicamente l’organizzazione del contenuto del documento. Un fallimento si verifica quando le sezioni di contenuto non hanno alcuna intestazione, quando i livelli di intestazione vengono saltati arbitrariamente (passando da <h1> a <h4> senza una ragione logica) o quando si usa semplice testo stilizzato al posto di veri elementi di intestazione per etichettare una sezione.

È importante notare l’eccezione ufficiale delle WCAG: questo criterio si applica solo quando la pagina stessa contiene delle sezioni. Pagine molto brevi con un singolo argomento unificato — come un semplice modulo di login senza sezioni distinte — non sono tenute ad avere più intestazioni. Il requisito è attivato dalla presenza di più aree di contenuto distinte che traggono beneficio da un’etichettatura. Inoltre, questo criterio non impone una specifica struttura gerarchica delle intestazioni oltre a un’organizzazione logica; il requisito chiave è che le intestazioni esistano e siano usate in modo significativo ovunque esistano sezioni.

Questo criterio è classificato come Livello AAA, il che significa che non è richiesto per la conformità di base alle WCAG 2.2, ma rappresenta una pratica di accessibilità allo stato dell’arte che migliora significativamente l’esperienza per un’ampia gamma di utenti.

Perché È Importante

Le persone che usano screen reader si affidano alle intestazioni come principale mezzo di navigazione in documenti lunghi e pagine web. Secondo il sondaggio WebAIM sugli utenti di screen reader, la grande maggioranza degli utenti di screen reader naviga regolarmente tramite intestazioni — è costantemente classificato come uno dei metodi di navigazione più usati. Quando le intestazioni sono assenti o strutturate in modo scorretto, un utente di screen reader deve ascoltare ogni contenuto in sequenza dall’inizio della pagina, che equivale a costringere un utente vedente a leggere un intero libro senza indice o titoli di capitolo.

Consideriamo un esempio reale: un sito di e-commerce turco che vende elettronica potrebbe avere una pagina di dettaglio prodotto con sezioni dedicate alle specifiche del prodotto, alle recensioni dei clienti, alle informazioni sulla spedizione e alla politica di reso. Se nessuna di queste sezioni ha un elemento di intestazione, un utente cieco che naviga con NVDA su Firefox non può saltare tra di esse. Deve o ascoltare tutto il contenuto oppure usare strategie di ricerca per tentativi, aumentando significativamente il carico cognitivo e il tempo necessario per completare il compito. Con intestazioni <h2> appropriate per ogni sezione, lo stesso utente può premere il tasto H per saltare istantaneamente da una sezione all’altra in pochi secondi.

Anche le persone con disabilità cognitive ne traggono un beneficio sostanziale. Intestazioni chiare agiscono come segnali stradali, permettendo a persone con disturbi dell’attenzione, difficoltà di lettura o problemi di memoria di riorientarsi rapidamente dopo aver perso la concentrazione. L’Organizzazione Mondiale della Sanità stima che circa 1,3 miliardi di persone nel mondo vivano con qualche forma di disabilità, e le condizioni cognitive e neurologiche rappresentano una parte ampia e in crescita di questa popolazione.

Le persone con disabilità motorie che si affidano alla sola tastiera o a dispositivi di accesso a interruttore beneficiano anch’esse, perché la struttura delle intestazioni è usata da molte tecnologie assistive per creare opportunità di salto di navigazione, riducendo lo sforzo fisico necessario per raggiungere l’area di contenuto desiderata.

Oltre all’accesso per le persone con disabilità, una struttura corretta delle intestazioni ha significativi benefici SEO. I motori di ricerca usano la gerarchia delle intestazioni per comprendere la struttura tematica di una pagina, cosa che può influenzare il posizionamento e il modo in cui il contenuto viene mostrato nei risultati di ricerca. Una struttura di intestazioni ben organizzata segnala qualità del contenuto sia agli utenti sia ai crawler. Questo rende il business case per l’implementazione di questo criterio AAA convincente anche per le organizzazioni che non sono legalmente obbligate a rispettarlo.

Regole Axe-core Correlate

WCAG 2.4.10 richiede test manuali e non può essere completamente automatizzato. Ecco perché gli strumenti automatici non sono sufficienti, e cosa possono e non possono rilevare:

• Test manuale richiesto — Completezza strutturale: Strumenti automatici come axe-core possono rilevare la presenza o l’assenza di elementi di intestazione su una pagina e possono segnalare problemi come livelli di intestazione saltati (ad esempio, passare da <h1> a <h3>). Tuttavia, non possono determinare se il contenuto di una pagina sia stato suddiviso logicamente in sezioni o se un’intestazione descriva accuratamente la sezione che introduce. Uno strumento potrebbe vedere una gerarchia di intestazioni corretta e considerare superato il controllo, mentre la pagina ha in realtà quattro sezioni di contenuto distinte, tre delle quali senza alcuna intestazione. L’appropriatezza semantica del posizionamento delle intestazioni richiede un revisore umano che comprenda lo scopo e la struttura del contenuto.
• Regola axe-core — heading-order: Questa regola segnala i casi in cui i livelli di intestazione vengono saltati in modo da interrompere la struttura logica del documento (per esempio, passando direttamente da <h1> a <h4>). Sebbene questo sia un segnale di qualità correlato, superare questa regola non garantisce la conformità a 2.4.10, perché la regola controlla solo l’ordine relativo delle intestazioni esistenti — non può determinare se un’intestazione sia mancante in una sezione che ne ha bisogno.
• Regola axe-core — page-has-heading-one: Questa regola verifica se la pagina contiene almeno un elemento <h1>, che è un requisito strutturale di base. Anche in questo caso, superare questo controllo è un segnale positivo ma non conferma la piena conformità a 2.4.10, poiché una pagina può avere un <h1> e avere comunque più sezioni non etichettate al di sotto.
• Perché l’automazione completa è impossibile: Determinare se una regione di contenuto costituisce una «sezione» che richiede un’intestazione implica comprendere la semantica e lo scopo del contenuto — un compito che attualmente richiede giudizio umano. Un algoritmo non può distinguere in modo affidabile tra un paragrafo coerente che prosegue naturalmente ciò che lo precede e una vera nuova area tematica che merita una propria intestazione etichettata. Per questo motivo, 2.4.10 è sempre indicato come criterio che richiede valutazione manuale in qualsiasi audit completo.

Come Eseguire i Test

1. Scansione automatizzata con axe DevTools o Lighthouse: Installa l’estensione del browser axe DevTools (disponibile per Chrome e Firefox) ed esegui una scansione a pagina intera. Esamina eventuali problemi relativi a heading-order e page-has-heading-one. Nota che una scansione automatizzata senza errori non conferma la conformità a WCAG 2.4.10 — elimina solo il sottoinsieme di controlli automatizzabili. Lighthouse in Chrome DevTools evidenzia anch’esso problemi relativi alle intestazioni nel suo audit Accessibilità; cerca gli avvisi «Heading elements are not in a sequentially-descending order».
2. Revisione manuale del contenuto — struttura del documento: Usa un’estensione del browser come HeadingsMap (disponibile per Chrome e Firefox) per generare una struttura visiva di tutti gli elementi di intestazione sulla pagina. Esamina criticamente questa struttura: riflette accuratamente la struttura del contenuto della pagina? Ogni sezione distinta è rappresentata da un’intestazione? Ci sono sezioni di contenuto visibili sulla pagina che non compaiono nella struttura? Se sì, quelle sezioni sono prive di intestazioni e la pagina non soddisfa 2.4.10.
3. Navigazione con screen reader usando NVDA e Firefox: Apri la pagina in Firefox con NVDA in esecuzione. Premi H per saltare in avanti tra le intestazioni e Shift+H per tornare indietro. Quando arrivi su ogni intestazione, verifica se l’intestazione annunciata descrive accuratamente il contenuto che segue. Nota anche se incontri blocchi di contenuto sostanziali che non vengono mai annunciati come appartenenti a un’intestazione. Apri la lista degli elementi di NVDA (NVDA+F7), seleziona la scheda Headings e rivedi l’elenco completo delle intestazioni per individuare sezioni mancanti o etichettate in modo scorretto.
4. Navigazione con screen reader usando VoiceOver e Safari (macOS/iOS): Su macOS, abilita VoiceOver (Command+F5) e apri la pagina in Safari. Usa VO+Command+H per navigare tra le intestazioni. Su iOS, usa il rotor (scorri con due dita per impostarlo su Headings) e poi scorri verso il basso per spostarti tra le intestazioni. Verifica che tutte le sezioni di contenuto siano raggiungibili tramite la navigazione per intestazioni.
5. Navigazione con screen reader usando JAWS e Chrome: In JAWS, premi H per scorrere le intestazioni e apri la lista delle intestazioni con Insert+F6. Esamina l’elenco per verificarne la completezza e la gerarchia logica. Conferma che le intestazioni non siano usate solo per lo stile — solo le vere etichette di sezione dovrebbero comparire come intestazioni.
6. Verifica della sola navigazione da tastiera: Usando solo la tastiera, prova a navigare attraverso tutte le sezioni principali della pagina senza usare le intestazioni. Nota quante volte devi premere Tab per attraversare gli elementi interattivi e raggiungere ogni sezione. Questo dà un’idea del carico imposto agli utenti che usano la tastiera quando manca una struttura corretta delle intestazioni.

Come Correggere

Sezioni etichettate solo con testo stilizzato — Non corretto

<div class='section'>
  <p class='section-title'>Product Specifications</p>
  <p>Screen size: 15.6 inches</p>
  <p>RAM: 16 GB</p>
</div>

<div class='section'>
  <p class='section-title'>Customer Reviews</p>
  <p>This product exceeded my expectations.</p>
</div>

Sezioni etichettate solo con testo stilizzato — Corretto

<!-- Using semantic heading elements makes sections navigable by screen readers -->
<section>
  <h2>Product Specifications</h2>
  <p>Screen size: 15.6 inches</p>
  <p>RAM: 16 GB</p>
</section>

<section>
  <h2>Customer Reviews</h2>
  <p>This product exceeded my expectations.</p>
</section>

Livelli di intestazione saltati per motivi di stile — Non corretto

<h1>Annual Report 2024</h1>
<!-- h4 used here because it looks smaller visually, skipping h2 and h3 -->
<h4>Financial Overview</h4>
<p>Revenue grew by 12% this year...</p>
<h4>Regional Performance</h4>
<p>The Istanbul region led growth...</p>

Livelli di intestazione saltati per motivi di stile — Corretto

<h1>Annual Report 2024</h1>
<!-- h2 used for major sections; CSS controls visual size, not heading level -->
<h2>Financial Overview</h2>
<p>Revenue grew by 12% this year...</p>
<h2>Regional Performance</h2>
<p>The Istanbul region led growth...</p>

Nessuna intestazione per una sezione principale della pagina — Non corretto

<main>
  <h1>Contact Us</h1>
  <form>
    <label for='name'>Name</label>
    <input type='text' id='name' name='name'>
    <label for='message'>Message</label>
    <textarea id='message' name='message'></textarea>
    <button type='submit'>Send</button>
  </form>
  <!-- This office locations section has no heading -->
  <div>
    <p>Istanbul Office: Levent Mah. No:5</p>
    <p>Ankara Office: Kızılay Mah. No:12</p>
  </div>
</main>

Nessuna intestazione per una sezione principale della pagina — Corretto

<main>
  <h1>Contact Us</h1>
  <section>
    <h2>Send Us a Message</h2>
    <form>
      <label for='name'>Name</label>
      <input type='text' id='name' name='name'>
      <label for='message'>Message</label>
      <textarea id='message' name='message'></textarea>
      <button type='submit'>Send</button>
    </form>
  </section>
  <!-- Office locations section now has a descriptive heading -->
  <section>
    <h2>Our Offices</h2>
    <p>Istanbul Office: Levent Mah. No:5</p>
    <p>Ankara Office: Kızılay Mah. No:12</p>
  </section>
</main>

Ruolo ARIA heading usato senza aria-level — Non corretto

<!-- role=heading without aria-level defaults to level 2, which may be wrong -->
<div role='heading'>Shipping Policy</div>
<p>Orders are shipped within 2 business days...</p>

Ruolo ARIA heading usato senza aria-level — Corretto

<!-- Native HTML is strongly preferred; if ARIA is used, aria-level must be explicit -->
<!-- Preferred: -->
<h2>Shipping Policy</h2>
<p>Orders are shipped within 2 business days...</p>

<!-- Acceptable when native heading cannot be used: -->
<div role='heading' aria-level='2'>Shipping Policy</div>
<p>Orders are shipped within 2 business days...</p>

Errori Comuni

• Usare classi CSS come .title o .section-header su elementi <p> o <div> invece di veri elementi <h1>–<h6>: Il solo stile visivo non comunica la struttura alle tecnologie assistive. L’intestazione deve essere un vero elemento di intestazione o avere un ruolo ARIA di intestazione valido con un livello esplicito.
• Scegliere i livelli di intestazione in base alla dimensione del font anziché alla gerarchia del documento: Selezionare <h4> perché viene visualizzato alla dimensione desiderata, quando logicamente dovrebbe essere un <h2>, interrompe la struttura del documento e confonde gli utenti di screen reader che sentono «heading level 4» senza alcun livello 2 o 3 precedente.
• Applicare override di font-size o font-weight per ridurre visivamente un <h1> invece di usare un elemento di intestazione di livello inferiore: Questo crea una discrepanza tra gerarchia visiva e gerarchia semantica; usa il CSS per controllare la dimensione e i livelli di intestazione nativi per trasmettere la struttura.
• Omettere le intestazioni dalle sezioni di contenuto caricate dinamicamente (ad esempio, pannelli di tab, finestre modali o risultati caricati via AJAX): Quando nuovo contenuto viene inserito nella pagina, spesso manca di struttura di intestazione. Ogni sezione renderizzata dinamicamente dovrebbe includere un’intestazione appropriata, così che le persone che navigano tramite intestazioni non restino bloccate in un’isola di contenuto non etichettata.
• Usare un solo <h1> per il titolo della pagina e nessun’altra intestazione su una pagina con cinque o più sezioni di contenuto distinte: L’esistenza di un <h1> soddisfa i controlli automatizzati ma non soddisfa 2.4.10 se le sezioni principali successive non sono etichettate.
• Nidificare intestazioni all’interno di elementi <button> o <a>: Inserire un’intestazione all’interno di un elemento interattivo crea ruoli in conflitto per le tecnologie assistive ed è HTML non valido. Le intestazioni dovrebbero etichettare sezioni di contenuto, non controlli interattivi.
• Usare role='heading' senza specificare aria-level: Il livello implicito ARIA predefinito è 2, che potrebbe non corrispondere alla struttura del documento prevista e produrrà silenziosamente una struttura errata se la sezione si trova a un livello diverso.
• Aggiungere intestazioni decorative o ripetute — ad esempio, ripetere il titolo della pagina come <h2> all’interno di ogni scheda di contenuto — che creano rumore di intestazioni senza un valore di navigazione significativo: Le intestazioni dovrebbero descrivere in modo univoco e accurato la sezione che introducono; intestazioni ridondanti riducono l’utilità della navigazione per intestazioni per gli utenti di screen reader.
• Nascondere visivamente le intestazioni con display:none o visibility:hidden nel tentativo di fornire una struttura solo per screen reader: Queste proprietà CSS nascondono l’elemento anche alle tecnologie assistive. Usa la tecnica standard di «visually hidden» (position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);) se un’intestazione deve essere presente nell’albero di accessibilità ma non visibile sullo schermo.
• Non aggiornare la struttura delle intestazioni quando il contenuto della pagina viene riorganizzato durante un redesign: Le intestazioni aggiunte durante lo sviluppo iniziale spesso restano obsolete quando le sezioni di contenuto vengono riordinate, unite o sostituite. Le verifiche sulle intestazioni dovrebbero far parte di qualsiasi ciclo di revisione di contenuti o design, non essere una correzione di accessibilità una tantum.

Relazione con le Normative di Accessibilità della Turchia

La Circolare Presidenziale 2025/10 della Turchia, pubblicata nella Gazzetta Ufficiale n. 32933 il 21 giugno 2025, stabilisce obblighi completi in materia di accessibilità digitale per un’ampia gamma di soggetti che operano in Turchia. La circolare si allinea alle WCAG 2.2 come standard tecnico per la conformità all’accessibilità digitale e si applica a istituzioni pubbliche, piattaforme di e-commerce, banche e istituzioni finanziarie, ospedali e fornitori di servizi sanitari, società di telecomunicazioni con 200.000 o più abbonati, agenzie di viaggio, società di trasporto privato e scuole private autorizzate dal Ministero dell’Istruzione Nazionale (MoNE).

WCAG 2.4.10 — Intestazioni di sezione è un criterio di Livello AAA. Ciò significa che non rientra tra i criteri minimi legalmente richiesti dalla circolare, che impone la conformità ai Livelli A e AA per i soggetti interessati. Tuttavia, l’intento più ampio della circolare è garantire un accesso digitale significativo per tutti gli utenti, e i criteri di Livello AAA come 2.4.10 sono esplicitamente riconosciuti come rappresentativi di una pratica di accessibilità allo stato dell’arte.

Per i soggetti interessati — in particolare istituzioni pubbliche, banche, ospedali e grandi fornitori di telecomunicazioni — implementare WCAG 2.4.10 dimostra un impegno per l’accessibilità che va oltre i minimi normativi. In pratica, gerarchie di intestazioni ben strutturate sono anche una precondizione per diversi criteri di successo di livello AA (come 1.3.1 Info and Relationships e 2.4.6 Headings and Labels), il che significa che le organizzazioni che mirano a una piena conformità AA si avvicineranno naturalmente alla conformità a 2.4.10 come parte di tale sforzo.

I servizi specializzati rivolti a persone con disabilità, o i servizi digitali offerti da istituzioni pubbliche che servono popolazioni di cittadini diversificate, inclusi anziani, persone con disabilità cognitive o utenti di tecnologie assistive, trarrebbero particolare beneficio dalla piena implementazione di 2.4.10. La crescente enfasi della Turchia sui servizi di governo digitale (e-devlet) e l’espansione dell’e-commerce rendono una struttura robusta dei contenuti non solo un requisito di accessibilità ma anche una priorità di usabilità e di gestione del rischio legale.

Le organizzazioni in Turchia che si certificano volontariamente al Livello AAA delle WCAG 2.2 — incluso 2.4.10 — si posizionano come leader in materia di accessibilità, il che sostiene la fiducia nel marchio, riduce il rischio di contenzioso e amplia il loro pubblico potenziale includendo gli stimati 8,5 milioni di persone con disabilità in Turchia, come riportato dall’Istituto di Statistica Turco (TÜİK).