Intestazioni di sezione

Cosa richiede

Quando una pagina è suddivisa in sezioni, ciascuna sezione deve avere un’intestazione programmatica. Il criterio di successo non impone che ogni pagina sia articolata in sezioni — le pagine brevi con scopo unico (una schermata di accesso) possono fare a meno di sottointestazioni. Tuttavia, dove le sezioni esistono, richiedono un markup <h1>–<h6> reale in modo che la tecnologia assistiva possa costruire uno schema delle intestazioni.

Questo criterio di successo è a livello AAA, ma la pratica sottostante — usare intestazioni reali — è implicita anche nel criterio 1.3.1 (Informazioni e relazioni) al livello A, quindi la maggior parte dei siti accessibili lo soddisfa incidentalmente.

Come soddisfarlo

• Usare <h1> per il titolo della pagina (una volta sola per pagina) e scendere gradualmente con <h2>, <h3> per le sezioni nidificate senza saltare livelli.
• Sostituire <div class="heading"> e paragrafi <p> con stile che fungono da «intestazioni» con tag di intestazione reali.
• Far iniziare ogni sezione distinta dei contenuti di lunga forma (un articolo, una pagina di documentazione, un pannello impostazioni a schede) con un’intestazione.
• Per i componenti a scheda che rappresentano raccolte di sezioni simili, assegnare a ciascuna scheda un’intestazione al livello appropriato.
• Validare lo schema delle intestazioni con l’algoritmo di struttura HTML5 (axe DevTools, estensione browser headingsMap o il validatore W3C).

Errori comuni

• Paragrafi in grassetto che si spacciano per intestazioni — visivamente convincenti, invisibili all’elenco delle intestazioni di uno screen reader.
• Livelli di intestazione saltati (<h1> che salta direttamente a <h4>) perché il team del CMS ha scelto i livelli in base alla dimensione del font anziché alla gerarchia.
• Più elementi <h1> su una singola pagina (accettabile negli schemi HTML5 ma rompe la navigazione nella maggior parte delle tecnologie assistive).
• Ogni sezione etichettata con <h2> indipendentemente dalla profondità di nidificazione, appiattendo lo schema.
• Testo hero contrassegnato come <h1> mentre il titolo effettivo della pagina si trova più in basso come <h2>.

Perché è importante

Per gli utenti di screen reader, lo schema delle intestazioni è il sommario. JAWS e NVDA lo espongono in una finestra di dialogo (Insert+F6 in JAWS); VoiceOver lo espone nel rotore. Una pagina senza intestazioni, o con intestazioni usate solo per enfasi visiva, costringe questi utenti a scorrere riga per riga. Anche impegnandosi solo al livello AA, trattare le intestazioni di sezione come regola redazionale di base porta benefici in termini di SEO, riuso dei contenuti e chiarezza per i redattori.