Automated Accessibility in CI/CD: Integrating Playwright, axe-core & GitHub Actions

Modern engineering teams deploy code multiple times per day. Without automated accessibility quality gates integrated directly into continuous integration (CI/CD) pipelines, UI changes frequently introduce regressions: low-contrast buttons, unlabelled inputs, or broken keyboard navigation. Pairing **Playwright with `@axe-core/playwright` inside GitHub Actions** stops non-compliant code before it merges.

Why Manual Testing Alone Fails in Fast-Paced CI/CD

Manual accessibility audits conducted once or twice a year are out of date the moment a new feature branch is deployed. Automated CI/CD scanning ensures continuous verification across every commit.

Configuring @axe-core/playwright in Node.js

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

test.describe('Automated WCAG 2.2 AA Audits', () => {
  test('Homepage passes axe-core accessibility audit', async ({ page }) => {
    await page.goto('/');

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

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

GitHub Actions Workflow Configuration (.github/workflows/a11y.yml)

name: Accessibility CI Gate

on:
  pull_request:
    branches: [main]

jobs:
  a11y-audit:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - 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: Run Accessibility Test Suite
        run: npx playwright test tests/accessibility.spec.ts

Formatting Violations and Generating PR Comments

Configure your test runner to output structured markdown tables detailing the exact DOM selector, failing WCAG criterion, and suggested code fix directly into the GitHub Pull Request comments.

Defining Strict vs Advisory Gating Rules

1. Critical / Serious Violations: Hard-block PR merge (missing form labels, contrast < 3:1, missing alt text).
2. Moderate / Minor Violations: Advisory warnings with a 14-day resolution SLA.