Skip to content
UX Atlas
Plate A11Y·002 · AccessibilityGrid A4 · Rev. 2026-09-14

Keyboard Navigation

Everything must be operable with a keyboard alone, which is the single most load-bearing accessibility requirement.

AccessibilityCraft conventionFoundational

Definition

WCAG 2.1.1 requires all functionality to be available from a keyboard, and 2.1.2 requires that focus can always move away again. This serves screen reader users, people with motor impairments, people using switch devices or voice control, and a large number of people who simply prefer keyboards.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this plate
  1. 1Definition
  2. 2The checks that find most problems
  3. 3Expected key behaviour
  4. 4Two things every page needs
  5. 5Keeping the keyboard path intact
  6. 6Local chart
  7. 7Sources
  8. 8Continue from here

Reach for this when

  • Every interactive component.
  • Reviewing any custom widget.
  • Testing a release.

Common mistakes

  • Click handlers on non-interactive elements.
  • Positive tabindex values, which break the natural order.
  • Focus traps outside modals.
  • Focus indicators hidden behind sticky elements.

The checks that find most problems

  1. 1.Put the mouse away and complete the primary task using Tab, Shift+Tab, Enter, Space, Escape and the arrow keys.
  2. 2.Confirm every interactive element can be reached and activated.
  3. 3.Confirm focus is always visible, including over sticky headers and inside scroll containers.
  4. 4.Confirm the tab order follows the visual order.
  5. 5.Confirm focus never becomes trapped anywhere except a modal dialog, which must be escapable.
  6. 6.Confirm a skip link exists to bypass repeated navigation.

Expected key behaviour

ComponentKeys
ButtonEnter and Space activate.
LinkEnter activates.
CheckboxSpace toggles.
Radio groupArrows move and select within the group. Tab enters and leaves.
TabsArrows move between tabs. Tab moves into the panel.
MenuArrows move, Enter activates, Escape closes, typing jumps to a match.
ModalFocus trapped inside. Escape closes. Focus returns to the trigger.
ComboboxArrows move through options. Enter selects. Escape closes the list.

Two things every page needs

html
<body>
  <a class="skip-link" href="#main">Skip to main content</a>
  <header>...</header>
  <main id="main" tabindex="-1">...</main>
</body>

<style>
.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  position: static; /* visible, in the normal flow, as the first thing on the page */
}
/* Focus must not be hidden behind sticky chrome (WCAG 2.4.11) */
:root { scroll-padding-block-start: var(--header-height); }
</style>

A skip link that is hidden until focused, and scroll-padding so a sticky header never covers the element that just received focus.

Keeping the keyboard path intact

Do

  • Use a button for anything that acts and a link for anything that navigates, which is where the expected keys come from.
  • Keep the DOM order matching the visual order, since that is the tab order readers will get.
  • Give a container tabindex -1 when you need to move focus to it programmatically, rather than making it tabbable.
  • Make every custom widget escapable, and return focus to whatever opened it.

Do not

  • Do not add tabindex with a positive number. It reorders the whole page and breaks the order everywhere else.
  • Do not attach click handlers to a div and call it done. It is unreachable and unactivatable by keyboard.
  • Do not trap focus outside a modal context, including in embedded players and third-party widgets.
  • Do not rely on hover to reveal a control that has no keyboard equivalent.

Local chart

A11Y·002 · Region V · Grid A4

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

Focus IndicatorsA11Y·003 · RELIED ON BYAccordionCMP·017 · RELIED ON BYDate PickerCMP·009 · RELIED ON BYMenuCMP·018 · RELIED ON BYModal DialogCMP·010 · RELIED ON BYSliderCMP·008 · RELIED ON BYTabsCMP·016 · RELIED ON BYTooltipCMP·013 · RELIED ON BYBulk ActionsPAT·017 · RELIED ON BYCommand PalettePAT·018 · RELIED ON BYInfinite Scroll and PaginationPAT·021 · RELIED ON BYNavigationPAT·001 · RELIED ON BY

Sources

Where a source establishes something narrower than the popular reading of it, the note says so.

  1. [1]
  2. [2]

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applies when you are designing

A CheckoutA DashboardA Data TableA FormA Pricing PageA Search ExperienceAn AI ProductAn Ecommerce ExperienceAn Enterprise WorkflowAn Onboarding FlowAuthenticationNavigationSettings

Relied on by

Entries that assume this is already in place.

Often used with

These usually appear in the same screen or the same decision.

Check your work

Review passes that test whether this was done properly.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.