Check accessibility in every build

How to do it

Add an axe-core scan to the browser tests, for example with @axe-core/playwright. Automated checks cover only about a third of the WCAG criteria, so also test with a keyboard and a screen reader before big releases. The accessibility chapter lists what to check.

Example

import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';

test('the checkout page has no accessibility violations', async ({ page }) => {
  await page.goto('/checkout');
  const results = await new AxeBuilder({ page }).analyze();
  expect(results.violations).toEqual([]);
});

How to check

Add an image without alt text on a branch. The browser suite fails and names the element.