a11y-testing

name	a11y-testing
description	Automated accessibility testing with axe-core, Playwright, and jest-axe for WCAG compliance. Use when adding or validating a11y tests, running WCAG checks, or auditing UI accessibility.
context	fork
agent	test-generator
version	1.1.0
tags	["accessibility","testing","axe-core","playwright","wcag","a11y","jest-axe"]
allowed-tools	["Read","Write","Bash","Grep","Glob"]
author	SkillForge
user-invocable	false

Accessibility Testing

Automated accessibility testing with axe-core for WCAG 2.2 compliance. Catches 30-50% of issues automatically.

Overview

• Implementing CI/CD accessibility gates
• Running pre-release compliance audits
• Testing component accessibility in unit tests
• Validating page-level accessibility with E2E tests
• Ensuring keyboard navigation works correctly

Quick Reference

jest-axe Unit Testing

// jest.setup.ts
import { toHaveNoViolations } from 'jest-axe';
expect.extend(toHaveNoViolations);

// Button.test.tsx
import { render } from '@testing-library/react';
import { axe } from 'jest-axe';

it('has no a11y violations', async () => {
  const { container } = render(<Button>Click me</Button>);
  expect(await axe(container)).toHaveNoViolations();
});

Playwright + axe-core E2E

// e2e/accessibility.spec.ts
import { test, expect } from "@playwright/test";
import AxeBuilder from "@axe-core/playwright";

test("page has no a11y violations", async ({ page }) => {
  await page.();
   results =   ({ page })
    .([, , ])
    .();
  (results.).([]);
});

(,  ({ page }) => {
   page.();
   page.();
   page.();

   results =   ({ page })
    .()
    .([, ])
    .();
  (results.).([]);
});