W3C ARIA Patterns
A semantic-mapping reference. The W3C ARIA Authoring Practices Guide (APG) is the canonical accessibility-first vocabulary for UI widgets — every pattern below is what assistive technology actually expects. Each row maps an APG pattern to its catalog component page, with cross-system aliases so you can name the same widget consistently across design systems.
30 W3C ARIA patterns
30 mapped to a component page
37 site components without an APG pattern
Pattern mapping
| Component page | W3C ARIA pattern | Other systems call it |
|---|---|---|
| Accordion | Accordion/accordion/W3C spec ↗ | Collapse ×3 Collapsible ×2 Disclosure ×1 Expandable Section ×1 Collapsible Accordion ×1 Panel ×1 Details ×1 Expandable ×1 Expand ×1 Expansion Panel ×1 DisclosureGroup ×1 |
| Alert | Alert/alert/W3C spec ↗ | Banner ×6 Alerts ×3 Message bar ×2 Notification ×2 Section message ×2 Alert Banner ×2 Inline Message ×2 Notification Bar ×1 Error Summary ×1 Notification banner ×1 Prompt ×1 |
| Alert Dialog | Alert and Message Dialogs/alertdialog/W3C spec ↗ | Modal ×8 Dialog ×2 Dialogs ×1 Modal confirm ×1 Modal dialog ×1 Modals ×1 AlertDialog ×1 |
| Breadcrumb | Breadcrumb/breadcrumb/W3C spec ↗ | Breadcrumbs ×31 Breadcrumb Group ×1 BreadcrumbsBar ×1 |
| Button | Button/button/W3C spec ↗ | Buttons ×8 CTA ×1 Primary Button ×1 ButtonGroup ×1 |
| Carousel | Carousel/carousel/W3C spec ↗ | Video ×1 |
| Checkbox | Checkbox/checkbox/W3C spec ↗ | Checkboxes ×4 Form Check ×1 Control Input ×1 Input Checkbox ×1 Checkbox Input ×1 Selection controls ×1 |
| Combobox | Combobox/combobox/W3C spec ↗ | Select ×6 Autocomplete ×6 Combo Box ×3 Autosuggest ×3 AutoComplete ×1 Dropdown ×1 Combo box ×1 AutocompleteField ×1 Super Select ×1 |
| Dialog | Dialog (Modal)/dialog-modal/W3C spec ↗ | Modal ×47 Modals ×4 Modal dialog ×1 Layer ×1 Modal Dialog ×1 Modal Dialogs ×1 Dialogs ×1 ConfirmationModal ×1 Timeout Modal ×1 |
| Collapsible | Disclosure (Show/Hide)/disclosure/W3C spec ↗ | Disclosure ×6 Collapse ×5 Expander ×3 Details ×3 Show / Hide ×1 Accordion ×1 View more/less ×1 Expandable section ×1 ExpandCollapse ×1 Expandable ×1 ToggleDetails ×1 |
| Feed | Feed/feed/W3C spec ↗ | GridList ×1 Comment List ×1 |
| Data Table | Grid/grid/W3C spec ↗ | DataTable ×3 Table ×2 Dynamic Table ×1 Data Grid ×1 Advanced Table ×1 |
| Landmark Regions | Landmark Regions/landmarks/W3C spec ↗ | Container ×1 Layout ×1 |
| Link | Link/link/W3C spec ↗ | Links ×4 Anchor ×3 CTA Link ×1 Text Link ×1 |
| Select | Listbox/listbox/W3C spec ↗ | Form Select ×1 Picker ×1 Form select ×1 Combo Box ×1 Select (native) ×1 Select list ×1 SimpleSelect ×1 SelectGroup ×1 Dropdown Single Select ×1 Listbox ×1 Select Field ×1 |
| Menubar | Menu and Menubar/menubar/W3C spec ↗ | Menu ×3 Navbar ×2 Top Nav ×1 Navigation ×1 Menu Bar ×1 Main Nav ×1 Top App Bar ×1 Header Navigation ×1 |
| Dropdown Menu | Menu Button/menu-button/W3C spec ↗ | Menu ×25 Dropdown ×24 Action Menu ×2 Action menu ×1 Action list ×1 Context Menu ×1 Dropdowns ×1 Popover ×1 Kebab Menu ×1 Popup Menu ×1 |
| Meter | Meter/meter/W3C spec ↗ | Metric ×1 Radial Micro Chart ×1 Gauge Visualization ×1 |
| Radio Group | Radio Group/radio/W3C spec ↗ | Radio ×26 RadioGroup ×12 Radio Button ×10 Radio button ×4 RadioButton ×4 Radios ×3 Radio Buttons ×1 Radio.Group ×1 Form Check (radio) ×1 Radio buttons ×1 |
| Slider | Slider/slider/W3C spec ↗ | Range ×6 Range slider ×2 Sliders ×1 Range Input ×1 Range Slider ×1 RangeInput ×1 Input Range ×1 Range Selector ×1 |
| Slider | Slider (Multi-Thumb)/slider-multithumb/W3C spec ↗ | Range ×6 Range slider ×2 Sliders ×1 Range Input ×1 Range Slider ×1 RangeInput ×1 Input Range ×1 Range Selector ×1 |
| Number Input | Spinbutton/spinbutton/W3C spec ↗ | Input Number ×4 NumberField ×2 NumberInput ×2 SpinButton ×1 Quantity Picker ×1 Step Input ×1 Number Field ×1 NumericInput ×1 Textfield ×1 |
| Switch | Switch/switch/W3C spec ↗ | Toggle ×16 Toggle Switch ×3 Checkbox Toggle ×2 CheckBox ×1 ToggleSwitch ×1 Toggles ×1 |
| Table | Table/table/W3C spec ↗ | Data Table ×4 DataTable ×3 Tables ×3 List ×1 Dynamic table ×1 Data table ×1 Structured List ×1 Record List ×1 |
| Tabs | Tabs/tabs/W3C spec ↗ | Tab ×10 Tablist ×1 Nav Tabs ×1 Navigation ×1 Navigation Tab Group ×1 Tab Group ×1 TabNavigation ×1 Tab Container ×1 UnderlinePanels ×1 Text Tabs ×1 Tab Bar ×1 |
| Toolbar | Toolbar/toolbar/W3C spec ↗ | Action Bar ×1 Filter Bar ×1 |
| Tooltip | Tooltip/tooltip/W3C spec ↗ | Tooltips ×4 Tip ×2 Tipseen ×1 TooltipRenderer ×1 |
| Tree View | Tree View/treeview/W3C spec ↗ | Tree ×6 TreeView ×1 Angular Tree ×1 TreeBrowser ×1 |
| Treegrid | Treegrid/treegrid/W3C spec ↗ | TreeGridList ×1 Data Table (expandable rows) ×1 |
| Window Splitter | Window Splitter/windowsplitter/W3C spec ↗ | Splitter ×1 Resizable ×1 Split Pane ×1 Resizable Panel ×1 |
Site components without an APG pattern
These components are in the catalog but don't have a dedicated entry in the W3C ARIA Authoring Practices Guide. Most are either presentational (no interaction), semantic HTML (handled natively), or composed widgets that combine multiple APG primitives.
- Avatar — Data Display
- Badge — Data Display
- Banner — Feedback
- Calendar — Form
- Card — Layout
- Chip — Data Display
- Color Picker — Form
- Context Menu — Navigation
- Date Picker — Form
- Empty — Feedback
- File Upload — Form
- Form — Form
- Hover Card — Overlay
- Icon — Content
- Image — Content
- Input — Form
- Label — Form
- List — Data Display
- Navigation Menu — Navigation
- Pagination — Navigation
- Popover — Overlay
- Progress — Feedback
- Rating — Form
- Scroll Area — Layout
- Search — Form
- Separator — Layout
- Sheet — Overlay
- Skeleton — Feedback
- Spinner — Feedback
- Stepper — Navigation
- Tag — Data Display
- Textarea — Form
- Time Picker — Form
- Timeline — Data Display
- Toast — Feedback
- Toggle — Action
- Toggle Group — Action
Source: W3C ARIA Authoring Practices Guide. Mappings curated for this site — file an issue if you spot a better fit.