Intestazioni HTML e la loro gerarchia

L’importanza delle intestazioni

Facciamo per prima cosa un piccolo escursus sulla funzione e l’importanza delle intestazioni in HTML. Se sapete gia’ di cosa sto parlando, potete tranquillamente andare alla sezione successiva.

Le intestazioni HTML, implementate con i tag h1–h6, sono molto utili e dovrebbero essere usate per qualunque oggetto che visivamente assomigli ad un’ intestazione. Questo in primis perche’ e’ una scelta semanticamente giusta, e poi perche’ aiuta i motori di ricerca nell’ indicizzazione della pagina. Ma la ragione piu’ importante e’ che aumenta in maniera incredibile l’accessibilita’ del documento.

I lettori, per esempio, possono usare delle scorciatoie da tastiera per saltare da un’ intestazione all’ altra in un documento. Per capire di cosa stiamo parlando, diamo un occhiata a Importance of HTML Headings for Accessibility, un video che mostra un utente che naviga un documento in questo modo.

Alla stessa maniera, alcuni browser permettono di utilizzare scorciatoie da tastiera, velocizzando in questo modo la lettura di un documento.

Requisiti per una buona struttura del documento

• Ogni documento dovrebbe avere una struttura delle intestazioni logica che parte dal livello 1 e utilizza di seguito tutti gli altri;
• tutto cio’ che visivamente puo’ essere assimilato ad un’ intestazione dovrebbe essere codificato come tale;
• il titolo del documento principale dovrebbe essere di livello 1;
• ci dovrebbe essere solo un’ intestazione di livello 1 (h1).

La domanda alla quale non e’ facile rispondere e’: cosa fare quando l’ intesatazione principale non e’ nella prima parte del documento? Inserire una “falsa” intestazione di primo livello? Iniziare con un h2 e dimenticarci di una perfetta sequenza logica?

Guida alle intestazioni

Cercando alcune linee guida alle intestazioni, mi sono imbattuto in WCAG 2.0 e ho trovato le seguenti linee guida.

Per facilitare la navigazione e la comprensione della struttura generale del documento, gli autori dovrebbero usare le intestazioni in maniera correttamente nidificata (h1 seguito da h2, h2 seguito da h2 o h3, h3 seguito da h3 o h4, e via dicendo).

G141: Organizing a page using headings

In questo esempio, il contenuto principale si trova al centro di una pagina a tre colonne. Il titolo del contenuto principale e’ uguale a quello della pagina ed e’ marcato come h1, anche se non si trova all’inizio della pagina stessa. Il contenuto della prima e della terza colonna e’ meno importante e quindi va marcato come h2.

h42: Using h1-h6 to identify headings

Roberto Scano ha fatto notare che queste tecniche si riferiscono a differenti criteri WCAG 2.0 di successo.

h42: Using h1-h6 to identify headings e’ una tecnica sufficiente per raggiungere un Success Criterion 1.3.1 (Info and Relationships), il quale e’ di Livello A, mentre G141: Organizing a page using headings raggiunge un Success Criterion 2.4.10 (Section Headings) di Livello AAA.

Quindi, secondo WCAG 2.0 e’ piu’ importante marcare le intestazioni propriamente che seguire una perfetta gerarchia.

Possibili opzioni

Basandoci su questo, possiamo trovare due possibili vie:

1. h1 non deve essere necessariamente la prima intestazione in via gerarchica ma usare intestazioni superiori come h2 prima del titolo del documento (come nel secondo esempio WCAG 2.0).
2. Assicurarci che il nostro logo o nome sia sempre sufficientemente in alto nel codice da poterlo usare come prima intestazione h1. Usare una intestazione di livello superiore per ogni intestazione che compare tra il nome e il titolo del documento e poi usare ancora h1.

Ecco un esempio della seconda opzione utilizzando un layout a tre colonne:

1. <div id="header">
2. <h1><img src="logo.gif" alt="Nostro Nome"></h1>
3. <h2>Menu Principale</h2>
4. <ul>
5. <li></li>
6. </ul>
7. </div>
8. <div id="nav-sub">
9. <h2>Navigazione Secondaria</h2>
10. <ul>
11. <li></li>
12. </ul>
13. </div>
14. <div id="content-primary">
15. <h1>Titolo della pagina</h1>
16. <p>Contenuto</p>
17. </div>

Le intestazioni del “Menu principale” e della “Navigazione Secondaria” possono, se il design lo richiede, essere nascoste visivamente ma risultare ancora utili alla navigazione e alla comprensione del documento.

Per le persone che le usano per navigare all’ interno del documento, le intestazioni codificate come tali sono probabilmente piu’ importanti che seguire una scala gerarchica rigida nel loro uso. Comunque, iniziare una pagina con un’ intestazione diversa da h1 o avere due h1 nello stesso documento e’ visto come scorretto da alcuni; lo stesso vale per l’utilizzo del logo come h1.

E’ difficile trovare una soluzione senza compromessi.

Quattro domande, avete risposte?

1. Avete suggerimenti migliori di quelli espsosti?
2. Se no, quale opzione ritenete migliore?
3. Molti raccomandano di usare un solo h1 per pagina. Perche’, esattamente, e quali problemi possono sorgere usando due o piu’ intestazioni di primo livello? Esempi concreti sono graditi.
4. L’utente che usa le intestazioni per navigare all’interno del documento reputa importante a che livello l’intestazione principale si colloca nel documento?

Aspetto risposte!

---

Articolo scritto da Roger Johansson (thank you!) e pubblicato su 456 Berea Street. Tradotto con l’esplicito consenso dell’ autore.