Add Automated Accessibility Tests to Catch Regressions Early

Fixing accessibility issues is only half the job — without automated tests, regressions slip back in silently. Ask Claude to add accessibility test coverage while it's already working on your components.

claude "Add jest-axe accessibility tests to every component in src/components/. Each test should render the component in its default state and assert no WCAG violations."

Claude generates tests like this for each component:

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

expect.extend(toHaveNoViolations);

describe('Button accessibility', () => {
  it('has no WCAG violations in default state', async () => {
    const { container } = render(<Button>Submit</Button>);
    expect(await axe(container)).toHaveNoViolations();
  });

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

For end-to-end coverage, ask Claude to add Playwright accessibility scans to your critical user flows:

claude "Add Playwright axe accessibility checks to the checkout flow in tests/e2e/checkout.spec.ts. Scan each page in the flow and fail on any WCAG AA violation."

import AxeBuilder from '@axe-core/playwright';

test('checkout flow has no accessibility violations', async ({ page }) => {
  await page.goto('/checkout');
  const results = await new AxeBuilder({ page }).analyze();
  expect(results.violations).toEqual([]);
});

Ask Claude to install the required packages and add the configuration at the same time, so you go from zero to passing tests in one session.

Accessibility tests in CI mean violations get caught in code review, not in user complaints.