Cos'è
I tag di intestazione hanno sei livelli, da <h1> (il titolo principale) fino a <h6> (la sottointestazione più piccola), e dovrebbero essere usati in ordine per costruire una struttura annidata del contenuto di una pagina: un H1 in cima, H2 per le sue sezioni principali, H3 per le sottosezioni al loro interno, e così via. "Gerarchia delle intestazioni" si riferisce semplicemente al fatto che le intestazioni di una pagina seguano davvero questo ordine annidato, oppure che i livelli vengano saltati o usati fuori sequenza, come passare direttamente da un H1 a un H3 senza un H2 nel mezzo.
È facile sbagliare quando le intestazioni vengono scelte puramente in base all'aspetto (scegliendo qualunque livello di intestazione renda al momento la dimensione del carattere desiderata) piuttosto che per il loro significato strutturale.
Perché è importante
Una gerarchia delle intestazioni ben strutturata funziona come un indice integrato direttamente nella pagina: sia i motori di ricerca sia gli utenti di screen reader vi si affidano per capire come è organizzato il contenuto di una pagina e per saltare direttamente alla sezione che interessa. Livelli di intestazione saltati o disordinati rompono quella struttura, rendendo la struttura della pagina davvero più difficile da seguire in modo programmatico, anche quando visivamente continua a leggersi bene per un visitatore che scorre normalmente la pagina.
Fare le cose per bene qui non richiede di aggiungere più intestazioni di quante ne servano a una pagina: significa semplicemente usare i livelli che la pagina già ha nell'ordine annidato corretto, invece di saltare a seconda solo della dimensione del carattere.
Come risolverlo
- Elenca ogni intestazione della pagina in ordine, annotandone il livello (H1, H2, H3, ecc.): la maggior parte degli strumenti o delle estensioni di accessibilità del browser può generare automaticamente questa struttura.
- Verifica che la pagina abbia esattamente un H1, seguito da H2 per le sezioni principali.
- Controlla se qualche livello di intestazione viene saltato, per esempio un H2 seguito direttamente da un H4 senza H3, e correggi aggiungendo il livello mancante o abbassando l'intestazione saltata.
- Se un'intestazione è stata scelta puramente per la sua dimensione visiva piuttosto che per il suo posto strutturale nella struttura, cambia il suo livello di intestazione e regola separatamente la dimensione del carattere tramite lo stile.
- Rilancia il controllo di Launch Readiness per confermare che la gerarchia sia ora coerente.