Widget patterns
The 21canonical WAI-ARIA widget patterns from the WAI-ARIA Authoring Practices Guide. Paradise’s WidgetPatternAnalyzer detects which pattern an element is attempting and reports incomplete or incorrect implementations. Each page summarises the pattern’s expected roles, states, properties, keyboard interactions, and the WCAG criteria it engages.
Navigation widgets
- Tabs
- A set of tabs each revealing one of a series of panels.
- Menu
- A list of choices, often hierarchical, presented for selection.
- Tree
- Hierarchical list of items the user can expand and collapse.
- Breadcrumb
- A trail of links showing the user's location in a hierarchy.
- Toolbar
- A row of related actions or controls.
- Grid
- Tabular structure with two-dimensional keyboard navigation.
- Feed
- Scrollable region of content articles loaded as the user moves through.
Input widgets
- Combobox
- Text input with an associated popup of suggestions.
- Listbox
- List of selectable options, single- or multi-select.
- Radio group
- Set of mutually-exclusive choices.
- Slider
- Continuous-value control between minimum and maximum.
- Spinbutton
- Numeric value with up/down increment controls.
- Switch
- On/off toggle, semantically distinct from a checkbox.
Disclosure widgets
- Dialog (modal)
- Window that interrupts the page until dismissed.
- Accordion
- Set of collapsible panels with headers.
- Disclosure
- Single button that shows or hides associated content.
- Tooltip
- Brief informational popup triggered by focus or hover.
Status widgets
- Progressbar
- Visual indicator of operation progress.
- Meter
- Scalar measurement within a known range.
- Carousel
- Slideshow of items the user can advance through.
- Link (custom)
- Custom-built link that mimics native <a> behaviour.
Reading on
- WidgetPatternAnalyzer — the analyser that validates these patterns.
- WAI-ARIA Authoring Practices Guide — the canonical reference these pages summarise.
- Back to Paradise.