Audit code for WCAG 2.1 AA and EN 301 549 compliance. Checks keyboard navigation, ARIA usage, color contrast, forms, and media accessibility.
This skill inherits all available tools. When active, it can use any tool Claude has access to.
Audit code for WCAG 2.1 AA and EN 301 549 compliance.
aria-label on icon-only buttonsaria-invalid on error fieldsaria-describedby for error messagesaria-live for dynamic contentaria-hidden on decorative elements<!-- Before -->
<input type="text" name="search">
<!-- After -->
<label for="search" class="sr-only">Search</label>
<input type="text" id="search" name="search">
<!-- Before -->
<button><i class="fa fa-trash"></i></button>
<!-- After -->
<button aria-label="Delete item">
<i class="fa fa-trash" aria-hidden="true"></i>
</button>
<!-- Before -->
<input style="border-color: red">
<!-- After -->
<input aria-invalid="true" aria-describedby="error">
<span id="error" role="alert">
<i class="fa fa-warning" aria-hidden="true"></i>
This field is required
</span>
# Automated scan
npx axe-cli http://localhost/page
# Lighthouse accessibility audit
npx lighthouse --only-categories=accessibility http://localhost/page
Accessibility Audit: [Page/Component Name]
==========================================
Critical: X issues
Serious: X issues
Moderate: X issues
Issues Found:
1. [CRITICAL] Missing label on input#search
- Line: 45
- Fix: Add associated <label> element
2. [SERIOUS] Insufficient contrast (2.5:1)
- Element: .btn-secondary
- Fix: Increase contrast to 4.5:1