4.1.2Name, Role, Value

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 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.

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.

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.