WAI-ARIA Authoring Practices Guide
Accessibility
made simple.
Learn WAI-ARIA APG (Authoring Practices Guide) patterns with live demos, Good / Bad comparisons, and keyboard/ARIA references. Understand the "why" behind accessible implementations.
Interactive Demos
Try components with a keyboard or screen reader to understand the difference firsthand.
Good / Bad Comparison
See common mistakes side-by-side with recommended implementations to understand what goes wrong and why.
Implementation Checklist
Each pattern includes a ready-to-use checklist for code reviews.
Recent Changes
Tracking the latest changes to the W3C APG.
Tooltip: role="tooltip" to become name-prohibited
Due to ARIA spec changes, role="tooltip" is expected to become name-prohibited (cannot have an accessible name). This has not yet been reflected in the APG, but attention is needed for future impact.
Issue #3431(opens in a new tab)Accordion: Remove arrow key and Home/End navigation from spec
Arrow key (Up/Down) and Home/End navigation between accordion headers has been removed from the APG pattern spec. Tab is now the only standard navigation method.
PR #3434(opens in a new tab)AlertDialog: Clarify aria-modal guidance
Guidance was added to explicitly set aria-modal="true" on alert dialogs. This site already follows this practice.
PR #3421(opens in a new tab)
All Patterns
Pick any pattern that interests you. Patterns marked "Coming soon" will be published gradually.
Show/Hide & Expand
Notifications & Dialogs
Alert
AvailableA notification that immediately announces important messages via a live region without moving focus.
Dialog (Modal)
UpdatedAvailableA dialog that renders in the foreground while making the background inert. Requires a focus trap and Escape key to close.
Alert and Message Dialogs
UpdatedAvailableA dialog that requires the user to confirm or respond, such as "Are you sure you want to delete?"
Navigation
Breadcrumb
AvailableNavigation showing the current location within a site. Uses nav, a list structure, and aria-current for the current page.
Menu and Menubar
AvailableAn application-style menu built with role="menu" and related roles, navigated using arrow keys.
Menu Button
AvailableA button that opens a menu on activation. Uses aria-haspopup and aria-expanded to convey the relationship.
Link
AvailableThe fundamental yet nuanced link. Explains why you should use the a element instead of a div with onclick.
Landmarks
AvailableDivides the page into regions using header, nav, main, footer, etc., enabling quick navigation for assistive technologies.
Forms & Input
Button
AvailableThe most fundamental control. Covers the built-in accessibility the button element provides and the pitfalls of custom implementations.
Checkbox
AvailableAn on/off selection control. Also covers handling the indeterminate (mixed) state.
Radio Group
AvailableSelects one option from many. A prime example of arrow key navigation with roving tabindex.
Switch
AvailableAn on/off toggle. Covers the difference from checkbox and how to use role="switch".
Combobox
AvailableA text input combined with a suggestion list (autocomplete). One of the most complex patterns in the APG.
Listbox
AvailableSelecting from a list of options. Supports single and multi-select with arrow key navigation.
Slider
AvailableSelects a value from a range. Uses aria-valuenow/min/max with keyboard operation.
Slider (Multi-Thumb)
AvailableRange selection such as price ranges. Key considerations include thumb interaction constraints and labeling.
Spinbutton
AvailableA numeric input that increments and decrements via Up/Down keys or buttons, with range announcements.
Meter
AvailableA read-only indicator showing a quantity within a known range, such as disk usage.
Tabs & Toolbars
Data Display
Table
AvailableTabular data. Properly associating the table element with header cells is key for screen reader announcement.
Grid
UpdatedAvailableAn interactive table (data grid) where individual cells are keyboard-navigable.
Treegrid
AvailableA grid with expandable and collapsible rows. A composite of tree and grid patterns.
Tree View
AvailableDisplays a hierarchical structure. Supports expand/collapse and navigation similar to a folder tree.
Feed
AvailableMakes an infinitely scrolling article list navigable and readable with assistive technologies.
Others
Carousel
AvailableAutomatically rotating slides. Play/pause controls and screen reader considerations are essential.
Tooltip
UpdatedAvailableSupplementary text that appears on focus or hover. Uses aria-describedby with keyboard support.
Window Splitter
AvailableA resize handle that moves the boundary between two panes via drag or keyboard.