# Navigazione da tastiera nei menu

Un menu di navigazione è una lista di link: Tab basta. Il pattern con role="menu" e le frecce serve ai menu applicativi, e va implementato per intero.

> Pagina: https://ui.eneawork.it/blog/tastiera-navigazione-menu
> Markdown: https://ui.eneawork.it/blog/tastiera-navigazione-menu.md

*2026-11-01*

Un menu di navigazione si percorre con Tab, perché è una lista di link dentro un elemento nav; il pattern con role="menu" e le frecce appartiene ai menu applicativi, quelli con comandi. Il criterio 2.1.1 Keyboard, livello A, chiede che tutto sia raggiungibile da tastiera, non che ogni menu usi le frecce.

Il catalogo EneUI conta 111.985 componenti, 1.556 blocchi e 12.808 icone da 1.472 librerie, letti da /api/stats il 1 novembre 2026. L'indice dei tag, che copre 1.275 componenti, assegna il tag menu a 35 record e keyboard a 4, letto da /api/components/tags lo stesso giorno.

## Due menu diversi

La distinzione decide il markup. Un menu di sito porta l'utente in un'altra pagina: sono link, e Tab è il modo naturale. Un menu applicativo esegue comandi sullo stato corrente, come il menu di un editor: lì role="menu", role="menuitem" e le frecce sono corretti, perché il lettore di schermo passa in modalità applicazione. Le WAI-ARIA Authoring Practices, W3C Document License, descrivono i due pattern e li tengono separati.

## Il pattern disclosure

Products Analytics Billing

Il bottone dichiara lo stato con aria-expanded e punta alla lista con aria-controls. Enter e Space aprono, Escape chiude e riporta il focus al bottone. I link restano link: nessun role="menuitem", nessun tabindex negativo. Il criterio 4.1.2 Name, Role, Value, livello A, è soddisfatto dal bottone nativo, che ha già nome e ruolo.

## Se scegli role menu

Allora servono cinque cose insieme: tabindex="-1" su tutte le voci tranne una, tabindex="0" sulla voce attiva, le frecce su e giù che spostano il focus, Home ed End, ed Escape che chiude tornando al trigger. Il criterio 2.4.3 Focus Order, livello A, chiede che l'ordine segua un senso, e la rotazione del roving tabindex lo mantiene. Un menu a metà, con il ruolo ma senza le frecce, intrappola chi non usa il mouse.

## Il test

Percorri il menu con Tab: ogni voce deve ricevere il focus in ordine visivo. Apri il sottomenu con Enter, chiudi con Escape e controlla che il focus torni al bottone. Poi guarda lo schermo: l'indicatore deve restare visibile su ogni voce, come chiede il criterio 2.4.7 Focus Visible, livello AA.

npx --yes pa11y https://example.com --standard WCAG2AA

Pa11y, licenza LGPL-3.0, segnala un role="menu" senza voci valide o un bottone senza nome. Non preme Tab e non apre il sottomenu: la sequenza resta manuale.

## Il catalogo EneUI

EneUI indicizza i menu, la navigazione e il record navigation menu di shadcn, licenza MIT del progetto shadcn/ui: è costruito su Radix Navigation Menu, che gestisce frecce, Escape e focus. Controllo del 1 novembre 2026 sul catalogo da 111.985 componenti.

## La limitazione

Nessun pattern da tastiera salva un menu troppo lungo. Se il sottomenu apre venti link, chi usa la tastiera li attraversa tutti prima di uscire, e la navigazione peggiora. Il criterio 2.4.1 Bypass Blocks, livello A, resta necessario, e un mega-menu va progettato corto prima che accessibile.

## Dove continuare

La command palette è in command menu con shadcn; gli stili di focus sono in focus visible con Tailwind. Il confronto tra blocchi di menu pronti è in i migliori menu block.

## FAQ

### Devo usare role menu per il menu del sito?

No. Il menu del sito è navigazione: link dentro un nav, raggiungibili con Tab. role="menu" è per i menu di comandi e cambia il modo in cui il lettore di schermo interpreta la pagina.

### Le frecce servono comunque?

Solo nei menu applicativi con role="menu". In un elenco di link le frecce non sono richieste; Tab e Shift+Tab bastano e sono il comportamento atteso.

### Come dichiaro aperto un sottomenu?

Con aria-expanded sul bottone che lo controlla, aggiornato a true e false. Se il bottone ha anche aria-controls verso la lista, il lettore conosce il bersaglio.

### Escape deve chiudere il menu?

Sì. Il criterio 2.1.2 No Keyboard Trap, livello A, richiede una via d'uscita da tastiera, e Escape è la convenzione. Alla chiusura il focus torna al trigger.

### Posso aprire il menu solo con hover CSS?

No, perché chi usa la tastiera o il touch non passa sopra l'elemento. Apri con un bottone e :focus-within, oppure con uno stato JavaScript che risponde a Enter, Space ed Escape.