La barra di navigazione, o header, è l'elemento più importante per l'orientamento all'interno di un sito web. Progettare un menu di navigazione che sia reattivo sui dispositivi mobili e allo stesso tempo completamente usabile tramite tastiera o tecnologie assistive richiede l'applicazione di precisi pattern di accessibilità. Molti menu mobile comuni commettono l'errore di nascondere visivamente i link senza rimuoverli dall'ordine di tabulazione, costringendo gli utenti da tastiera a navigare tra elementi invisibili.

Questo componente risolve questo problema strutturale combinando classi CSS per il posizionamento e JavaScript per il controllo degli attributi di accessibilità. Il pulsante di attivazione del menu mobile (l'icona hamburger) include l'attributo aria-expanded (impostato su true o false a seconda dello stato) e fa riferimento tramite aria-controls all'ID del menu di navigazione. Quando il menu è chiuso sui dispositivi mobili, viene impostato su display: none o rimosso dal flusso tramite visibilità, assicurando che non riceva il focus in modo errato.

Per migliorare ulteriormente l'esperienza utente, viene implementata la gestione degli eventi da tastiera: in particolare, la pressione del tasto Escape chiude automaticamente il menu aperto, ripristinando il focus sul pulsante che lo ha attivato. Inoltre, il link corrispondente alla pagina corrente è contrassegnato con aria-current="page", fornendo un'indicazione semantica chiara del posizionamento dell'utente, sia a livello visivo (tramite fogli di stile dedicati) sia per i sintetizzatori vocali.