Testata di Navigazione, l’Header

Documentazione e illustrazioni per la creazione di un header di navigazione.

La parte superiore di un sito della Pubblica Amministrazione comunemente include tre componenti principali:

1. Uno Slim Header, definito come una sottile striscia dello stesso colore o, preferibilmente, di tonalità leggermente più scura rispetto al tema principale del sito. Questo elemento mostra alcuni link funzionali con impatto globale o esterno al sito stesso.

2. Un Header Centrale che identifica chiaramente il sito attraverso logo, testo e collegamenti ai social media. Può inoltre contenere un link per effettuare ricerche all’interno del sito.

3. Un Header di Navigazione dedicato esclusivamente alla navigazione, visibile su schermi di grandi dimensioni e accessibile tramite il classico pulsante “burger menu” () su dispositivi mobili.

Accessibilità Dato l’importante ruolo dell’Header nella navigazione del sito, si consiglia di prestare particolare attenzione agli esempi relativi all’utilizzo di attributi ARIA e etichettatura accessibile.

Il titolo del sito, ad esempio “Nome dell’Istituzione,” è racchiuso in un tag <div> generico invece che in un tag <h1> per evitare conflitti con eventuali <h1> presenti nelle singole pagine. Nel caso in cui la homepage non contenga un titolo specifico per l’Istituzione (ad esempio, un carousel con ultime notizie), è consigliabile applicare il tag <h1> al titolo dell’header solo su quella pagina.

Ulteriori informazioni sull’accessibilità del megamenu sono disponibili nella sezione corrispondente.

Slim Header Lo Slim Header visualizza un’intestazione che fa riferimento all’ente di appartenenza del progetto o fornisce riferimenti utili. Include anche un eventuale menu per il cambio lingua e l’accesso a un’area riservata. Il cambio lingua è gestito mediante il componente dropdown.