Accessible components
Build and test accessible components faster. Every example includes a live demo, implementation guidance, required ARIA, keyboard interactions, screen reader behavior, WCAG mapping, and real-world test cases.
For developers
Semantics, ARIA, keyboard & focus.
For testers
SR output, WCAG & test cases.
Disclosure
Overlays
Alert & Alert Dialog
A message interrupting the user with important, often time-sensitive, information requiring acknowledgment.
Carousel
A set of rotating slides with controls to move between them and pause automatic rotation.
Dialog (Modal)
A window overlaid on the page, blocking interaction with the rest of the app until dismissed.
Menu & Menu Button
A button that opens a menu of actions or links, navigable with arrow keys.
Tooltip
A supplementary popup showing extra info on hover or focus.
Navigation
Breadcrumb
A secondary navigation trail showing the user's location within a site hierarchy.
Navigation
Landmark structure and current-page indication for site navigation.
Skip Link
A visually-hidden link at the very top of the page that lets keyboard users jump past repeated blocks — like navigation — straight to the main content.
Tabs
A set of layered sections of content, one visible at a time, selected via a tab list.
Pagination
Controls for navigating through pages of paginated content.
Forms & Controls
Button (incl. toggle button)
An interactive control that triggers an action, or toggles between pressed/not-pressed states.
Checkbox (incl. tri-state)
A control allowing a binary or tri-state (checked/unchecked/mixed) choice.
Combobox
A text input combined with a popup listbox that filters/suggests options as the user types.
Link vs. Button
Guidance on when to use a hyperlink (navigation) versus a button (action) — the most common real-world defect.
Listbox (single & multi-select)
A list of options a user can select one or more values from.
Radio Group
A set of mutually exclusive selectable options.
Slider
A control for selecting a value from a continuous or discrete range.
Switch
A two-state on/off toggle control, distinct from a checkbox semantically.
Form patterns
Labels, required fields, inline error handling, error summary, aria-describedby, and autocomplete attributes.
Date Picker
A dialog-based grid pattern for choosing a date, paired with a text input.
Data Display
Table
A sortable, read-only data table with proper headers, scope, and caption — static content the user reads, not a widget they operate cell-by-cell.
Grid (interactive data grid)
An interactive tabular widget with two-dimensional arrow-key cell navigation (role="grid"). Use only when cells are interactive — read-only data belongs in a Table.