Navigare tra le schede con i tasti freccia
Permettere agli utenti di spostarsi tra le schede con la tastiera
Navigare tra le schede con i tasti freccia è una lezione Web Accessibility Academy gratuita su CoddyKit. Questa è la lezione 2 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 Web Accessibility Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Web Accessibility Academy include 4 lezioni in totale.
Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.
Tabs Are Not Just Clickable
A correct tab set is driven by the keyboard, not the mouse alone. The APG pattern expects arrow keys to move between tabs.
The Tablist Is One Tab Stop
Pressing Tab should land on the tab set just once, not stop on every tab. The whole tablist behaves as a single stop in the page order.
Only One Tab Is Tabbable
Give the active tab tabindex="0" and every other tab tabindex="-1". This is the roving tabindex that keeps Tab from hitting them all.
<button role="tab" tabindex="0">Profile</button>Arrow Keys Move Focus
Inside a horizontal tablist, Right and Left arrows move focus from tab to tab. This is how keyboard users explore the set.
Up and Down for Vertical Tabs
If your tabs stack vertically, use Up and Down arrows instead. Set aria-orientation="vertical" so assistive tech knows the layout.
<div role="tablist" aria-orientation="vertical">...</div>Wrap Around at the Ends
When focus is on the last tab and the user presses the next arrow, wrap back to the first. Looping keeps navigation smooth and predictable.
Home and End Jump Far
Add two shortcuts: Home moves focus to the first tab and End moves it to the last. Long tab sets become much faster to navigate.
Move the Roving Index
When an arrow shifts focus, update the tabindex: set the newly focused tab to 0 and the old one to -1, then call focus on it.
newTab.tabIndex = 0; oldTab.tabIndex = -1; newTab.focus();Automatic Activation
With automatic activation, focusing a tab also selects it and shows its panel. It feels instant but can be heavy if panels are costly.
Manual Activation
With manual activation, arrows only move focus; the user presses Enter or Space to select. Prefer this when revealing a panel is expensive.
Why This Matters
Without arrow support, keyboard users must Tab through every tab and panel. Proper key handling makes the widget efficient, not just reachable.
Quick Check
Focus is on a tab in a horizontal tablist. The user presses the Right arrow. What should happen?
Recap: Arrow Navigation
You learned tabs use a roving tabindex with arrow keys, plus Home and End. Choose automatic or manual activation based on panel cost.
Domande Frequenti
La lezione «Navigare tra le schede con i tasti freccia» è gratuita?
Sì — il testo completo di «Navigare tra le schede con i tasti freccia» è 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 Web Accessibility Academy, passa a CoddyKit PRO. Il corso Web Accessibility Academy include 4 lezioni in totale.
Cosa imparerò in «Navigare tra le schede con i tasti freccia»?
Permettere agli utenti di spostarsi tra le schede con la tastiera Eserciti Web Accessibility 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 Web Accessibility Academy?
Non è richiesta alcuna esperienza precedente. Web Accessibility 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 2 di 4.
Quanto tempo richiede la lezione «Navigare tra le schede con i tasti freccia»?
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 Web Accessibility Academy?
Sì. Ogni lezione Web Accessibility 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
- Il pattern delle schede: tablist, tab, tabpanel
- Navigare tra le schede con i tasti freccia
- Accordion con button e aria-expanded
- Disclosure o schede: scegliere quello giusto