heading
Contrassegna un elemento come intestazione. Si preferisce sempre <h1>–<h6>, che trasmettono la semantica corretta e il livello appropriato senza ulteriori attributi. Si ricorre a role="heading" solo quando è necessario promuovere un elemento che non può essere un <h*>.
Quando usarlo
Si preferisce sempre <h1> fino a <h6>. L’elemento di intestazione nativo fornisce il role, il livello e uno stile predefinito dell’user agent.
role="heading" è appropriato solo quando non è possibile usare un’intestazione nativa — tipicamente all’interno di un CMS vincolato che rende tutto il testo come <p> o <div>. In tal caso, è obbligatorio impostare aria-level su un valore da 1 a 6 (o superiore, ma nella pratica le tecnologie assistive ignorano i livelli oltre il 6).
Non si devono saltare livelli di intestazione: un <h2> non deve essere seguito direttamente da un <h4> senza un <h3> intermedio. Gli utenti di screen reader che navigano per intestazioni dipendono dalla coerenza della struttura del documento.
Errori frequenti
role="heading"senzaaria-level. Il role è tenuto a indicare il livello.- Testo visivamente formattato come «intestazione» (grande e in grassetto) racchiuso in un
<div>o<span>privo di role heading. Gli utenti di screen reader lo saltano completamente. - Più elementi
<h1>su una pagina quando è prevista una sola intestazione principale. La buona pratica prevede un unico<h1>per pagina che denomini il contenuto principale. - Saltare livelli — passare da
h2ah4— interrompe la struttura del documento. - Testo decorativo stilizzato come un’intestazione ma non destinato a esserlo, contrassegnato comunque come heading. Genera confusione nella navigazione tramite screen reader.
Esempio
<!-- Soluzione preferita -->
<h2>Come presentare un reclamo</h2>
<!-- Solo quando <h2> non è possibile -->
<div role="heading" aria-level="2">Come presentare un reclamo</div>