Contrasto Colore e WCAG: Quello che Devi Sapere
Guida pratica ai rapporti di contrasto WCAG AA e AAA. Scopri come testare e migliorare la leggibilità del testo.
Leggi Articolo
Web Accessibility
Navigazione da Tastiera: Implementazione Corretta
Scopri come implementare una navigazione completa da tastiera, stabilire un tab order logico e rendere il focus visibile su tutti i tuoi progetti web.
Perché la Navigazione da Tastiera è Essenziale
Non tutti usano il mouse. Molti utenti navigano il web esclusivamente da tastiera — persone con disabilità motorie, utenti che preferiscono la velocità, o semplicemente chi usa un laptop senza trackpad. La navigazione da tastiera corretta è un requisito fondamentale dell’accessibilità web, non un’opzione.
La buona notizia? Implementarla non è complicato. Con alcuni accorgimenti nel markup HTML, un po’ di CSS intelligente e una comprensione del tab order, puoi rendere il tuo sito completamente accessibile da tastiera. E il risultato? Un’esperienza migliore per tutti.
Requisiti WCAG AA
- 2.1.1 Tastiera (Livello A)
- 2.1.2 Nessun Keyboard Trap (Livello A)
- 2.4.3 Focus Visibile (Livello AA)
- 2.4.8 Focus Visibile (Potenziato) (Livello AAA)
Tab Order Logico: La Base di Tutto
Il tab order è la sequenza in cui gli elementi ricevono il focus quando l’utente preme il tasto Tab. Deve seguire un ordine logico che rispecchia come gli utenti leggono la pagina — generalmente da sinistra a destra, dall’alto al basso. Non è complicato: HTML già lo fa correttamente se scrivi il markup nell’ordine giusto.
La regola d’oro? Non usare CSS per riordinare visivamente gli elementi ignorando il flusso del documento. Se usi flexbox o grid per cambiare l’ordine visuale, devi assicurarti che il tab order rimanga logico. Altrimenti, gli utenti che navigano da tastiera vedranno il focus saltare in modo caotico.
Nel 95% dei casi, un markup semantico ben strutturato risolve tutto. Non serve quasi mai aggiungere attributi custom — il browser gestisce il tab order automaticamente seguendo il flusso del DOM.
Focus Visibile: Mostra Dove Sei
Quando un elemento ha il focus da tastiera, deve essere chiaramente visibile. Non è opzionale. Alcuni sviluppatori rimuovono l’outline predefinito del browser con
outline: none;
senza sostituirlo con qualcosa di visibile — questo è un errore che rende il sito inaccessibile.
La soluzione è semplice: usa CSS per personalizzare il focus. Un outline spesso di 3px con un colore ad alto contrasto funziona benissimo. Puoi renderlo coerente con il tuo design — non deve essere brutto, deve solo essere visibile.
a:focus, button:focus { outline: 3px solid #7c3aed; outline-offset: 2px; }
Letture Correlate
Evitare i Keyboard Trap
Un keyboard trap è una situazione in cui un utente rimane “intrappolato” in un elemento e non riesce più a navigare fuori usando solo la tastiera. Succede quando un evento come `onkeydown` intercetta i tasti senza fornire un’alternativa per uscire. Oppure quando un modal non restituisce il focus al trigger quando si chiude.
La soluzione? Non creare script che catturano i tasti senza una via d’uscita. Se crei un popup o un modal, assicurati che Escape lo chiuda e che il focus ritorni all’elemento che lo ha aperto. È una buona pratica che gli utenti da tastiera apprezzano — e anche i tuoi utenti normali.
Nel 90% dei casi, usare elementi HTML standard (come
<dialog>
) risolve automaticamente questi problemi. Non devi inventare la ruota da zero.
Come Testare l’Accessibilità da Tastiera
Non servono tool complicati per iniziare. Apri il tuo sito e smetti di usare il mouse per 5 minuti. Usa solo Tab, Shift+Tab e i tasti freccia. Riesci a navigare a tutti gli elementi interattivi? Il focus è sempre visibile? Puoi usare ogni pulsante e link?
Se riscontri problemi, controlla il markup. Nel 95% dei casi, il problema è che stai usando un `<div>` invece di un `<button>`, oppure il tab order è stato rotto da CSS. Usa strumenti come axe DevTools o WAVE per una verifica più profonda, ma il test manuale rimane il più affidabile.
1
Apri il sito nel browser
2
Metti via il mouse
3
Premi Tab e naviga
4
Prendi nota dei problemi
Il Punto Fondamentale
La navigazione da tastiera non è una feature aggiuntiva — è un requisito fondamentale di un sito accessibile. E la buona notizia è che non è complicato da implementare. Un markup semantico, un focus visibile ben definito e un tab order logico risolvono il 90% dei problemi.
Non devi essere un esperto di accessibilità per farlo bene. Devi solo pensare al tuo utente: se qualcuno non potesse usare il mouse, riuscirebbe a usare il tuo sito? Se la risposta è sì, allora hai fatto bene il tuo lavoro.
Vuoi approfondire l’accessibilità web?
Scopri come implementare un design completamente accessibile secondo i standard WCAG e la Legge Stanca italiana.
Contattaci per una ConsulenzaNota Informativa
Questo articolo fornisce informazioni educative sull’implementazione della navigazione da tastiera secondo gli standard WCAG e la Legge Stanca italiana. Le linee guida e i codici di esempio sono forniti a scopo informativo e didattico. Per un’implementazione specifica nel tuo progetto, ti consigliamo di consultare con uno specialista di accessibilità web certificato o di riferimento al tuo team tecnico. I requisiti di accessibilità possono variare a seconda del contesto, della giurisdizione e dei requisiti normativi applicabili al tuo sito web.