2.1.1Keyboard

A UI where pressing a heading toggles a panel open or closed. Uses a button with aria-expanded to convey the current state to assistive technologies.

The simplest show/hide pattern, like a "show more" toggle that reveals or hides a single section.

An application-style menu built with role="menu" and related roles, navigated using arrow keys.

A button that opens a menu on activation. Uses aria-haspopup and aria-expanded to convey the relationship.

The fundamental yet nuanced link. Explains why you should use the a element instead of a div with onclick.

The most fundamental control. Covers the built-in accessibility the button element provides and the pitfalls of custom implementations.

An on/off selection control. Also covers handling the indeterminate (mixed) state.

Selects one option from many. A prime example of arrow key navigation with roving tabindex.

An on/off toggle. Covers the difference from checkbox and how to use role="switch".

A text input combined with a suggestion list (autocomplete). One of the most complex patterns in the APG.

Selecting from a list of options. Supports single and multi-select with arrow key navigation.

Selects a value from a range. Uses aria-valuenow/min/max with keyboard operation.

Range selection such as price ranges. Key considerations include thumb interaction constraints and labeling.

A numeric input that increments and decrements via Up/Down keys or buttons, with range announcements.

Switches content within the same area. Uses arrow key navigation, aria-selected, and roving tabindex.

Groups a set of buttons so you Tab in once and navigate among them with arrow keys.

An interactive table (data grid) where individual cells are keyboard-navigable.

A grid with expandable and collapsible rows. A composite of tree and grid patterns.

Displays a hierarchical structure. Supports expand/collapse and navigation similar to a folder tree.

Automatically rotating slides. Play/pause controls and screen reader considerations are essential.

A resize handle that moves the boundary between two panes via drag or keyboard.