Keyboard Navigation
Making every interactive affordance reachable and operable without a pointer.
Keyboard navigation is the requirement that everything doable with a pointer be doable from the keyboard. It serves people who cannot use a mouse, people using screen readers, and — not incidentally — anyone who prefers to keep their hands on the keys.
The baseline is that focus order follows a sensible reading order, every interactive element is reachable by Tab, the focused element is visibly focused, and standard keys do standard things: Enter and Space activate, Escape dismisses, arrow keys move within a composite widget like a menu or a radio group.
That last distinction is the one most often missed. Within a composite, Tab should move to the widget and arrow keys should move inside it — a menu with ten items should not require ten tab presses to pass. Getting this right is most of what Headless Component libraries provide.
Two design notes worth holding onto. A scrollable region containing nothing focusable is unreachable by keyboard and needs to be made focusable explicitly — a real failure that is invisible until something frames the region at a height that scrolls. And custom shortcuts should be discoverable and non-conflicting; single-letter accelerators are pleasant in a focused application and hostile anywhere text can be typed.
See also5
Hand-picked in the note itself — the neighbours worth reading next.
Focus Management
Deliberately controlling which element receives keyboard focus as an interface changes.
Design & Interface14 connections
Accessibility
Designing so that people with disabilities can use a thing, and the standards that make it checkable.
Design & Interface20 connections
Semantic HTML
Using elements for their meaning, so the document conveys structure without extra description.
Design & Interface12 connections
Terminal User Interface
An interface rendered as text in a terminal, and the design conventions that make command-line tools humane.
Graphics & Games10 connections
Focus Trap
Confining keyboard focus inside a modal surface so it cannot wander behind it.
Design & Interface10 connections
Related3
Nearby in the graph rather than deliberately chosen. Looser, sometimes surprising.
Linked from11
Notes elsewhere in the wiki that reach for this one.
- AccessibilityDesign & Interface
Designing so that people with disabilities can use a thing, and the standards that make it checkable.
- ARIADesign & Interface
Attributes that describe roles, states, and relationships to assistive technology when HTML cannot.
- contenteditableWeb Platform
The HTML attribute that makes an element directly editable, and the surface behind most rich-text editors.
- Document Object ModelWeb Platform
The live tree of objects a browser builds from a document, and the surface every UI framework writes to.
- Focus ManagementDesign & Interface
Deliberately controlling which element receives keyboard focus as an interface changes.
- Focus TrapDesign & Interface
Confining keyboard focus inside a modal surface so it cannot wander behind it.
- Headless ComponentDesign & Interface
A component supplying behaviour and accessibility with no styling of its own.
- Semantic HTMLDesign & Interface
Using elements for their meaning, so the document conveys structure without extra description.
- Stacking ContextDesign & Interface
The nested coordinate system that decides what paints above what, and why z-index often does nothing.
- Terminal User InterfaceGraphics & Games
An interface rendered as text in a terminal, and the design conventions that make command-line tools humane.
- UI PrimitiveDesign & Interface
The small set of typed components through which all interface markup is expressed.