APG Patterns
Accessible component patterns based on WAI-ARIA Authoring Practices Guide. Each pattern is implemented in React, Vue, Svelte, and Astro.
Accordion
A vertically stacked set of interactive headings that each reveal a section of content.
Button
A widget that enables users to trigger an action or event, such as submitting a form or toggling a state.
Dialog (Modal)
A window overlaid on the primary window, rendering the content underneath inert.
Switch
A type of checkbox that represents on/off values, as opposed to checked/unchecked.
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.
Alert
An element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task.
Alert Dialog
PlannedA modal dialog that interrupts the user's workflow to communicate an important message and acquire a response.
Breadcrumb
PlannedA list of links to the parent pages of the current page in hierarchical order.
Carousel
PlannedPresents a set of items, referred to as slides, by sequentially displaying a subset of one or more slides.
Checkbox
PlannedSupports dual-state (checked/unchecked) and tri-state (checked/unchecked/partially checked) checkboxes.
Combobox
PlannedAn input widget with an associated popup that enables users to select a value from a collection.
Menu Button
PlannedA button that opens a menu of actions or options.
Disclosure
PlannedA button that controls the visibility of a section of content.
Feed
PlannedA section of a page that automatically loads new sections of content as the user scrolls.
Grid
PlannedA container that enables users to navigate the information or interactive elements using directional navigation keys.
Landmarks
PlannedA set of eight roles that identify the major sections of a page.
Link
PlannedA widget that provides an interactive reference to a resource.
Listbox
PlannedA widget that allows the user to select one or more items from a list of choices.
Menu / Menubar
PlannedA widget that offers a list of choices to the user, such as a set of actions or functions.
Meter
PlannedA graphical display of a numeric value that varies within a defined range.
Radio Group
PlannedA set of checkable buttons, known as radio buttons, where only one can be checked at a time.
Slider
PlannedAn input where the user selects a value from within a given range.
Spinbutton
PlannedAn input widget for selecting from a range of discrete values, typically with increment/decrement buttons.
Table
PlannedA static tabular structure containing one or more rows that each contain one or more cells.
Tree View
PlannedA widget that presents a hierarchical list with nested groups that can be collapsed and expanded.
Treegrid
PlannedA widget that presents a hierarchical data grid consisting of tabular information that is editable or interactive.
Window Splitter
PlannedA moveable separator between two sections, or panes, that enables users to change the relative size of the panes.
About These Patterns
Each pattern follows the WAI-ARIA Authoring Practices Guide (APG) specifications to ensure proper accessibility support.
- Proper ARIA roles and attributes
- Full keyboard navigation support
- Screen reader compatibility
- High contrast mode support
- Reduced motion preferences