---

name: accessibility-audit description: Automated accessibility testing via Playwright MCP and axe-core requires_mcp: playwright integrates_with:

• playwright-automation
• web-design-guidelines

---

Accessibility Audit

Automated WCAG compliance checking using Playwright MCP.

Quick Audit

Copy// 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

Target: AA compliance (legal standard)

Common Issues & Fixes

1. Missing Alt Text

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

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

2. Poor Color Contrast

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

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

3. Missing Form Labels

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

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

4. No Focus Indicators

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

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

5. Missing Skip Links

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

6. Insufficient Touch Targets

Copy/* 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

CopyNavigate 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

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