CI/CD Accessibility Testing 2026: Automate WCAG in Your Pipeline

npm install --save-dev @playwright/test @axe-core/playwright

accessibility.spec.ts

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

const pagesToTest = [
  '/',
  '/about',
  '/contact',
  '/products',
];

for (const path of pagesToTest) {
  test(`${path} has no WCAG violations`, async ({ page }) => {
    await page.goto(`http://localhost:3000${path}`);

    const results = await new AxeBuilder({ page })
      .withTags(['wcag2a', 'wcag2aa', 'wcag21aa'])
      .analyze();

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

.github/workflows/accessibility.yml

name: Accessibility Testing

on:
  pull_request:
    branches: [main, develop]

jobs:
  accessibility:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Install Playwright browsers
        run: npx playwright install --with-deps chromium

      - name: Build application
        run: npm run build

      - name: Start server
        run: npm start &
        env:
          NODE_ENV: test

      - name: Wait for server
        run: npx wait-on http://localhost:3000 --timeout 30000

      - name: Run accessibility tests
        run: npx playwright test accessibility.spec.ts

      - name: Upload results on failure
        if: failure()
        uses: actions/upload-artifact@v4
        with:
          name: accessibility-report
          path: playwright-report/

Button.test.tsx (React + Jest)

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

expect.extend(toHaveNoViolations);

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

  it('has no WCAG violations with aria-label', async () => {
    const { container } = render(
      <Button aria-label="Close dialog">✕</Button>
    );
    const results = await axe(container);
    expect(results).toHaveNoViolations();
  });

  // This test would fail — catches missing label early
  it('icon-only button without label fails', async () => {
    const { container } = render(<Button>✕</Button>);
    const results = await axe(container);
    // Expect this to have violations — document the known gap
    expect(results.violations.length).toBeGreaterThan(0);
  });
});

.pa11yci (config file)

{
  "defaults": {
    "standard": "WCAG2AA",
    "timeout": 30000,
    "wait": 500,
    "chromeLaunchConfig": {
      "args": ["--no-sandbox"]
    }
  },
  "urls": [
    "http://localhost:3000",
    "http://localhost:3000/about",
    "http://localhost:3000/contact",
    "http://localhost:3000/products"
  ]
}

GitHub Actions step

- name: Run pa11y accessibility scan
  run: npx pa11y-ci --config .pa11yci