Keyboard Navigation

Designing so that people with disabilities can use a thing, and the standards that make it checkable.

Checking that people using screen readers, keyboards, magnification, or other assistive technology can actually use an interface, through a mix of automated scans and hands-on testing.

A stack of headings that each expand to reveal a section of content, saving space on long pages and small screens at the cost of hiding what readers might have needed to see.

Attributes that describe roles, states, and relationships to assistive technology when HTML cannot.

Difficulty and accessibility settings offered as separate, combinable toggles instead of one difficulty slider.

A panel that rotates through several slides in one spot, popular on home pages as a way to give everyone's content top billing, and notorious for low engagement and accessibility problems.

A keyboard-summoned search box that finds and runs any command by typing part of its name, giving power users speed without forcing every feature into menus.

The HTML attribute that makes an element directly editable, and the surface behind most rich-text editors.

A menu of actions for the thing under the pointer, opened by right-click or long press, which saves travel and narrows choices but is invisible until summoned, so it should never be the only route to an action.

The CSS layout mode for rows and columns at once, which brought the designer's layout grid into the browser and lets responsive layouts adapt with no breakpoints at all.

Rows and columns of values designed for looking things up and comparing exact figures, which read best with right-aligned numbers, light rules, and headers that stay put, and remain one of the hardest components to make work on a phone.

An interface control for entering a date, usually a calendar grid, which suits booking next week's appointment and frustrates anyone entering a birthday, with time zones and regional formats hiding classic bugs underneath.

Ben Shneiderman's 1983 name for interfaces where people act on visible objects with immediate, reversible feedback, such as dragging a file or resizing a shape, instead of typing commands that describe the change.

The live tree of objects a browser builds from a document, and the surface every UI framework writes to.

A control that hides a list of options until it's opened, saving space at the cost of hiding choices, which ranges from desktop menu bars to the web's notoriously hard-to-style select element and the sprawling mega menus of retail sites.

The time to hit a target shrinks with its size and grows with distance to it — so make frequent targets big and close.

The CSS layout mode for arranging items along one axis, distributing space and aligning them without floats or hacks, which finally made vertical centering trivial and powers most component layouts.

The visible outline or highlight showing which element on a screen will receive keyboard input, essential for anyone who doesn't use a mouse, and for years routinely removed by designers who found it unattractive.

Deliberately controlling which element receives keyboard focus as an interface changes.

Confining keyboard focus inside a modal surface so it cannot wander behind it.

A component supplying behavior and accessibility with no styling of its own.

A window that blocks the rest of the interface until it is dealt with, useful for decisions that truly demand attention and overused for almost everything else.

The browser's unified model for input from a mouse, a finger, or a pen, delivering one set of events with details such as pressure and contact size, which replaced separate and incompatible mouse and touch event systems.

Using elements for their meaning, so the document conveys structure without extra description.

A perceivable cue that tells people what action is possible and where to take it, the visible half of an affordance and the fix for doors that make everyone push the wrong way.

A control that sets a value by dragging a handle along a track, borrowed from the faders of audio equipment, ideal for adjusting something approximate with instant feedback and poor for entering an exact number.

The nested coordinate system that decides what paints above what, and why z-index often does nothing.

A row of labels that switch between panels of content occupying the same space, borrowed from paper folder tabs, suited to parallel sections viewed one at a time, and governed by a specific keyboard pattern.

An interface rendered as text in a terminal, and the design conventions that make command-line tools humane.

A window manager that arranges windows automatically into non-overlapping tiles and is driven mainly from the keyboard, trading freeform placement for zero layout effort.

A small label that appears when hovering or focusing an element, useful for naming icons and easy to make inaccessible, unreachable on touch, or covered by other layers.

How large a tappable element needs to be for fingers to hit it reliably, roughly 44 to 48 points, and why the visible icon can be smaller than the area that responds.

The small set of typed components through which all interface markup is expressed.