Compatibilità:

WebSite X5 Evo e Pro dalla v.2025.1

Muoversi all’interno di un sito web dovrebbe essere un’operazione semplice e immediata per tutti. Purtroppo non tutti possono usare un mouse per navigare, e quando un sito non offre alternative, alcuni utenti rischiano di rimanere bloccati.


Per chi ha disabilità motorie o per chi utilizza uno screen reader, la tastiera è l’unico strumento di navigazione disponibile. Se un sito non è progettato per essere accessibile tramite tastiera, questi utenti possono rimanere bloccati, incapaci di accedere ai contenuti o di completare azioni fondamentali come compilare un modulo o cliccare su un pulsante.


Di contro, la navigazione da tastiera può rivelarsi utile per tutti: pensa a chi ha un mouse non funzionante, a chi preferisce usare la tastiera per velocizzare le operazioni oppure a chi naviga su un laptop con un touchpad poco preciso. Un sito ben strutturato consente di spostarsi tra i contenuti in modo fluido e intuitivo, migliorando l’esperienza per qualsiasi utente.


In questa guida vedremo perché la navigazione da tastiera è così importante per l’accessibilità web e ci concentreremo su: 


Perché la navigazione da tastiera è importante?

La navigazione da tastiera è una delle funzionalità di accessibilità più importanti per un sito web. Come abbiamo già anticipato, infatti, non tutti gli utenti possono ricorrere all'utilizzo di un mouse o di un touchpad, e per alcuni la tastiera è l’unico strumento disponibile per spostarsi tra i contenuti e interagire con le pagine.


Le persone che più dipendono dalla navigazione da tastiera includono:

  • Utenti con disabilità motorie → Chi ha difficoltà di movimento, come le persone con paralisi o tremori, può non essere in grado di usare un mouse con precisione. La tastiera diventa quindi il principale strumento di accesso al web.
  • Persone cieche o ipovedenti → Gli utenti che utilizzano screen reader interagiscono con i siti web principalmente attraverso la tastiera, navigando tra i contenuti grazie ai comandi specifici del software assistivo.
  • Utenti con disabilità temporanee o in situazioni particolari → Chi, per esempio, ha un braccio ingessato, un touchpad malfunzionante o deve lavorare con un monitor esterno senza mouse può trovarsi a dipendere dalla tastiera per navigare.


Un sito web che non permette la navigazione da tastiera rischia, dunque, di escludere una fetta significativa di utenti, limitando l’accesso ai contenuti e riducendo la qualità dell’esperienza online. 


Come funziona la navigazione da tastiera?

Com'è facile da immaginare, la navigazione da tastiera permette di muoversi tra i contenuti di un sito web senza l’uso del mouse, utilizzando solo i tasti della tastiera.


Il principale strumento di navigazione è il tasto TAB: premendolo, l’utente può spostarsi tra i vari elementi interattivi della pagina, come link, pulsanti, campi di input e menu. L’ordine con cui questi elementi vengono attraversati è determinato dalla struttura del codice HTML e segue, idealmente, un flusso logico e coerente con la disposizione visiva della pagina.


Oltre al TAB, esistono altri tasti fondamentali per la navigazione:

  • Shift + TAB → Permette di tornare all’elemento precedente.
  • Enter → Attiva link e pulsanti.
  • Barra Spaziatrice → Seleziona checkbox e attiva alcuni elementi interattivi.
  • Freccia su / Freccia giù → Scorre all’interno di menu a discesa o elementi con opzioni multiple.
  • Esc → Chiude finestre modali, menu a tendina o popup.


Quando un utente naviga con la tastiera, ogni elemento selezionabile riceve il focus, ovvero un’indicazione visiva che mostra su quale elemento ci si trova in quel momento. Un sito ben progettato assicura che il focus sia sempre visibile e chiaro, permettendo all’utente di capire esattamente dove si trova all’interno della pagina.


Le principali Linee Guida WCAG sulla navigazione da tastiera

Le Web Content Accessibility Guidelines (WCAG) stabiliscono diversi criteri per garantire che un sito web sia completamente accessibile anche a chi naviga esclusivamente con la tastiera. Di seguito, vediamo le principali:

  • Criterio 2.1.1 – Accesso tramite tastiera (Livello A)

Un sito deve essere completamente navigabile tramite tastiera, senza richiedere interazioni che necessitano di un mouse, come il trascinamento o l’uso esclusivo del puntatore. Tutti gli elementi interattivi – link, pulsanti, form e menu – devono poter essere attivati con i tasti standard della tastiera, come TAB, Enter e Barra Spaziatrice.

  • Criterio 2.1.2 – Nessun impedimento all'uso della tastiera (Livello A)

Gli utenti devono poter navigare liberamente all’interno della pagina senza rimanere bloccati su un elemento. Questo problema si verifica quando un sito non permette di spostare il focus oltre una finestra modale o un widget interattivo, impedendo all’utente di proseguire nella navigazione. Per evitare questa situazione, è essenziale che sia sempre possibile uscire da ogni sezione della pagina premendo TAB o Esc.

  • Criterio 2.4.3 – Ordine del Focus (Livello A)

L’ordine di navigazione tramite TAB deve seguire una sequenza logica che rispecchia la struttura visiva della pagina. Ad esempio, se un form è composto da campi Nome, Cognome ed Email, la navigazione da tastiera deve seguire questa sequenza, senza saltare elementi o confondere l’utente.

  • Criterio 2.4.7 – Focus Visibile (Livello AA)

Ogni elemento attivo deve avere un indicatore visivo chiaro che mostri su quale punto della pagina si trova l’utente. Il focus può essere evidenziato con un bordo visibile, un’ombra o un cambio di colore, rendendo intuitiva la navigazione. Se un sito non offre un’indicazione chiara del focus, gli utenti potrebbero trovarsi disorientati e incapaci di procedere.


È evidente che seguire questi criteri permette di migliorare l’esperienza utente e garantire che la navigazione sia accessibile a chiunque, indipendentemente dalle capacità motorie o dal dispositivo utilizzato.


Strumenti per verificare la navigabilità da tastiera

Se la navigazione da tastiera non è stata implementata correttamente, chi non può o non vuole navigare con il mouse probabilmente incontrerà dei problemi. Per evitare che ciò accada, è fondamentale testare la navigazione da tastiera e verificare che tutti gli elementi interattivi siano accessibili. 


Esistono diversi strumenti e metodi per farlo ma, sicuramente, uno dei più semplici è immediati è quello manuale. In questo caso è sufficiente disconnettere il mouse e provare a navigare il sito esclusivamente con la tastiera. In particolare, occorre eseguire le seguenti prove:

  • Premere TAB per verificare che tutti gli elementi interattivi siano raggiungibili.
  • Usare Shift + TAB per tornare indietro nella navigazione e controllare che l’ordine sia logico.
  • Premere Enter o Barra Spaziatrice su link e pulsanti per assicurarti che si attivino correttamente.
  • Controllare che il focus sia sempre visibile e che non si perda tra gli elementi della pagina.
  • Aprire e chiudere eventuali finestre modali o menu per verificare che il focus torni al punto iniziale.


In aggiunta al test manuale, è possibile utilizzare strumenti automatici per individuare eventuali problemi legati alla navigazione da tastiera. Tra quelli disponibili possiamo ricordare:

  • WAVE (Web Accessibility Evaluation Tool) → Analizza il sito e segnala eventuali problemi di accessibilità, inclusi quelli legati alla navigazione da tastiera.
  • Axe DevTools → Un’estensione per browser che identifica errori di focus e suggerisce soluzioni.
  • Chrome DevTools – Accessibility Pane → Fornisce un’analisi dettagliata degli elementi interattivi e della loro gestione del focus.

WebSite X5 e la navigazione da tastiera

Garantire una navigazione da tastiera accessibile richiede attenzione a diversi aspetti tecnici e la generazione di codice semanticamente corretto.


WebSite X5 genera un codice HTML pulito e semantico, ottimizzando la navigazione da tastiera senza bisogno di interventi manuali. In particolare:

  • L’ordine di tabulazione viene definito correttamente per garantire un flusso logico tra gli elementi interattivi.
  • Il focus è sempre visibile e segue un percorso chiaro all’interno della pagina.
  • Gli elementi dinamici, come i menu o i popup, sono configurati per spostare il focus in modo corretto e riportarlo al punto di partenza.
  • Le impostazioni predefinite rispettano le linee guida WCAG, rendendo il sito accessibile anche a chi utilizza screen reader o naviga esclusivamente da tastiera.


#tip - Per maggiori informazioni, vedi anche Criteri di accessibilità implementati in WebSite X5