Check accessibility in every build

How to do it

Add an axe-core scan to the browser tests, for example with @axe-core/playwright or axe-playwright-python. Automated checks cover only about a third of the WCAG criteria. Also test as Test each critical journey with a keyboard and a screen reader says. The duty itself is the WCAG level in Meet the WCAG level your accessibility law names.

Examples

JavaScript 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([]);
});

Python example

# Python with axe-playwright-python
from axe_playwright_python.sync_playwright import Axe

def test_the_checkout_page_has_no_accessibility_violations(page):
    page.goto("/checkout")
    assert Axe().run(page).violations_count == 0

How to check

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

Sources

• WCAG 2.2

Related rules

• WEB-24 Audit every page in a browser before release in Website
• CMP-52 Meet the European Accessibility Act as a legal duty in Compliance and governance
• APP-5 Show every component state in a catalogue in Web app interface
• APP-54 Test every state of every data view in Web app interface
• STK-42 Use axe-core for accessibility tests in Software choices
• MOB-34 Test every screen with VoiceOver and TalkBack in Mobile apps
• AXS-20 Name every link and button in Accessibility
• AXS-82 Test each critical journey with a keyboard and a screen reader in Accessibility
• AXS-44 Meet the WCAG level your accessibility law names in Accessibility
• AXS-62 Test with disabled people in Accessibility
• AXS-71 Audit a sample chosen by the W3C method in Accessibility
• DOC-28 Make docs pages pass the same accessibility checks as the product in Documentation