Learn Accessibility
by Experience
Compare inaccessible and accessible interfaces, then hear and see what a screen reader receives from the same HTML.
<button>Save</button>Accessibility treeName: Save · Role: buttonSave, button
Choose a route
Learn in a useful order
Follow a path, or jump straight to the component you need.
Build strong foundations
Start with semantics, structure, and the focus patterns every interface depends on.
Start this pathBuild interactive components
Progress from disclosure widgets to the more demanding keyboard and focus patterns.
Start this pathTest the experience
Learn what assistive technology exposes, then practise checking dynamic behavior.
Start this pathPattern library
Find the pattern you are building
Search by component, behavior, or WCAG criterion.
46 examples
Interactive controls
Buttons
Semantic buttons, toggle states, and icon buttons
Links vs. Buttons
When to use an anchor or button and why the distinction matters
Accordions
Expandable content sections with proper state
Disclosure Widgets
Show and hide content with details, summary, and custom disclosures
Tabs
Tabbed interfaces with roving tabindex
Toggle Controls
Switches, toggle buttons, and checkboxes—and when to use each
Tooltips & Toggletips
Supplementary information on hover, focus, and activation
Combobox & Autocomplete
Searchable dropdowns and autocomplete inputs
ARIA Menus
Application menus versus navigation—and why you probably do not need one
Carousels
Auto-rotating content with slide navigation
Tree View
Hierarchical data with keyboard navigation
Sliders & Ratings
Range sliders, star ratings, and value announcements
Forms & inputs
Form Labeling
The hierarchy of labeling methods from native HTML to ARIA
Error Handling
Inline errors, form-level summaries, and validation timing
Custom Checkboxes & Radios
Style native inputs without destroying accessibility
Required Fields & Grouping
Mark required fields and group controls with fieldset and legend
Password Show/Hide
Reveal password text without announcing it aloud
Search Input
Search fields with live results and the search landmark
Multi-Step Forms
Step indicators, focus management, and redundant entry
Character Counter
Dynamic character counts that inform without overwhelming
Overlays & dialogs
Modals & Dialogs
Native dialogs with focus trapping and restoration
Alert Dialogs
Confirmation dialogs that require acknowledgment
Toast Notifications
Transient messages and their accessibility risks
Popovers
The native Popover API and light-dismiss overlays
Non-Modal Dialogs
Dialogs that do not block the rest of the page
Navigation & structure
Skip Links
Bypass repeated navigation and reach the main content
Landmarks
The structural backbone of accessible pages
Breadcrumbs
Wayfinding navigation that shows location in a hierarchy
Pagination
Page-by-page navigation for lists and data sets
Heading Structure
The primary navigation mechanism for many screen reader users
Navigation Menus
Site navigation with disclosure patterns and landmarks
Mega Menus
Large dropdown navigation using disclosure rather than ARIA menus
Content & media
Images & Alt Text
Informative, decorative, and complex image alternatives
Icons
Decorative and informative SVG and icon patterns
Live Regions
Alerts, status messages, and dynamic updates
Data Tables
Sortable structured data with correct header associations
Cards
Content cards with the block-link pattern done right
Loading States
Communicate loading progress to screen reader users
Infinite Scroll
Why infinite scroll fails and what to use instead
Cross-cutting patterns
Focus Management
Focus trapping, restoration, roving tabindex, and programmatic focus
Focus Indicators
WCAG 2.2 focus requirements and resilient CSS patterns
Target Sizing
WCAG 2.2 minimum target-size requirements
Reduced Motion
Respect prefers-reduced-motion preferences
Forced Colors
Design for Windows High Contrast Mode
The inert Attribute
Make background content non-interactive with one attribute
Drag & Drop
Provide single-pointer alternatives for every drag operation