4.6Integrating Compliance Checks into Your Workflow

Pre-Commit: Linting HTML for Accessibility

Before code even reaches CI, lint HTML templates for common violations:

# Using axe-linter or htmlhint with accessibility rules
npx htmlhint --rules "alt-require,title-require" src/**/*.html

CI: Automated Page Scanning

Run axe-core against every page in your application during CI. Fail the build on critical and serious violations, warn on moderate ones.

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

const pages = [
    '/',
    '/products',
    '/cart',
    '/checkout',
    '/account',
    '/help',
];

for (const pagePath of pages) {
    test(`a11y scan: ${pagePath}`, async ({ page }) => {
        await page.goto(pagePath);
        const results = await new AxeBuilder({ page })
            .withTags(['wcag2a', 'wcag2aa'])
            .analyze();

        // Fail on critical and serious
        const blocking = results.violations.filter(
            v => v.impact === 'critical' || v.impact === 'serious'
        );
        expect(blocking).toEqual([]);
    });
}

Post-Release: Monitoring

After deployment, run periodic accessibility scans against production to catch regressions introduced by content changes, CMS updates, or third-party script injections that bypass CI.