Navigazione Tastiera: Come Implementarla Bene

Perché la tastiera è importante

Molti sviluppatori pensano che rendere un sito accessibile significhi aggiungere il supporto per screen reader. In realtà, c’è molto di più. La navigazione da tastiera è fondamentale — non è solo per utenti con disabilità motorie, ma anche per chi non può usare il mouse per varie ragioni.

Secondo le linee guida WCAG 2.1, ogni funzionalità disponibile tramite mouse deve essere accessibile anche tramite tastiera. Non è un optional. È un requisito essenziale se vuoi che il tuo sito sia veramente inclusivo.

L’importanza del focus visibile

Il primo passo è assicurarsi che l’utente sappia sempre dove si trova sulla pagina. Questo significa avere un focus outline visibile su ogni elemento interattivo. Non è solo carino da vedere — è essenziale per l’usabilità.

Molti designer rimmuovono il focus outline di default perché “non è bello”. Grande errore. Se devi personalizzarlo, va bene, ma non eliminarlo. L’outline di default dei browser ha un contrasto minimo di 3:1, che non è ideale. Puoi fare di meglio.

L’ordine di tabulazione deve avere senso

Quando un utente preme Tab, vuole spostarsi attraverso gli elementi interattivi in un ordine logico. Da sinistra a destra, dall’alto in basso. Questo è l’ordine naturale della lettura in italiano.

Il problema sorge quando usi CSS per cambiare l’ordine visivo degli elementi. Se il tuo HTML ha un ordine ma il CSS li dispone diversamente, chi naviga da tastiera si troverà confuso. L’ordine nel DOM — nel codice HTML — è quello che conta per la navigazione da tastiera.

I link “Salta al contenuto”

Un utente che naviga da tastiera non vuole passare per l’intera navigazione prima di arrivare al contenuto principale. Per questo motivo, ogni sito dovrebbe avere un link “Salta al contenuto principale” — in inglese “Skip to Main Content”.

Questo link può essere nascosto visivamente, ma deve essere presente nel DOM. Quando l’utente lo raggiunge con Tab, diventa visibile. Una pratica comune è renderlo visibile solo al focus.

Non deve per forza essere bello o integrato nel design. Può essere semplice, di contrasto alto, facilmente identificabile. L’importante è che funzioni e che salti davvero al contenuto principale, non solo al primo heading.

Le modal e il focus trap

Quando apri una modal o un dialog, il focus deve rimanere dentro di essa. Non puoi permettere che l’utente tabuli dietro la modal e interagisca con elementi che sono visivamente dietro di essa. Questo si chiama “focus trap”.

Quando la modal si chiude, il focus dovrebbe tornare all’elemento che l’ha aperta. È una piccola cosa, ma rende l’esperienza molto più coerente per chi naviga da tastiera.