Audit every page in a browser before release

How to do it

Script a browser driver, such as Playwright, to open every page type. Run axe-core, an accessibility checker, with the WCAG 2.0, 2.1 and 2.2 AA rules and best practices. Run Lighthouse, and collect console errors. Run the accessibility part in CI on every build, as in accessibility in CI.

Example

import { chromium } from 'playwright';
import { readFileSync } from 'node:fs';
const axe = readFileSync('node_modules/axe-core/axe.min.js', 'utf8');
const browser = await chromium.launch();
for (const colorScheme of ['light', 'dark']) {
  const page = await browser.newPage({ colorScheme, viewport: { width: 360, height: 800 } });
  page.on('console', m => m.type() === 'error' && console.log('console:', m.text()));
  await page.goto('https://example.com/');
  // evaluate, not addScriptTag: a strict CSP blocks an injected <script>
  const { violations } = await page.evaluate(`(() => { ${axe}; return axe.run({
    runOnly: ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'wcag22aa', 'best-practice'] }); })()`);
  console.log(colorScheme, violations.map(v => v.id));
}
await browser.close();

How to check

No axe violations and no console errors, such as CSP or Trusted Types errors, on any page. Run Lighthouse on key pages and keep its scores as a record.