| name | accessibility-audit |
| description | WCAG compliance checking and accessibility improvements. Use for auditing websites, fixing a11y issues, and implementing inclusive design. |
♿ Accessibility Audit Skill
WCAG 2.1 Principles (POUR)
| Principle | Description |
|---|
| Perceivable | Content viewable by all users |
| Operable | Interface usable by all users |
| Understandable | Clear and predictable |
| Robust | Works with assistive tech |
Common Issues & Fixes
Images
<img src="logo.png">
<img src="logo.png" alt="Company Logo">
<img src="divider.png" alt="">
Forms
<input type="text" placeholder="Email">
<label for="email">Email Address</label>
<input type="email" id="email" name="email" required>
Buttons
<div onclick="submit()">Submit</div>
<button type="submit">Submit</button>
Links
<a href="#">Click here</a>
<a href="/products">View all products</a>
Color Contrast
| Level | Ratio | Use For |
|---|
| AA Normal | 4.5:1 | Regular text |
| AA Large | 3:1 | 18pt+ or 14pt bold |
| AAA Normal | 7:1 | Enhanced accessibility |
CSS Example
.text {
color: #1e293b;
background: #ffffff;
}
.text {
color: #94a3b8;
background: #ffffff;
}
Keyboard Navigation
element.focus();
element.blur();
const focusableElements = modal.querySelectorAll(
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
);
Screen Reader Support
<div aria-live="polite" aria-atomic="true">
Status: Loading...
</div>
<span class="sr-only">Opens in new tab</span>
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
Audit Tools
npx lighthouse https://example.com --view
npm install axe-core
Checklist
