0Pricing
HTML Academy · Lezione

Navigazione da tastiera e ordine del focus

Assicurarsi che tutte le funzionalità siano raggiungibili dalla tastiera in modo logico

Navigazione da tastiera e ordine del focus è una lezione HTML 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 HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.

Chi ha bisogno della navigazione da tastiera?

Molti utenti si affidano alla navigazione da tastiera:

  • Disabilità motorie — non possono utilizzare il mouse
  • Utenti esperti — preferiscono le scorciatoie da tastiera
  • Utenti di screen reader — navigano interamente tramite tastiera
  • Utenti di switch access — utilizzano pulsanti che simulano la pressione dei tasti

Elementi naturalmente focalizzabili

Questi elementi HTML possono ricevere il focus da tastiera per impostazione predefinita:

  • <a href> — Tab sposta il focus sull'elemento, Invio lo attiva
  • <button> — Tab sposta il focus sull'elemento, Invio/Spazio lo attiva
  • <input>, <textarea>, <select> — Tab sposta il focus su questi elementi
  • <details> / <summary> — Tab + Invio

Ordine di tabulazione

Il browser determina l'ordine di tabulazione in base a:

  • Ordine nel DOM per impostazione predefinita — gli elementi ricevono il focus nell'ordine in cui compaiono nell'HTML
  • Valori tabindex positivi — questi elementi ricevono prima il focus, in ordine crescente
  • tabindex="0" — aggiunto all'ordine di tabulazione naturale nella sua posizione nel DOM
  • tabindex="-1" — escluso dall'ordine di tabulazione; può ricevere il focus solo tramite script

Ordine di tabulazione naturale = ordine nel DOM

L'ordine di lettura dell'HTML deve corrispondere alla disposizione visiva:

<!-- GOOD: DOM order matches visual left-to-right, top-to-bottom: -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>

<!-- BAD: visually reordered with CSS, DOM order broken:
     CSS flexbox order: doesn't affect tab order!
     Screen readers and keyboard users follow DOM order, not CSS order -->

Indicatore del focus visibile

WCAG 2.4.7 (Livello AA): il focus della tastiera deve essere visibile:

/* NEVER do this: */
* { outline: none; }           /* removes all focus outlines */

/* GOOD: styled focus indicator: */
:focus-visible {
  outline: 2px solid #0070f3;
  outline-offset: 3px;
  border-radius: 4px;
}

/* :focus-visible shows outline for keyboard only
   mouse clicks don't trigger :focus-visible -->
/* But outline: none with :focus (not :focus-visible) hides for both */

Stili personalizzati del focus

Stili del focus del design system:

/* Replace outline with box-shadow for rounded elements: */
button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.4);
}

/* Always ensure 3:1 contrast ratio between
   focus indicator and background (WCAG 2.4.11 Level AA) */

Ordine logico del focus

L'ordine del focus deve essere logico e prevedibile — WCAG 2.4.3 (Livello A):

<!-- BAD: focus order jumps around the page -->
<!-- First: footer link (tabindex=5) -->
<!-- Then: sidebar (tabindex=3) -->
<!-- Then: header nav (tabindex=1) -->

<!-- GOOD: natural DOM order matches reading flow: -->
<!-- Header → Nav → Main Content → Sidebar → Footer -->

Collegamenti per saltare la navigazione

I collegamenti per saltare la navigazione consentono agli utenti da tastiera di evitare la navigazione ripetitiva:

<a href="#main-content" class="skip-link">Skip to main content</a>

<!-- Visually hidden until focused: -->
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: #0070f3;
  color: white;
  padding: 0.75rem;
  z-index: 9999;
}
.skip-link:focus {
  top: 0;  /* visible when focused -->
}

Trappola del focus nelle finestre modali

Le finestre modali devono trattenere il focus mentre sono aperte:

<!-- When modal opens:
1. Move focus to modal container or first interactive element
2. Tab stays within modal
3. When modal closes, return focus to the trigger button
-->

const modal = document.getElementById('modal');
const trigger = document.getElementById('open-modal');

function openModal() {
  modal.removeAttribute('hidden');
  modal.querySelector('button, [tabindex="0"]').focus();
}

function closeModal() {
  modal.setAttribute('hidden', '');
  trigger.focus();
}

Scorciatoie da tastiera

Implementi le scorciatoie da tastiera con gli event listener:

document.addEventListener('keydown', (e) => {
  // Close modal on Escape:
  if (e.key === 'Escape') closeModal();

  // Navigate tabs with arrow keys:
  if (e.key === 'ArrowRight') focusNextTab();
  if (e.key === 'ArrowLeft') focusPrevTab();

  // Submit form on Enter (default behavior in inputs):
  // Nothing needed — browser handles this
});

Testare la navigazione da tastiera

Come testare l'accessibilità da tastiera:

  1. Metta da parte il mouse e utilizzi soltanto la tastiera
  2. Prema Tab — riesce a raggiungere ogni elemento interattivo?
  3. L'indicatore del focus è sempre visibile?
  4. L'ordine di tabulazione è logicamente sensato?
  5. Può utilizzare tutte le funzionalità (moduli, finestre modali, menu a discesa) senza mouse?
  6. Prema Maiusc+Tab per navigare all'indietro

Verifica rapida

Quale proprietà CSS non dovrebbe mai rimuovere da tutti gli elementi per garantire l'accessibilità da tastiera?

Riepilogo: navigazione da tastiera

Elementi essenziali dell'accessibilità da tastiera:

  • Tutti gli elementi interattivi devono poter essere raggiunti con Tab
  • Ordine nel DOM = ordine di tabulazione — deve corrispondere alla disposizione visiva
  • Non rimuova mai i contorni del focus — utilizzi :focus-visible per gli stili personalizzati
  • I collegamenti per saltare la navigazione consentono di evitare la navigazione ripetitiva
  • Utilizzi una trappola del focus nelle finestre modali e ripristini il focus alla chiusura
  • Effettui i test utilizzando il sito soltanto con la tastiera

Domande Frequenti

La lezione «Navigazione da tastiera e ordine del focus» è gratuita?

Sì — il testo completo di «Navigazione da tastiera e ordine 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 HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.

Cosa imparerò in «Navigazione da tastiera e ordine del focus»?

Assicurarsi che tutte le funzionalità siano raggiungibili dalla tastiera in modo logico Eserciti HTML 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 HTML Academy?

Non è richiesta alcuna esperienza precedente. HTML 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 ordine 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 HTML Academy?

Sì. Ogni lezione HTML 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

  1. Perché l’accessibilità è importante: livelli WCAG
  2. Gerarchia delle intestazioni per gli screen reader
  3. Testo alternativo delle immagini: quando e come
  4. Navigazione da tastiera e ordine del focus
← Torna a HTML Academy