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.

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 A2UI — Layout
• Chip — Data Display
• Color Picker — Form
• Context Menu — Navigation
• Date Picker A2UI — Form
• Empty — Feedback
• File Upload — Form
• Form — Form
• Hover Card — Overlay
• Icon A2UI — Content
• Image A2UI — Content
• Input A2UI — Form
• Label — Form
• List A2UI — Data Display
• Navigation Menu — Navigation
• Pagination — Navigation
• Popover — Overlay
• Progress — Feedback
• Rating — Form
• Scroll Area — Layout
• Search — Form
• Separator A2UI — Layout
• Sheet — Overlay
• Skeleton — Feedback
• Spinner — Feedback
• Stepper — Navigation
• Tag — Data Display
• Textarea A2UI — Form
• Time Picker A2UI — Form
• Timeline — Data Display
• Toast — Feedback
• Toggle — Action
• Toggle Group — Action

Pattern mapping

Source: W3C ARIA Authoring Practices Guide. Mappings curated for this site — file an issue if you spot a better fit.