Navigazione da tastiera e gestione del focus
Assicurarsi che tutti gli elementi interattivi siano raggiungibili con Tab, gestire programmaticamente il focus nei dialog e nel routing e creare indicatori di focus visibili.
Navigazione da tastiera e gestione del focus è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.
Perché la navigazione da tastiera è importante
Molti utenti non possono usare il mouse: persone con disabilità motorie, utenti di screen reader e utenti esperti che preferiscono la tastiera. Se la sua app non è navigabile da tastiera, per loro non funziona.
Tab e Shift+Tab
Tab sposta il focus sull'elemento interattivo successivo. Shift+Tab lo sposta su quello precedente. Per impostazione predefinita, l'ordine segue quello del DOM: non lo contrasti; lasci che sia il DOM a definire l'ordine di tabulazione.
Che cosa può ricevere il focus per impostazione predefinita
Gli elementi interattivi nativi possono ricevere il focus: a[href], button, input, select, textarea, summary. Gli elementi personalizzati necessitano di tabindex.
Valori di tabindex
tabindex="0": incluso nell'ordine di tabulazione nella posizione del DOM. tabindex="-1": può ricevere il focus solo tramite JS (focus da script, non con Tab). tabindex=">0": anti-pattern; crea un ordine di focus confuso, non lo utilizzi mai.
<!-- Custom button (still: use real <button>!): -->
<div role="button" tabindex="0" onkeydown="...">Custom</div>
<!-- Programmatically focusable, skipped by Tab: -->
<div tabindex="-1" id="error-summary"></div>Indicatore di focus visibile
Non rimuova mai i contorni del focus senza fornire un'alternativa. WCAG richiede un indicatore visibile su ogni elemento che può ricevere il focus.
/* BAD: hides focus for everyone */
*:focus { outline: none; }
/* GOOD: only show focus from keyboard (not mouse click) */
:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 2px;
}:focus-visible
La pseudo-classe :focus-visible si attiva solo quando il focus proviene dalla tastiera, non da un clic del mouse. Le permette di mantenere stili puliti per il mouse mostrando al contempo il focus da tastiera.
Link per saltare al contenuto
Il primo elemento che può ricevere il focus dovrebbe essere un link per saltare al contenuto, così gli utenti da tastiera possono superare la navigazione dell'header e passare direttamente al contenuto principale.
<a href="#main" class="skip-link">Skip to main content</a>
...
<main id="main" tabindex="-1">...</main>
/* CSS */
.skip-link {
position: absolute; left: -10000px;
}
.skip-link:focus {
left: 1rem; top: 1rem;
background: white; padding: 0.5rem 1rem;
}Blocco del focus nelle finestre modali
Quando si apre una finestra modale, il focus dovrebbe rimanere al suo interno: Tab dall'ultimo elemento torna al primo, mentre Shift+Tab dal primo torna all'ultimo. La pressione di Esc chiude la finestra modale.
// On modal open:
modal.querySelector('h2').focus(); // move focus into modal
lastFocused = document.activeElement;
// On Tab in modal: detect leaving and wrap to first focusable.
// On Escape: close modal and restore focus:
lastFocused.focus();Utilizzi l'elemento dialog
Il <dialog> nativo di HTML gestisce automaticamente il blocco del focus, la chiusura con Esc e lo sfondo oscurato della finestra modale.
<dialog id="signup">
<h2>Sign up</h2>
<form method="dialog">
<input name="email" required>
<button>Submit</button>
<button value="cancel">Cancel</button>
</form>
</dialog>
<script>
document.getElementById('signup').showModal(); // opens with focus trap
</script>Gestione del focus dopo un cambio di route
Le SPA non ricaricano la pagina, quindi gli utenti degli screen reader non ricevono alcun segnale che la navigazione sia avvenuta. Sposti il focus sull'h1 o sul main della nuova pagina quando cambia la route.
// On route change:
document.getElementById('main')?.focus();
// or focus the new h1:
newPage.querySelector('h1')?.setAttribute('tabindex', '-1');
newPage.querySelector('h1')?.focus();L'ordine del focus dovrebbe corrispondere all'ordine visivo
Si assicuri che l'ordine del DOM corrisponda al flusso visivo. Se il CSS riordina gli elementi (con flex order, grid placement o position absolute), l'ordine di tabulazione non corrisponderà a quello visivo: questo crea confusione per tutti.
Provi mettendo da parte il mouse
Il test di accessibilità più utile consiste nello scollegare il mouse e provare a utilizzare l'intera app con Tab, Shift+Tab, Invio, Spazio e i tasti freccia. Se rimane bloccato, anche i suoi utenti rimarranno bloccati.
Controllo rapido
Quale pseudo-classe CSS permette di applicare lo stile al contorno del focus solo quando il focus proviene dalla tastiera e non da un clic del mouse?
Riepilogo: navigazione da tastiera
Gli elementi interattivi nativi possono ricevere il focus per impostazione predefinita. Utilizzi tabindex=0 solo per i widget personalizzati; non utilizzi mai tabindex>0. Mostri sempre il focus, utilizzando :focus-visible. Aggiunga un link per saltare al contenuto. Blocchi il focus nelle finestre modali e lo ripristini alla chiusura. Utilizzi il
Domande Frequenti
La lezione «Navigazione da tastiera e gestione del focus» è gratuita?
Sì — il testo completo di «Navigazione da tastiera e gestione del focus» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.
Cosa imparerò in «Navigazione da tastiera e gestione del focus»?
Assicurarsi che tutti gli elementi interattivi siano raggiungibili con Tab, gestire programmaticamente il focus nei dialog e nel routing e creare indicatori di focus visibili. Eserciti Frontend Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Frontend Academy?
Non è richiesta alcuna esperienza precedente. Frontend Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Navigazione da tastiera e gestione del focus»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Frontend Academy?
Sì. Ogni lezione Frontend Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Livelli WCAG: A, AA e AAA
- HTML semantico come fondamento
- Ruoli e attributi ARIA
- Navigazione da tastiera e gestione del focus