Automate Accessibility Testing with Axe

Accessibility Testing Expert with Axe is a skill that packages axe-core accessibility-testing knowledge and implementation patterns: WCAG-guideline expertise, ready-to-adapt axe-core setups for multiple frameworks, CI/CD integration, and a workflow for triaging and fixing violations once they're found.

Use it when setting up or extending automated accessibility testing - wiring axe-core into Playwright, Jest/jsdom with Testing Library, Selenium WebDriver, Storybook, or a GitHub Actions pipeline, or when deciding how to triage and remediate a batch of WCAG violations. It's not a manual accessibility audit or a substitute for real assistive-technology testing - the skill's own core principle is to combine automated axe tests with manual testing, not replace it, and it targets WCAG 2.1 AA as a baseline, not a full manual conformance review.

Input is a description of the testing target and stack - a page, component, or CI pipeline, and the framework in use. Output is runnable configuration and test code: a Playwright or Selenium accessibility test, a Jest/jest-axe component test, a custom axe rule configuration (enabling or disabling specific checks, setting WCAG tag scope), a GitHub Actions workflow that runs the suite and uploads a report on failure, a CI reporter that formats violations and decides whether to fail the build on critical or serious impact, and a Storybook test-runner integration that checks every story. It also includes a five-step remediation workflow: prioritize by severity, document legitimate exceptions, create remediation tickets, verify fixes, and monitor for regressions. For large applications it can scope a run to only essential WCAG AA rules, exclude known third-party widgets or iframes, and limit scanning to a specific data-testid region instead of a whole page, and it covers testing dynamic content such as a modal after it opens - waiting for the role="dialog" element, scanning just that region, and asserting that focus landed on the expected close button.

Covers axe-core wiring for Playwright (@axe-core/playwright), Jest/jsdom via jest-axe and Testing Library, Python Selenium WebDriver via axe-selenium-python, Storybook's test-runner via axe-playwright, and GitHub Actions for CI:

test('homepage accessibility', async ({ page }) => {
  await page.goto('https://example.com');
  
  const accessibilityScanResults = await new AxeBuilder({ page })
    .withTags(['wcag2a', 'wcag2aa', 'wcag21aa'])
    .analyze();
  
  expect(accessibilityScanResults.violations).toEqual([]);
});

Frontend engineers and QA teams adopting a shift-left approach to accessibility - catching WCAG violations in CI and component tests before they reach production, and needing a consistent way to configure rule exceptions and report on violations across a component library or CI pipeline.