Patterns

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.

A notification that immediately announces important messages via a live region without moving focus.

A dialog that renders in the foreground while making the background inert. Requires a focus trap and Escape key to close.

A dialog that requires the user to confirm or respond, such as "Are you sure you want to delete?"

Navigation showing the current location within a site. Uses nav, a list structure, and aria-current for the current page.

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.

Divides the page into regions using header, nav, main, footer, etc., enabling quick navigation for assistive technologies.

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.

A read-only indicator showing a quantity within a known range, such as disk usage.

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.

Tabular data. Properly associating the table element with header cells is key for screen reader announcement.

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.

Makes an infinitely scrolling article list navigable and readable with assistive technologies.

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

Supplementary text that appears on focus or hover. Uses aria-describedby with keyboard support.

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