Struttura dei titoli e punti di riferimento

Un modo comune di leggere una pagina con un lettore di schermo è saltare da un titolo all'altro, quindi una pagina senza elementi h2 si legge come un libro senza capitoli.

I titoli sono un indice

Chi vede scorre il testo con gli occhi. Guarda le righe grandi e in grassetto, trova la sezione che cerca e comincia a leggere da lì. Chi usa un lettore di schermo fa lo stesso con i titoli. MDN osserva che una tecnica comune è saltare velocemente da un titolo all'altro per capire che cosa contiene una pagina, e che la maggior parte dei lettori di schermo può elencare tutti i titoli della pagina. Funziona solo se i titoli sono veri elementi da h1 a h6. Un paragrafo reso grande e in grassetto con il CSS sembra un titolo ma viene annunciato come testo normale.

Le WCAG 2.2 trattano questo punto nel criterio di successo 1.3.1 Informazioni e correlazioni, di livello A: la struttura mostrata visivamente deve essere disponibile anche nel codice. Il criterio 2.4.6 Intestazioni ed etichette, di livello AA, aggiunge che i titoli devono descrivere l'argomento della loro sezione. Un titolo che dice «Altro» o «Sezione 2» supera la prima prova e non supera la seconda.

Tre regole da MDN

Primo, non saltare livelli. Passa da h1 a h2 a h3. Chi sente un h4 subito dopo l'h1 resta a chiedersi dove siano finiti i livelli mancanti. Secondo, preferisci un solo h1 per pagina che ne nomini il contenuto, un po' come l'elemento title. Lo standard HTML ne ammette più di uno, ma MDN descrive un solo h1 come la buona pratica abituale. Terzo, non scegliere il livello di un titolo per la sua grandezza. Se un h3 sembra troppo piccolo, cambia la dimensione del carattere nel CSS e tieni il livello che corrisponde alla struttura.

Scrivere titoli che servono davvero

Un elenco di titoli vale quanto le sue parole. Metti per prima la parola utile, perché chi scorre un elenco di venti titoli sente l'inizio di ognuno e va avanti: «Orari di apertura» funziona meglio di «Quando puoi venirci a trovare». Tieni i titoli brevi e diversi tra loro, così due sezioni non si chiamano mai entrambe «Dettagli». Poi prova la scaletta. Il pannello di accessibilità negli strumenti per sviluppatori del browser, o l'elenco dei titoli di un lettore di schermo, mostra i titoli da soli. Leggili uno dopo l'altro e chiediti se hanno senso come indice. Se sì, ne approfitta anche chi scorre la pagina con gli occhi.

Punti di riferimento

I titoli dividono il contenuto; i punti di riferimento (landmark) dividono la pagina in regioni. Gli elementi header, nav, main e footer hanno ciascuno un ruolo incorporato, così un lettore di schermo può offrire un elenco di regioni e saltare direttamente al contenuto principale o alla navigazione. Una pagina di solito ha un solo main. Questi ruoli li ottieni gratis scegliendo l'elemento giusto, ed è la prima regola di ARIA messa in pratica: nessun attributo in più.

<header>
  <nav>
    <a href="/">Home</a> <a href="/menu">Menu</a>
  </nav>
</header>
<main>
  <h1>Corner Bakery</h1>
  <h2>Bread</h2>
  <h3>Sourdough</h3>
</main>
<footer>12 Mill Lane</footer>