1.3.1Info and Relationships

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.

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.

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.

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.