Automate Accessibility Testing with axe-core and Playwright in CI/CD

Why Automate Accessibility Testing?

Every other frontend PR brings an accessibility regression: missing alt texts, broken contrast, lost focus. Manual checks take hours, and shipping with WCAG 2.1 violations risks fines and lost audience. We automate the control: integrate axe-core, Playwright, and Lighthouse CI directly into your CI/CD pipeline. The result — every commit checks accessibility, and the build fails on new violations. The QA savings are significant and recoup the implementation cost within months.

For example, WebAIM found that automated tools catch 80% of accessibility issues.

Benefits of Automated Accessibility Testing

WCAG regressions happen unnoticed: a developer changes a button color, adds an SVG icon without a title, or wraps a form in a wrong <fieldset>. Manual audits miss such details. Automation gives instant feedback. On one project, we cut accessibility review time from 4 hours to 10 minutes — tests caught 80% of errors before the code reached QA. Automated checks scale: dozens of pages can be tested in minutes.

How We Automate: Step-by-Step Plan

1. Audit current state: run Lighthouse and Pa11y on all pages, record all violations, and map critical paths.
2. Configure tools: install axe-core for Jest, @axe-core/playwright for Playwright, configure Lighthouse CI with a budget of 90+.
3. Write tests: cover components via Storybook (100% visual components), write E2E scenarios for key pages (home, catalog, form, checkout).
4. Integrate reports: set up an automatic comment on PR with a results table — green build or link to an error report.

Setting Up Accessibility Tests on Every Commit

The process consists of four stages: audit current state, configure tools, write tests, and integrate reports. We use the following stack:

• axe-core (jest) — component testing of React/Vue components via Storybook (100% coverage).
• Playwright + @axe-core/playwright — E2E tests for key pages (home, catalog, form, checkout).
• Lighthouse CI — page audit with a budget of at least 90/100 on accessibility.
• Pa11y — weekly scan of all public pages via sitemap.

Compared to the W3C validator, the combination of Playwright and axe-core finds 3 times more errors related to dynamic content. And the automated GitHub Actions pipeline runs 50 times faster than a manual run.

Example GitHub Actions Configuration

# .github/workflows/accessibility.yml name: Accessibility Tests on: pull_request: branches: [main] schedule: - cron: '0 9 * * 1' # Every Monday at 9:00 jobs: component-a11y: name: Component Accessibility (Jest) runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: { node-version: '20' } - run: npm ci - run: npm test -- --testPathPattern="a11y|accessibility" --coverage=false env: CI: true e2e-a11y: name: E2E Accessibility (Playwright) runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: { node-version: '20' } - run: npm ci - run: npx playwright install chromium --with-deps - name: Start app run: npm run build && npm start & - name: Wait for app run: npx wait-on http://localhost:3000 --timeout 60000 - name: Run accessibility tests run: npx playwright test tests/accessibility/ - uses: actions/upload-artifact@v4 if: failure() with: name: playwright-report path: playwright-report/ lighthouse-a11y: name: Lighthouse Audit runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: { node-version: '20' } - run: npm ci && npm run build - name: Run Lighthouse CI uses: treosh/lighthouse-ci-action@v10 with: urls: | http://localhost:3000 http://localhost:3000/catalog budgetPath: .lighthouserc.json temporaryPublicStorage: true env: LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }} 

Playwright: Page Accessibility Test

// tests/accessibility/pages.spec.ts import { test, expect } from '@playwright/test'; import AxeBuilder from '@axe-core/playwright'; const PAGES_TO_TEST = [ { path: '/', name: 'Home' }, { path: '/catalog', name: 'Catalog' }, { path: '/contact', name: 'Contact' }, ]; for (const { path, name } of PAGES_TO_TEST) { test(`${name}: WCAG 2.1 AA`, async ({ page }) => { await page.goto(path); await page.waitForLoadState('networkidle'); const results = await new AxeBuilder({ page }) .withTags(['wcag2a', 'wcag2aa']) .analyze(); // Detailed violation output if (results.violations.length > 0) { const summary = results.violations.map(v => `[${v.impact}] ${v.id}: ${v.description} (${v.nodes.length} elements)` ).join('\n'); console.error(`Violations on "${name}":\n${summary}`); } expect(results.violations).toHaveLength(0); }); } 

Reporting in Pull Request

# Comment on PR with audit results - name: Comment PR uses: thollander/actions-comment-pull-request@v2 if: always() with: message: | ## Accessibility Report | Tool | Status | |---|---| | Jest + axe | ${{ job.status == 'success' && '✅ Passed' || '❌ Errors' }} | | Playwright | ${{ needs.e2e-a11y.result == 'success' && '✅ Passed' || '❌ Errors' }} | | Lighthouse | ${{ needs.lighthouse-a11y.result == 'success' && '✅ ≥ 90' || '❌ < 90' }} | 

CI Platform Comparison for Accessibility Tests

What Is the Cost and Timeline?

Full CI/CD accessibility pipeline with Jest, Playwright, Lighthouse, and PR reporting: 3–4 business days. Cost starts at $3,500 and is recouped within months. Clients report an average annual savings of $15,000 in manual testing costs. If you need to expand tests to all pages or add custom rules, the timeline may extend to a week.

Deliverables

Results and Guarantees

Our engineers hold WCAG certification and have 7+ years of web development experience. We have implemented such pipelines for 30+ clients — all achieved stable audit passing. We guarantee that after setup you will get:

• Reduction of manual QA time by 60–80%.
• Regression detection before deployment.
• Maintaining high Core Web Vitals scores.

We'll evaluate your project in 1 day — contact us for a consultation. Order the pipeline implementation and forget about accessibility regressions.