02
Keyboard and Focus

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


Lessons

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

7 lessons · ~102 min total

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

Prerequisites

  • · accessibility-foundations or equivalent
  • · Comfortable writing HTML and CSS
  • · Some JavaScript helpful for focus management

After this, try