Accessibility Audit

Automated WCAG compliance checking using Playwright MCP.

Quick Audit

// Run via playwright_evaluate
const axe = await import('https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.8.4/axe.min.js');
const results = await axe.run();
return results.violations;

WCAG Levels

Level	Requirement	Examples
A	Must have	Alt text, keyboard nav, form labels
AA	Should have	Color contrast 4.5:1, resize to 200%
AAA	Nice to have	Contrast 7:1, sign language

Target: AA compliance (legal standard)

Common Issues & Fixes

1. Missing Alt Text

<!-- Bad -->
<img src="hero.jpg">

<!-- Good -->
<img src="hero.jpg" alt="Team collaborating in modern office">

2. Poor Color Contrast

/* Bad: 2.5:1 ratio */
color: #999 on #fff;

/* Good: 4.6:1 ratio */
color: #767676 on #fff;

3. Missing Form Labels

<!-- Bad -->
<input type="email" placeholder="Email">

<!-- Good -->
<label for="email">Email</label>
<input type="email" id="email">

4. No Focus Indicators

/* Bad */
:focus { outline: none; }

/* Good */
:focus { outline: 2px solid var(--primary); outline-offset: 2px; }

5. Missing Skip Links

<a href="#main" class="skip-link">Skip to content</a>

6. Insufficient Touch Targets

/* Minimum 44x44px */
button { min-height: 44px; min-width: 44px; }

Audit Workflow

1. Navigate: playwright_navigate to target URL
2. Get Tree: playwright_get_content for accessibility tree
3. Run axe: playwright_evaluate with axe-core
4. Screenshot: Capture current state
5. Report: Categorize by severity and WCAG level

Playwright MCP Commands

Navigate to [URL] and run an accessibility audit

Get the accessibility tree of this page

Check color contrast on all text elements

Find all images missing alt text

List all form inputs without labels

Severity Levels

Severity	Impact	Action
Critical	Blocks users completely	Fix immediately
Serious	Major barriers	Fix before release
Moderate	Some difficulty	Fix soon
Minor	Inconvenience	Fix when possible

Tools Integration

• axe-core: Automated scanning
• Playwright: Browser automation
• Lighthouse: Accessibility score
• WAVE: Visual feedback (manual)

Checklist

• All images have alt text
• Color contrast meets 4.5:1
• All forms have labels
• Keyboard navigation works
• Focus indicators visible
• Skip links present
• Headings in order (h1->h2->h3)
• ARIA used correctly
• No keyboard traps
• Error messages announced