HTML Academy · Lesson

Pa11y and axe for Accessibility Testing

Automate accessibility checks with pa11y and axe-core.

Pa11y and axe for Accessibility Testing is a free HTML Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Automated Accessibility Tools

Pa11y and axe-core are open-source tools that automate WCAG-aligned accessibility testing. Both parse a page, run rules against the DOM, and report violations. Catch the bulk of accessibility issues automatically; reserve manual testing for the rest.

axe-core: The Library

axe-core is a JavaScript library that powers the accessibility audits in Chrome DevTools, Lighthouse, Jest, Cypress, Playwright and many other tools. It is the de facto standard for automated accessibility testing — broad rule coverage, low false-positive rate.

axe Browser Extension

The axe DevTools browser extension (Chrome, Firefox, Edge) adds an "Accessibility" tab to DevTools. Click "Scan all pages" and it lists every violation with affected elements, severity, and remediation guidance. Best for one-off audits during development.

Pa11y CLI

Pa11y is a Node.js CLI: npx pa11y https://example.com audits a URL. Outputs a list of issues to the terminal. Use for quick audits, in shell scripts, or for low-overhead CI integration.

npx pa11y https://example.com
# or for multiple pages
npx pa11y-ci --sitemap https://example.com/sitemap.xml

axe Playwright Integration

Combine axe-core with Playwright for end-to-end accessibility testing: const results = await new AxeBuilder({ page }).analyze(). Assert that results.violations.length === 0. Catches regressions before they reach production.

import { test, expect } from "@playwright/test";
import AxeBuilder from "@axe-core/playwright";

test("home page accessibility", async ({ page }) => {
  await page.goto("/");
  const results = await new AxeBuilder({ page }).analyze();
  expect(results.violations).toEqual([]);
});

Jest-axe for Components

jest-axe runs axe against rendered components in Jest tests. Render the component with React Testing Library, pass the container to axe: expect(await axe(container)).toHaveNoViolations(). Each component test now includes an accessibility check.

Rule Configuration

Both tools let you disable or modify rules per project: turn off rules that conflict with intentional design decisions, increase strictness for known-critical rules. Document every disabled rule with a comment explaining why — context that future developers need.

Limitations of Automation

Automated tools catch ~30-40% of WCAG issues. The rest (meaningful focus order, readable alt text, semantic heading hierarchy, ARIA usage that reflects actual UI behavior) requires human review. Automation is necessary but not sufficient for accessibility.

Real Assistive Tech Testing

Test with NVDA on Windows, VoiceOver on Mac, JAWS for enterprise audiences. Real screen reader testing reveals issues automation cannot — confusing announcements, broken landmarks, illogical focus order. Once per release on each major SR is a reasonable baseline.

User Testing

The most valuable accessibility validation comes from disabled users using the actual product. Recruit through accessibility consultancies, university disability services, or testing platforms like UserTesting.com. Their real-world feedback catches issues no automated tool surfaces.

CI Integration Strategy

Block PRs on accessibility regressions (new violations) but not on legacy violations (existing baseline). This keeps the bar moving up without blocking shipping. Track total violation count over time as a leading indicator of overall accessibility health.

Combining Tools

Use multiple tools: axe for the comprehensive automated check, Pa11y as a second opinion, manual screen reader testing for the qualitative gap. The overlap is small; together they cover more issues than any single tool can find.

Knowledge Check

What percentage of WCAG accessibility issues can be reliably caught by automated tools like axe and Pa11y?

Summary

axe-core powers most accessibility audits; the browser extension is great for one-off checks, jest-axe and Playwright integrations for continuous testing. Pa11y is a complementary CLI. Automation catches ~30-40% of issues; pair with manual screen reader testing (NVDA, VoiceOver) and real disabled-user testing for full coverage. Block new regressions in CI without blocking on legacy baseline.

Frequently asked questions

Is the “Pa11y and axe for Accessibility Testing” lesson free?

Yes — the full text of “Pa11y and axe for Accessibility Testing” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.

What will I learn in “Pa11y and axe for Accessibility Testing”?

Automate accessibility checks with pa11y and axe-core. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start HTML Academy?

No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Pa11y and axe for Accessibility Testing” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this HTML Academy lesson?

Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to HTML Academy