Learn Accessibility
by Experience
Interactive HTML/CSS/JS examples with a built-in screen reader emulator that lets you hear and see how assistive technology interprets your code.
Interactive Controls
Buttons
Semantic buttons, toggle states, and icon buttons
Links vs. Buttons
When to use anchor vs. button — the most violated semantic distinction
Accordions
Expandable content sections with proper state
Disclosure Widgets
Show/hide with details/summary and custom disclosures
Tabs
Tabbed interfaces with roving tabindex
Toggle Controls
Switch, toggle button, and checkbox — when to use each
Tooltips & Toggletips
Supplementary info on hover/focus and the toggletip alternative
Combobox & Autocomplete
Searchable dropdowns and autocomplete inputs
ARIA Menus
Application menus vs. navigation — and why you probably don't need them
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
Styling native inputs without destroying accessibility
Required Fields & Grouping
Marking required fields and grouping with fieldset/legend
Password Show/Hide
Revealing 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 dialog element with focus trapping and management
Alert Dialogs
Confirmation dialogs requiring acknowledgment
Toast Notifications
Transient messages and their accessibility risks
Popovers
The native Popover API and light-dismiss overlays
Non-Modal Dialogs
Dialogs that don't block the rest of the page
Navigation & Structure
Skip Links
Skip-to-content patterns for keyboard users
Landmarks
The structural backbone of accessible pages
Breadcrumbs
Wayfinding navigation showing location in the hierarchy
Pagination
Page-by-page navigation for lists and data sets
Heading Structure
The #1 navigation mechanism for screen reader users
Navigation Menus
Site nav with disclosure pattern and landmarks
Mega Menus
Large dropdown navigation — using disclosure, not ARIA menus
Content & Media
Images & Alt Text
Informative, decorative, and complex image alternatives
Icons
SVG icons, icon fonts — decorative vs. informative
Live Regions
Alerts, status messages, and dynamic updates
Data Tables
Sortable, structured data with proper header associations
Cards
Content cards with the block link pattern done right
Loading States
Communicating loading progress to screen reader users
Infinite Scroll
Why infinite scroll fails and what to do instead
Cross-Cutting Patterns
Focus Management
Focus trapping, restoration, roving tabindex, and programmatic focus
Focus Indicators
WCAG 2.2 enhanced focus requirements and CSS patterns
Target Sizing
WCAG 2.2 minimum target size requirements
Reduced Motion
Respecting prefers-reduced-motion preferences
Forced Colors
Designing for Windows High Contrast Mode
The inert Attribute
Making background content non-interactive with one attribute
Drag & Drop
Single-pointer alternatives for every drag operation