APG Patterns Examples

Accessible component patterns for React, Vue, Svelte, and Astro

Browse WAI-ARIA APG pattern implementations

Learn how to use these patterns in your projects

About this project and its goals

Available Patterns

A vertically stacked set of interactive headings that each reveal a section of content.

A widget that enables users to trigger an action or event, such as submitting a form or toggling a state.

A window overlaid on the primary window, rendering the content underneath inert.

A type of checkbox that represents on/off values, as opposed to checked/unchecked.

A set of layered sections of content, known as tab panels, that display one panel at a time.

A container for grouping a set of controls, such as buttons, toggle buttons, or checkboxes.

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

An element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task.