Ufficialmente: SÌ
Formalmente: NOAbbiamo imparato a strutturare la gerarchia dei titoli iniziando con tag H1 perché è utile per SEO e accessibilità. Ma ci sono casi in cui un diverso ordine può migliorare l’accessibilità. Vediamo degli esempi:
1. theguardian.com
Il sito inizia con H2 e titolo “Support the Guardian” e si riferisce al bottone giallo che chiede di abbonarsi. Il giornale è gratuito e si distingue tra le grandi testate per la sua comunicazione digitale.
2. gov.uk
Inizia con H2 e titolo “Navigation menu”. Si riferisce al menu che si apre cliccando sul bottone del menu ed è studiato appositamente per Screen Reader.
3. wikipedia.org
Le pagine iniziano con H2 e titolo “Contents”. Si riferisce alla tabella dei contenuti a sinistra, molto utile per navigare tra gli argomenti.
4. developer.mozilla.org
Anche qui le pagine iniziano con H2 e titolo “In this article”. L’approccio è quello di Wikipedia.
5. bbc.com
BBC inizia con H2 dal titolo “Accessibility links” e identifica la sezione degli skip link attivabili con bottone Tab da tastiera.
6. repubblica.it
La home del giornale italiano inizia con H2 e pone l’attenzione sulla notizia più importante della giornata.
7-8. gov.uk
Per notizie importanti, gov.uk inserisce un banner con titolo H2 sotto al menu. È successo in occasione del funerale della Regina Elisabetta II e del Covid.
9. nhs.uk
La stessa cosa succede nel sito del sistema sanitario inglese.
10. deque.com
Il sito inizia con H2 intitolato “This website uses cookies”. È un caso frequente tra gli esempi analizzati. In questo modo il banner dei cookie può essere chiuso all’inizio della navigazione.
11. nhs.uk
L’ultimo esempio mostra una combinazione di più tag H2 prima del titolo H1 ed è utile quando si sommano più funzioni come: Cookie banner + Breaking news.
Cosa abbiamo imparato?
Iniziare con tag H2 può essere utile quando hai a che fare con:
- Abbonamenti
- Navigazione
- Skip link
- Breaking news
- Update
- Cookie banner
Semplice e logico
È importante capire dove sei sul sito ma è essenziale vivere un’esperienza di utilizzo il più simile possibile a quella visibile su monitor.
Screen Reader
Di fatto, con lo Screen Reader puoi navigare velocemente tra i titoli, e quindi è giusto inserire le cose più importanti all’inizio.
headingsMap
Per le analisi ho usato l’estensione headingsMap per Chrome e Firefox. Questo post è ispirato a un articolo di Jeff Singleton.
Una pagina web deve iniziare per forza con H1?
Abbiamo imparato a strutturare la gerarchia dei titoli iniziando con tag H1 perché è utile per SEO e accessibilità. Ma ci sono casi in cui un diverso ordine può migliorare l’accessibilità. Vediamo degli esempi:
