2.4.3Focus Order

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.

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.

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

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

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.