Accessibility Test Setup

Set up automated accessibility testing

Set up automated accessibility testing in CI/CD.

Instructions

1. Install tools:

npm install -D @axe-core/playwright  # Playwright + axe
# or
npm install -D jest-axe              # Jest + axe

2. Playwright + axe-core:

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

test('homepage has no accessibility violations', async ({ page }) => {
  await page.goto('/');
  const results = await new AxeBuilder({ page })
    .withTags(['wcag2a', 'wcag2aa', 'wcag21aa'])
    .analyze();

  expect(results.violations).toEqual([]);
});

3. Jest + React Testing Library:

import { render } from '@testing-library/react';
import { axe, toHaveNoViolations } from 'jest-axe';
expect.extend(toHaveNoViolations);

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

4. Add to CI pipeline:

- name: Accessibility tests
  run: npx playwright test --grep @a11y

WCAG Levels to Test

• A: minimum (images have alt text, form labels exist)
• AA: standard (color contrast 4.5:1, resize to 200%)
• AAA: enhanced (contrast 7:1, no time limits)