Accessibility Guides
In-depth, practical guides that go beyond theory — real code, live patterns, and testing workflows you can apply immediately, every one mapped to WCAG 2.2 AA.
59 in-depth guides9 topicsMapped to WCAG 2.2 AAFree, no signup
Standards & Compliance
3Understand what WCAG 2.2 actually requires, and how the versions differ, before you build.
Beginner
15 min
WCAG 2.2 Level AA Requirements: Complete List
What WCAG 2.2 AA conformance actually requires: all 55 Level A and AA success criteria in one checklist grouped by POUR principle, why AA is the legal standard worldwide, and how to verify conformance.
WCAG 2.2 AA
Checklist
Conformance
Legal Standard
Beginner
12 min
WCAG 2.1 vs 2.2: What Changed
Every difference between WCAG 2.1 and 2.2: the 9 new success criteria, the removal of 4.1.1 Parsing, a side-by-side comparison table, the legal context, and a practical migration plan from 2.1 AA to 2.2 AA.
WCAG 2.2
New Criteria
Migration
Comparison
Intermediate
14 min
VPAT & Accessibility Conformance Reports
The procurement document demystified: VPAT versus ACR, the four editions and who asks for each, how to read one before you buy, how to produce one that survives scrutiny, and why European buyers now ask for the EN 301 549 edition.
VPAT
ACR
Procurement
EN 301 549
Testing & Auditing
4Audit any site and pick the right tools, from automated scanners to hands-on manual review.
Beginner
15 min
How to Audit a Website for Accessibility
A nine-step process for performing a WCAG 2.2 Level AA audit on any website. Combines automated scanning, keyboard testing, screen reader review, and AI-assisted remediation, with a copy-ready checklist.
WCAG Audit
Testing
Remediation
Checklist
Beginner
12 min
AI Accessibility Audit
How AI-assisted audits compare to manual audits and automated scanners. Use cases for developers, QA, and compliance teams, plus a side-by-side breakdown of cost, speed, and coverage.
AI Audit
WCAG
Automation
Workflow
Beginner
20 min
Automated vs Manual Accessibility Testing
What automated scanners actually catch, what only manual testing finds, and how to combine both into a workflow that holds up in an audit.
Automated Testing
Manual Testing
CI
Workflow
Beginner
15 min
axe vs WAVE: Testing Tools Compared
A factual comparison of the two most popular accessibility testing tools — strengths, workflows, pricing, and when to use each (or both).
axe
WAVE
Tool Comparison
Testing
Screen Reader Testing
5Test with the screen readers real users run — NVDA, JAWS, VoiceOver, and TalkBack.
Intermediate
35 min
Screen Reader Testing Guide
A practical guide to testing your websites and applications with the most popular screen readers. Covers NVDA and JAWS on Windows, VoiceOver on macOS and iOS, and TalkBack on Android with step-by-step workflows.
NVDA
JAWS
VoiceOver
TalkBack
Intermediate
18 min
NVDA Screen Reader Testing Guide
The complete guide to testing with NVDA, the free Windows screen reader: install and configure it, master browse vs focus mode, use the NVDA modifier key and Elements List, and run a repeatable testing workflow with a full keyboard command cheat sheet — mapped to WCAG 2.2 AA.
NVDA
Browse Mode
Focus Mode
Cheat Sheet
Intermediate
18 min
JAWS Screen Reader Testing Guide
The complete guide to testing with JAWS, the most widely used Windows screen reader: install it in demo mode, master the JAWS key, the Virtual Cursor and Forms Mode, quick navigation keys, and run a repeatable testing workflow with a full command cheat sheet — mapped to WCAG 2.2 AA.
JAWS
Virtual Cursor
Forms Mode
Cheat Sheet
Intermediate
18 min
VoiceOver Screen Reader Testing Guide
The complete guide to testing with VoiceOver, Apple's built-in screen reader on macOS and iOS: turn it on, master the VO keys and the Rotor, use iPhone gestures, and run a repeatable testing workflow with full macOS and iOS command cheat sheets — mapped to WCAG 2.2 AA.
VoiceOver
macOS
iOS
Rotor
Intermediate
18 min
TalkBack Screen Reader Testing Guide
The complete guide to testing with TalkBack, Android's built-in screen reader: turn it on, master explore by touch, swipe navigation, reading controls, and multi-finger gestures, and run a repeatable mobile testing workflow — mapped to WCAG 2.2 AA including Target Size and Pointer Gestures.
TalkBack
Android
Explore by Touch
Reading Controls
Forms, Keyboard & Focus
8The semantic structure and core interaction layer every accessible interface depends on.
Intermediate
22 min
Accessible Forms Guide
Build forms everyone can complete. Labels, required fields, inline validation, accessible error messages tied with aria-describedby, fieldset grouping, autocomplete, and multi-step patterns — mapped to WCAG 2.2 AA with copy-ready code.
Labels
Validation
Error Messages
WCAG 3.3.x
Intermediate
24 min
Accessible Form Validation & Error Handling
Error handling is where forms fail. Learn when to validate (submit vs blur vs keystroke), tying an error to its field with aria-invalid and aria-describedby, the error-summary pattern with focus management, announcing errors through live regions without double-speaking, error suggestion and prevention, and WCAG 2.2's Redundant Entry and Accessible Authentication — mapped to WCAG 3.3.1 through 3.3.9.
When to validate
aria-invalid
Error summary
Redundant Entry
Intermediate
30 min
Complete Keyboard Accessibility Guide
Master keyboard accessibility from fundamentals to advanced patterns. Learn focus management, skip navigation links, roving tabindex, and how to identify and fix keyboard traps with hands-on interactive demos.
Focus Management
Skip Links
Roving Tabindex
Keyboard Traps
Intermediate
24 min
Focus Management Guide
The complete guide to managing keyboard focus: tabindex, :focus-visible, moving focus programmatically, focus traps, restoration, roving tabindex, skip links, and route-change focus — mapped to WCAG 2.2 (2.4.3, 2.4.7, 2.4.11) with copy-ready code.
tabindex
:focus-visible
Focus Traps
Roving Tabindex
Beginner
18 min
Skip Links & Bypass Blocks Guide
Build a skip link that actually works: the first-focusable HTML, the visually-hidden-until-focused CSS, and the number one bug where the page scrolls but focus never moves because the target is not focusable. Plus landmarks and headings as the real bypass for screen reader users, multiple skip links, and skip links in single-page apps and React, mapped to WCAG 2.4.1.
Skip Links
Bypass Blocks
tabindex -1
Landmarks
Beginner
20 min
ARIA Landmarks & Page Structure Guide
The two maps a screen reader user navigates by: landmarks and headings. Covers the eight landmark roles and the HTML that provides them, the scoping rule almost everyone misses (header and footer are only landmarks at the top level), the section trap where a section is not a landmark until you name it, one main and naming repeated regions, the heading map and the HTML5 outline myth, and how real screen readers jump around by structure, mapped to WCAG 1.3.1.
ARIA Landmarks
Semantic HTML
Page Structure
Heading Levels
Beginner
16 min
Accessible Breadcrumb Navigation Guide
A breadcrumb answers to two audiences at once: screen reader users through ARIA, and search engines through BreadcrumbList structured data. Covers the semantic markup (a named nav landmark wrapping an ordered list), marking the current page with aria-current, hiding the separators from assistive technology, keeping the visible trail and the structured data in sync, and truncating long trails on mobile without breaking either, mapped to WCAG 2.4.8.
Breadcrumbs
aria-current
BreadcrumbList Schema
nav aria-label
Beginner
18 min
Accessible Pagination Guide
Pagination is navigation, not a widget: a named nav landmark wrapping a list of controls. Covers giving each control a name that says what it does so "Go to page 3" replaces a bare "3", marking the current page with aria-current, choosing links or buttons on purpose, the Previous and Next disabled-state trap, hiding the ellipsis while keeping pages reachable, and announcing the change in single-page apps, with the Load More and infinite-scroll alternatives, mapped to WCAG 2.4.4.
Pagination
aria-current
Link vs Button
Load More
ARIA Component Patterns
13Start with the rules of ARIA, then build the WAI-ARIA Authoring Practices components correctly, with copy-ready HTML, JavaScript, and React.
Intermediate
24 min
How to Use ARIA: Roles, States & Properties
ARIA changes what a screen reader announces and nothing else, so a wrong attribute makes your interface lie to assistive technology. The cornerstone guide to using ARIA correctly: the five rules of ARIA, when native HTML wins, roles vs states vs properties, accessible names (aria-label vs aria-labelledby vs aria-describedby), landmark roles, the aria-hidden traps that break keyboard users, live regions, and the most common ARIA mistakes. Mapped to WCAG 2.2.
Five rules of ARIA
Roles, states, properties
aria-label vs labelledby
aria-hidden
Intermediate
18 min
Accessible Tabs Guide
Build tabs the right way with the WAI-ARIA Tabs pattern: the tablist, tab, and tabpanel roles, aria-selected and aria-controls, roving tabindex, arrow-key navigation, automatic vs manual activation, and vertical tabs — with copy-ready HTML, JavaScript, and React mapped to WCAG 2.2.
ARIA Tabs
tablist / tabpanel
Roving Tabindex
aria-selected
Intermediate
16 min
Accessible Accordion & Disclosure Guide
Build accordions and disclosure widgets the right way: the aria-expanded state, the button-in-heading structure, aria-controls, the native details and summary element, single vs multi-expand, and the keyboard model — with copy-ready HTML, JavaScript, and React mapped to WCAG 2.2.
ARIA Disclosure
aria-expanded
details / summary
Heading Structure
Advanced
20 min
Accessible Combobox & Autocomplete Guide
Build autocomplete the right way with the WAI-ARIA Combobox pattern: role=combobox on the input, aria-expanded, aria-autocomplete, and the aria-activedescendant focus model that keeps focus in the field while arrow keys move a virtual highlight — with copy-ready HTML, JavaScript, and React mapped to WCAG 2.2.
ARIA Combobox
aria-activedescendant
aria-autocomplete
Listbox
Advanced
20 min
Accessible Menu & Menu Button Guide
Most dropdowns should not use role=menu at all. Learn when the WAI-ARIA Menu pattern applies, how to build a menu button with aria-haspopup and roving tabindex, how menuitemcheckbox and menuitemradio work, and the disclosure pattern your navigation dropdown should use instead.
ARIA Menu
aria-haspopup
Roving tabindex
Menu Button
Advanced
20 min
Accessible Dialog & Modal Guide
The hand-rolled focus trap is obsolete. Learn the native <dialog> element and showModal(), where initial focus really belongs (not the close button), focus restoration when the trigger is gone, the inert top layer, alertdialog, zero-JavaScript dialogs with commandfor, and scroll locking at 400% zoom.
HTML dialog
showModal
Focus trap
inert
Intermediate
18 min
Accessible Switch & Toggle Guide
A toggle switch is not a checkbox. Learn when a switch is the right control and when a checkbox is, the native input type=checkbox role=switch path that needs almost no JavaScript, why the accessible name must stay fixed as the state moves, non-text contrast for the track and thumb, immediate-effect semantics, and React.
role=switch
aria-checked
Switch vs checkbox
Non-text contrast
Advanced
22 min
Accessible Slider & Range Input Guide
A slider is a value, not two states. Learn the native input type=range that gives you role=slider, keyboard, and click-to-set for free, the full arrow / Home / End / Page keyboard contract, aria-valuenow and the aria-valuetext that turns "2" into "Medium", the 2.5.7 dragging-alternative rule, and dual-thumb range sliders.
role=slider
aria-valuenow
aria-valuetext
Dragging Movements
Advanced
22 min
Accessible Tree View Guide
A tree view browses and selects nodes in a hierarchy. Learn the role=tree / treeitem / group structure, the roving-tabindex focus model, the context-sensitive Right and Left arrows that expand, collapse, and move between parent and child, aria-expanded, aria-selected, aria-level / setsize / posinset, single vs multi-select, and when a nested list of links is the better choice.
role=tree
treeitem
Roving tabindex
aria-expanded
Advanced
24 min
Accessible Data Grid Guide
A data grid is a table the user operates, not one they read. Learn the role=grid / row / gridcell structure built on a real <table>, two-dimensional arrow-key navigation, roving tabindex, the two focus modes (Enter to enter a cell, Escape to leave), editable cells, selection, and aria-rowcount / rowindex / colindex for virtualized grids — plus when a plain semantic table is the better choice.
role=grid
gridcell
2-D navigation
Actionable mode
Advanced
20 min
Accessible Listbox Guide
A listbox lets a user pick from a set of choices — one, or several. Learn the role=listbox / option / group structure, single-select where selection follows focus, multi-select with aria-multiselectable and Space to toggle, aria-selected, the roving-tabindex vs aria-activedescendant focus choice, grouped and disabled options, type-ahead — and when a group of checkboxes or a native select is the better choice.
role=listbox
option
aria-selected
Multi-select
Intermediate
18 min
Accessible Tooltip & Toggletip Guide
A tooltip and a toggletip look alike but are two different patterns, and choosing wrong is the most common hover-help bug. Learn the fork: a tooltip is a supplement wired with aria-describedby that shows on hover and focus and holds only plain text, while a toggletip is a button plus a live region that reveals requested information. Covers role=tooltip, why the title attribute is not a tooltip, the rule that a tooltip can never hold a link or button, naming an icon-only control, touch and reflow, mapped to WCAG 1.4.13.
role=tooltip
Toggletip
aria-describedby
1.4.13
Intermediate
20 min
Accessible Notifications & Toasts Guide
A toast asks a screen reader user to hear a message and act on it before it disappears, and those demands pull against each other. Learn the two questions that pick the pattern, the live region that must exist before the message, the role=status versus role=alert politeness fork, why auto-dismiss collides with WCAG 2.2.1, why a toast never steals focus, stacking without flooding, and status that never rides on color alone. Copy-ready HTML, JavaScript, and React mapped to WCAG 4.1.3.
role=status
role=alert
aria-live
Auto-dismiss
Frameworks & Platforms
6Framework-specific accessibility for React, Angular, Vue, Svelte, native mobile, and AI-powered chat features.
Intermediate
20 min
React Accessibility Guide
Build accessible React apps: semantic JSX, focus management on route changes, accessible modals, ARIA in JSX, live-region announcements, forms with useId, and a testing workflow with eslint-plugin-jsx-a11y, jest-axe, and Playwright — mapped to WCAG 2.2 AA.
React
Focus Management
ARIA in JSX
useId
Intermediate
20 min
Angular Accessibility Guide
Build accessible Angular apps: semantic templates, ARIA binding with [attr.aria-*], focus management on router navigation, dialogs with cdkTrapFocus, LiveAnnouncer for dynamic updates, accessible reactive forms, and testing with @angular-eslint, jasmine-axe, and Playwright — mapped to WCAG 2.2 AA.
Angular
CDK a11y
[attr.aria-*]
Router Focus
Intermediate
20 min
Vue Accessibility Guide
Build accessible Vue 3 apps: semantic templates, reactive :aria-* binding, focus on Vue Router navigation, dialogs with Teleport, live regions that actually announce, the $attrs fallthrough fix, accessible forms, and testing with eslint-plugin-vuejs-accessibility and vitest-axe — mapped to WCAG 2.2 AA.
Vue 3
:aria-*
$attrs
Teleport
Intermediate
22 min
Svelte Accessibility Guide
Build accessible Svelte 5 and SvelteKit apps: the compiler's built-in a11y warnings, reactive ARIA with runes, focus traps packaged as use: actions, SvelteKit route announcements and focus, live regions that announce, accessible forms, and testing with svelte-check and vitest-axe — mapped to WCAG 2.2 AA.
Svelte 5
a11y warnings
use: actions
SvelteKit
Intermediate
24 min
Mobile Accessibility Guide
Build accessible mobile apps and mobile web: touch target sizing, pointer gestures and cancellation, orientation and text scaling, native iOS (UIKit & SwiftUI), native Android (View & Jetpack Compose), mobile web, and VoiceOver + TalkBack testing — mapped to WCAG 2.2 AA and WCAG2ICT.
iOS
Android
Touch Targets
SwiftUI
Intermediate
22 min
Accessible AI Chat Interfaces & Conversational UI
Build accessible AI chat and chatbot interfaces: announce streaming responses without flooding the screen reader, structure the message log, keep focus in the composer, make Send, Stop, and per-message actions keyboard-operable, and render AI output as semantic HTML. Mapped to WCAG 2.2 with copy-ready React.
AI Chat
Streaming
Live Regions
WCAG 4.1.3
Design, Content & Media
10Color, typography, plain language, data visualization, data tables, media, and documents that work for everyone.
Beginner
20 min
Accessible Color Palette Guide
Create WCAG-aware color systems for real UI states. Learn how to test buttons, cards, forms, alerts, links, charts, focus rings, disabled states, hover states, and dark mode before colors enter your design system.
WCAG Contrast
Design Tokens
Dark Mode
UI States
Advanced
12 min
OKLCH + APCA Color Systems
The complete deep-dive on building accessible color systems with OKLCH perceptual lightness, 11-stop scales, APCA grading, color-blindness simulation, and design-token exports to Tailwind, Figma, iOS, and Android.
OKLCH
APCA
WCAG 3
Design Tokens
Advanced
13 min
Accessible Typography (WCAG 2.2 + 3)
Build typography systems that meet WCAG 2.2: modular type scales, fluid clamp() sizing, the 1.4.12 text-spacing override test, dyslexia & cognitive research, Flesch-Kincaid scoring, and token exports for every platform.
Modular scale
WCAG 1.4.12
Fluid typography
Dyslexia
Intermediate
26 min
Cognitive Accessibility & Plain Language
Design for the largest and most varied group of disabled users, and the one checkers help least. Plain language and reading level, scannable structure, consistent navigation and help, less reliance on memory, and forgiving forms, mapped to the WCAG 2.2 cognitive criteria (3.2.6 Consistent Help, 3.3.7 Redundant Entry, 3.3.8 Accessible Authentication) and the W3C COGA guidance.
Plain language
Reading level
Consistent Help 3.2.6
Redundant Entry 3.3.7
Intermediate
22 min
Accessible Charts & Data Visualization
A chart is a picture of data — the accessible version is the data itself, as text. Learn the data table that is the real text alternative, choosing SVG vs canvas vs images, labelling an SVG with role=img and aria-labelledby, never coding a series by color alone, keeping axis labels as scalable text, keyboard-navigable interactive charts and hover-or-focus tooltips, and what charting libraries actually give you.
Data table alternative
SVG role=img
Color not alone
1.4.13 tooltips
Intermediate
22 min
Accessible Data Tables
A data table is accessible when the markup says which cell is a header for which data. Learn the semantic table, caption, and th scope structure, when to use scope vs the headers and id method for complex tables, responsive tables that survive 320px, sortable tables with aria-sort and named row controls, and when a plain table beats an ARIA grid — with copy-ready HTML mapped to WCAG 2.2.
th scope
caption
headers/id
aria-sort
Intermediate
22 min
Accessible Email HTML
Email clients force you into the nested-table, inline-CSS layouts the web abandoned, so email accessibility is about making that table soup read as a linear document. Learn role="presentation" on layout tables, real semantic content inside them, the lang attribute templates forget, alt text that survives blocked images, bulletproof accessible buttons, single-column reflow, dark-mode contrast, and how to test an email with a screen reader, with copy-ready HTML mapped to WCAG 2.2.
role=presentation
Alt text
Bulletproof buttons
lang attribute
Intermediate
24 min
Accessible Maps & Geospatial Content
An interactive map is a picture of spatial data, so the accessible version is usually the same information delivered as text and controls, not the pixels. Learn how to decide what job the map is doing, build the map-plus-list pattern where the list is the source of truth, add titles to embedded maps, make markers and pan and zoom controls keyboard operable, provide a single-pointer alternative to dragging, write alt text for static maps, and make choropleth data maps accessible as charts, with copy-ready HTML mapped to WCAG 2.2.
Map + list pattern
iframe title
Keyboard pan/zoom
Marker names
Intermediate
24 min
Accessible Video & Media Players
Accessible media is a stack of parallel alternatives: captions turn the audio into text, audio description turns the picture into sound, and a transcript covers everyone. Learn which alternatives your media owes (prerecorded vs live, audio vs picture), captions vs subtitles, WebVTT and the <track> element, when audio description is required, keyboard-operable players that never autoplay sound, embedded YouTube/Vimeo, and React.
Captions vs subtitles
Transcripts
Audio description
WebVTT & track
Intermediate
25 min
How to Make PDFs Accessible
Complete guide to accessible PDFs — tags, headings, reading order, alt text, and PDF/UA conformance, plus how to test documents before you publish them.
Tagged PDF
PDF/UA
Reading Order
Testing
Law & Litigation
7The lawsuits, settlements, and compliance deadlines shaping web accessibility in 2026.
Beginner
10 min
Fashion Nova's $5.15M Accessibility Settlement
A case study of Alcazar v. Fashion Nova — the second-largest web accessibility settlement on record. The ADA and California Unruh Act claims, the class structure, WCAG 2.1 remediation terms, and what every online retailer should learn from it.
Case Study
Unruh Act
E-Commerce
Settlements
Beginner
10 min
How Much Does an ADA Website Lawsuit Cost?
A data-backed breakdown of what a web accessibility lawsuit really costs in 2026 — from $1K demand letters to a $5.15M class action — what drives the number up or down, and why proactive remediation is almost always the cheaper path.
Settlement Costs
ADA
Risk
ROI
Beginner
12 min
How Much Does a Web Accessibility Audit Cost?
The honest buying guide: attributed market ranges, why quotes vary so wildly, the structural factors that actually drive price, why an automated scan is a different product, and the UK and Ireland legal drivers behind the spend.
Audit Pricing
UK & Ireland
Scoping
Buying
Beginner
14 min
How to Write an Accessibility Statement
Three legal regimes, one page: the mandatory PSBAR model for UK public bodies, the EU model statement for the public sector, and the EAA information duty for private companies. What every good statement contains and the mistakes that create risk.
Statements
PSBAR
EAA
Templates
Beginner
10 min
How AI Is Fueling ADA Website Lawsuits in 2026
Generative AI and automated scanners have collapsed the cost of filing a web accessibility lawsuit. Why ~40% of 2025's federal cases were pro se, why 2026 is projected to top 5,500 filings, and how to protect your site from AI-assisted plaintiffs.
AI
Litigation Trends
Pro Se
2026
Intermediate
12 min
DOJ Title II Deadline Extension
Editorial analysis of the April 20, 2026 DOJ Interim Final Rule that pushed Title II web compliance to 2027 and 2028. What changed, what didn't, and why public entities should treat April 2026 as the real deadline.
ADA Title II
WCAG 2.1 AA
Public Sector
Editorial
Intermediate
13 min
Section 504 Web Accessibility Deadline
The HHS Section 504 web rule took effect May 11, 2026 — and was not extended. Who's covered, what WCAG 2.1 AA requires for healthcare entities, and a six-step recovery plan if you missed the deadline.
Section 504
Healthcare
HHS
WCAG 2.1 AA
Accessibility Overlays
3Why accessibility overlay widgets fall short, and what to do instead.
Beginner
20 min
Accessibility Overlays: Why They Fail
An evidence-based look at accessibility overlay widgets — what they can and cannot fix, the lawsuit data on overlay-equipped sites, and what to do instead.
Overlays
Widgets
Lawsuit Risk
Remediation
Beginner
20 min
Accessibility Overlay Alternatives
Real alternatives to overlay widgets ranked by effort and impact — remediation, automated testing in CI, professional audits, and training, with a cost comparison.
Overlays
Remediation
Cost Comparison
Migration
Beginner
11 min
Do Overlays Meet the EAA and UK Law?
The legal answer on accessibility overlays in Europe: why a widget does not change WCAG conformance, what the European Disability Forum reports, the obligation-of-result principle, and the litigation data on sued overlay customers.
Overlays
EAA
Equality Act
Legal
Essential Accessibility Resources
Comprehensive tools, checklists, and guides to help you create inclusive digital experiences