---

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)

---

Common Issues & Fixes

Images

Copy<!-- Bad ❌ -->
<img src="logo.png">

<!-- Good ✅ -->
<img src="logo.png" alt="Company Logo">

<!-- Decorative (empty alt) -->
<img src="divider.png" alt="">

Forms

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

<!-- Good ✅ -->
<label for="email">Email Address</label>
<input type="email" id="email" name="email" required>

Buttons

Copy<!-- Bad ❌ -->
<div onclick="submit()">Submit</div>

<!-- Good ✅ -->
<button type="submit">Submit</button>

Links

Copy<!-- Bad ❌ -->
<a href="#">Click here</a>

<!-- Good ✅ -->
<a href="/products">View all products</a>

---

Color Contrast

CSS Example

Copy/* Good contrast */
.text {
  color: #1e293b;        /* Dark gray */
  background: #ffffff;   /* White */
  /* Contrast ratio: 13.5:1 ✅ */
}

/* Bad contrast */
.text {
  color: #94a3b8;        /* Light gray */
  background: #ffffff;   /* White */
  /* Contrast ratio: 2.8:1 ❌ */
}

---

Keyboard Navigation

Copy// Focus management
element.focus();
element.blur();

// Focus trap for modals
const focusableElements = modal.querySelectorAll(
  'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
);

---

Screen Reader Support

Copy<!-- Live regions for dynamic content -->
<div aria-live="polite" aria-atomic="true">
  Status: Loading...
</div>

<!-- Hidden visually but readable -->
<span class="sr-only">Opens in new tab</span>

Copy.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

---

Audit Tools

Copy# Lighthouse CLI
npx lighthouse https://example.com --view

# axe-core
npm install axe-core

Checklist

• All images have alt text
• Color contrast meets WCAG AA
• All forms have labels
• Site navigable by keyboard
• Focus indicators visible
• ARIA used appropriately
• Tested with screen reader