APG Patterns Examples
Accessible UI components and tests implementing WAI-ARIA APG patterns across React, Vue, Svelte, and Astro—concise examples and verifiable tests to help build accessible interfaces. Styling includes dark mode, high-contrast, and forced-colors support.✨
Available Patterns
Accordion
A vertically stacked set of interactive headings that each reveal a section of content.
Alert
An element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task.
Breadcrumb
A list of links to the parent pages of the current page in hierarchical order.
Button
A widget that enables users to trigger an action or event, such as submitting a form or toggling a state.
Carousel
Presents a set of items, referred to as slides, by sequentially displaying a subset of one or more slides.
Checkbox
Supports dual-state (checked/unchecked) and tri-state (checked/unchecked/partially checked) checkboxes.
Combobox
An input widget with an associated popup that enables users to select a value from a collection.
Dialog (Modal)
A window overlaid on the primary window, rendering the content underneath inert.
Disclosure
A button that controls the visibility of a section of content.
Feed
A section of a page that automatically loads new sections of content as the user scrolls.
Landmarks
A set of eight roles that identify the major sections of a page.
Link
A widget that provides an interactive reference to a resource.
Listbox
A widget that allows the user to select one or more items from a list of choices.
Menu Button
A button that opens a menu of actions or options.
Meter
A graphical display of a numeric value that varies within a defined range.
Radio Group
A set of checkable buttons, known as radio buttons, where only one can be checked at a time.
Slider
An input where the user selects a value from within a given range.
Spinbutton
An input widget for selecting from a range of discrete values, typically with increment/decrement buttons.
Switch
A type of checkbox that represents on/off values, as opposed to checked/unchecked.
Table
A static tabular structure containing one or more rows that each contain one or more cells.
Tabs
A set of layered sections of content, known as tab panels, that display one panel at a time.
Toolbar
A container for grouping a set of controls, such as buttons, toggle buttons, or checkboxes.
Tooltip
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.
Tree View
A widget that presents a hierarchical list with nested groups that can be collapsed and expanded.