APG Patterns
Accessible component patterns based on WAI-ARIA Authoring Practices Guide. Each pattern is implemented in React, Vue, Svelte, and Astro.
Available
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.
Alert Dialog
A modal dialog that interrupts the user's workflow to communicate an important message and acquire a response.
Breadcrumb
A list of links to the parent pages of the current page in hierarchical order.
Button
An element with role="button" that enables users to trigger an action. Demonstrates why native <button> is recommended.
Toggle Button
A two-state button that can be either pressed or not pressed, using aria-pressed to communicate 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.
Grid
A container that enables users to navigate the information or interactive elements using directional navigation keys.
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.
Menubar
A horizontal menu bar with dropdown menus, submenus, checkbox items, and radio groups for application-style navigation.
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.
Slider (Multi-Thumb)
A slider with two thumbs that allows users to select a range of values 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.
Treegrid
A widget that presents a hierarchical data grid consisting of tabular information that is editable or interactive.
Data Grid
An advanced grid for displaying and manipulating tabular data with sorting, filtering, and row selection.
Window Splitter
A 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