// 14 guides · the why behind the patterns
Accessibility Guides
Practical walkthroughs of WCAG criteria, testing methods, and accessibility concepts. Written for developers who want to understand the reasoning, not just follow a checklist.
All guides
-
The Best Automated Accessibility Testing Tools, Compared
A practical comparison of automated accessibility testing tools — axe-core, Pa11y, Lighthouse, WAVE, IBM Equal Access, and test-framework integrations. What each does, how they overlap, and the stack to standardize on.
-
Accessible Authentication: WCAG 3.3.8 and Passwordless Login
WCAG 3.3.8 accessible authentication: cognitive function tests, supporting password managers and paste, autocomplete attributes, passkeys and magic links, and CAPTCHA accessibility.
-
Accessible Links: Text, Purpose, and Common Mistakes
Writing link text that makes sense out of context (WCAG 2.4.4), links versus buttons, warning about new tabs and downloads, naming icon-only links, and making links look like links.
-
Accessible Media: Captions, Transcripts, and Audio Description
Who needs captions, transcripts, and audio description, what the WCAG 1.2 media criteria require, captions vs subtitles, and adding captions with the HTML track element and WebVTT.
-
Accessible Forms in React: Labels, Errors, and useId
Accessible React forms: label association with useId, controlled inputs, announcing validation errors with aria-live and aria-describedby, grouping controls, and submission feedback.
-
Accessible Motion and Animation: prefers-reduced-motion and WCAG
Who motion affects, what WCAG requires (pause/stop/hide, no flashing, animation from interactions), and honoring prefers-reduced-motion in CSS and JavaScript.
-
Accessibility Testing with Playwright and axe-core
Automated accessibility testing in Playwright with @axe-core/playwright — setup, the AxeBuilder API, scoping scans, testing open dialogs and interactive states, a reusable fixture, and CI.
-
React Accessibility: Building Inclusive Components
The React accessibility hub: JSX attribute differences, semantic JSX, managing focus and dynamic announcements, portals for modals, and the React a11y toolchain — with deep dives on focus and forms.
-
Focus Management in React: Refs, Effects, and Route Changes
React-specific focus patterns: moving focus with refs and useEffect, focus on client-side route changes, trapping focus in modals, and restoring it on close.
-
Target Size: Accessible Touch Targets and WCAG 2.5.8
WCAG 2.5.8, the 24x24 CSS pixel Level AA minimum new in WCAG 2.2, its exceptions, the AAA 44px enhanced bar, and how to size and space touch targets in CSS.
-
Pa11y CI Setup: Automated Accessibility Testing in Your Pipeline
Step-by-step Pa11y CI setup for automated accessibility testing: install, config file, sitemap scanning, GitHub Actions, thresholds, and Pa11y Dashboard.
-
Form Labeling: Deep Dive
A complete guide to form labeling: native
<label>, fieldset and legend, ARIA labeling attributes, hidden labels, placeholder pitfalls, and required/error indicators. -
Headings & Landmarks: Page Structure
Master heading hierarchy and HTML5 landmarks. How screen reader users navigate by structure, the rules that keep your page scannable, and the markup that makes content discoverable.
-
Alt Text & Accessible Images
How to write alt text for informative, decorative, and functional images. Covers SVGs, icons, emojis, complex charts, images of text, and generative AI caveats.
-
Live Regions: Deep Dive
How ARIA live regions announce dynamic changes to screen readers. Covers polite vs assertive, role=alert vs role=status, screen reader quirks, and debugging checklist.
-
Automated Accessibility Testing: Tools, CI/CD, and What to Test
Tools and strategies for automated a11y testing. axe-core, Pa11y, Lighthouse, CI/CD integration, and what automated tests can and can't catch.
-
Focus Management Patterns for Accessible Web Apps
How to manage keyboard focus in web applications. Covers focus trapping, restoration, roving tabindex, programmatic focus, and focus indicators.
-
Accessibility for Single Page Applications (SPAs)
SPA-specific accessibility challenges: route change announcements, focus management on navigation, dynamic content updates, and framework-specific solutions.
-
WCAG 3.0: What Developers Need to Know
An overview of the next generation of accessibility guidelines. Bronze/Silver/Gold conformance, APCA contrast, cognitive accessibility, and how to prepare.
-
ARIA: When to Use It, When to Avoid It, and How to Get It Right
A decision framework for ARIA usage. The five rules of ARIA, common mistakes, and how to know when native HTML is enough and when ARIA is the right choice.
-
Color and Contrast: Beyond the Ratio
Contrast requirements for text and non-text elements, tools for checking ratios, dark mode considerations, and solving color-only information problems.
-
Keyboard Accessibility Testing: A Developer's Walkthrough
How to test your site with keyboard only. Covers the essential keys, common failure patterns, focus order debugging, and step-by-step testing procedure.
-
Screen Reader Testing for Developers: Getting Started
An introduction to testing with NVDA, JAWS, and VoiceOver. Setup, essential commands, what to listen for, and a systematic testing workflow.
-
Semantic HTML: Choosing the Right Elements
Which HTML elements to use when, how landmarks and heading hierarchy create navigable page structure, and why semantic HTML is the foundation of accessibility.
-
Getting Started with WCAG 2.2: What Developers Need to Know
What developers need to know about the Web Content Accessibility Guidelines. Covers the 4 principles, 3 conformance levels, and all 9 new success criteria in plain language.