Keyboard and Focus

Tab order, skip links, focus traps, and the keyboard contracts every custom widget owes its users. Seven lessons, all hands-on.

~ 115 min·7 lessons·updated apr 2026

What you'll learn

How natural tab order falls out of the document, and when to override it
Why a one-line skip link is still the best accessibility win on the web
How to manage focus on route changes in any framework
What a focus trap is, when to build one, and the keyboard contract it owes users
Keyboard contracts for custom menus, tabs, comboboxes, and listboxes
How to give custom controls a focus indicator that survives high-contrast mode
A simple weekly habit that catches keyboard bugs before users do

Lessons

Read in order. Each lesson stands on its own, but the order is deliberate.

7 lessons · ~102 min total

01
Tab order and document flow
Natural tab order, tabindex 0 vs -1, and why positive integers are almost always wrong.
15 min
02
Skip links
The one-line accessibility win every site needs.
11 min
03
Focus management on route change
Focusing the new page heading, and why frameworks make you do this manually.
15 min
04
Focus traps for modals
What a trap is, when you actually need one, and the keyboard contract it owes.
17 min
05
Custom widget keyboard contracts
What menus, tabs, comboboxes, listboxes, and tree views need to do on a keyboard.
18 min
06
Visible focus on custom controls
Designing focus indicators that survive high-contrast mode. Outline beats box-shadow alone.
13 min
07
Keyboard testing as a habit
Unplug the mouse for an hour. The bug list that emerges is the work.
13 min