5.5Generating Accessibility Reports

// tests/accessibility/report-generator.ts
import AxeBuilder from '@axe-core/playwright';

interface A11yReport {
    url: string;
    violations: number;
    critical: number;
    serious: number;
    moderate: number;
    minor: number;
    details: any[];
}

async function generateReport(page, url: string): Promise<A11yReport> {
    await page.goto(url);
    const results = await new AxeBuilder({ page })
        .withTags(['wcag2aa'])
        .analyze();

    return {
        url,
        violations: results.violations.length,
        critical: results.violations.filter(v => v.impact === 'critical').length,
        serious: results.violations.filter(v => v.impact === 'serious').length,
        moderate: results.violations.filter(v => v.impact === 'moderate').length,
        minor: results.violations.filter(v => v.impact === 'minor').length,
        details: results.violations.map(v => ({
            id: v.id,
            impact: v.impact,
            description: v.description,
            helpUrl: v.helpUrl,
            affectedElements: v.nodes.length,
        })),
    };
}

axe-core is the foundation of any accessibility testing strategy. It runs in milliseconds, catches the most common violations, and integrates with every major test framework. Run it on every page on every PR as a non-negotiable quality gate.