Updated recently
Last updated:
Quick Answer: Automate accessibility testing by installing @axe-core/playwright, running axe.analyze() on each page, and asserting zero violations. This catches WCAG 2.1 AA issues automatically.
Install Axe-Core with Playwright
npm install @axe-core/playwrightWrite an Accessibility Test
import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';
test('homepage should have no accessibility violations', async ({ page }) => {
await page.goto('https://example.com');
const results = await new AxeBuilder({ page })
.withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
.analyze();
expect(results.violations).toEqual([]);
});Common Accessibility Violations
| Violation | Impact | Fix |
|---|---|---|
| Missing alt text | Screen readers cannot describe images | Add descriptive alt attributes |
| Low color contrast | Low-vision users cannot read | Use ratio >= 4.5:1 |
| Missing form labels | Screen readers cannot identify inputs | Add label or aria-label |
| Missing heading hierarchy | Cannot navigate structure | Use H1-H3 in order |
Training Resources
Master Playwright with SkilBrill Playwright Training.
FAQ
Can axe-core catch all accessibility issues?
Axe-core catches ~57% of WCAG issues. The rest require manual testing for keyboard navigation and screen reader quality.
