writing-accessibility-tests
Writing Accessibility Tests
Write Playwright tests that verify WCAG accessibility compliance using a two-layer strategy: automated axe-core scans for broad coverage, plus targeted Playwright assertions for things axe cannot catch.
Two-layer strategy
Every page or feature needs both layers:
Layer 1 - axe-core scans
Automated scans catch structural violations at scale: missing alt text, duplicate IDs, basic colour contrast, missing form labels, invalid ARIA attributes, missing lang attribute, landmark violations, heading level skips.
Layer 2 - Playwright assertions
Targeted assertions catch what axe misses: accessible names on custom components, landmark presence, heading hierarchy, aria-current state, aria-live region configuration, aria-invalid state management, aria-describedby associations, focus management after interactions, custom property contrast, and shadow DOM internals.
Do not duplicate what axe already catches. Layer 2 exists for the gaps.