accessibility-audit

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

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

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

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

Forms

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

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

Buttons

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

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

Links

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

<!-- Good ✅ -->
<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

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

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

<!-- 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>

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

---

Audit Tools

# 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