Skip to content
/a11yStable

Audits components for WCAG 2.1 compliance, missing ARIA attributes, keyboard navigation, and color contrast issues.

AccessibilityFrontend· 2 min read

Quick import: Download the .md file and save it to .claude/commands/ (Claude Code), .cursorrules (Cursor), or paste as a system prompt in ChatGPT, Gemini, or any LLM API.

#What it does

The /a11y skill audits your frontend components against WCAG 2.1 guidelines. It checks for missing ARIA attributes, broken keyboard navigation, insufficient color contrast, missing alt text, incorrect heading hierarchy, and focus management issues. Each finding includes the WCAG criterion it violates and the exact code change to fix it.

#How to use

bash
/a11y
bash
/a11y src/components/Modal.tsx
bash
/a11y --fix src/components/

With --fix, the skill applies safe fixes automatically (adding missing aria-label, alt attributes, role attributes). Fixes that require design decisions are flagged for manual review.

#What it checks

  • Images -- Missing or empty alt text, decorative images without alt=""
  • Forms -- Inputs without associated labels, missing error announcements, no autocomplete attributes
  • Keyboard -- Interactive elements not reachable via Tab, missing focus styles, focus traps without escape
  • ARIA -- Incorrect or redundant ARIA roles, missing aria-live for dynamic content, broken aria-labelledby references
  • Color -- Contrast ratios below 4.5:1 for normal text and 3:1 for large text (checks Tailwind classes against theme colors)
  • Headings -- Skipped heading levels, multiple h1 elements, headings used for styling instead of semantics
  • Motion -- Animations without prefers-reduced-motion media query support
  • Semantics -- Div-based buttons without role="button", clickable elements without keyboard handlers

#Example

bash
> /a11y src/components/ProductCard.tsx
 
## Accessibility Audit: 4 issues found
 
### [CRITICAL] Line 12: Image missing alt text
<img src={product.image} className="rounded-lg" />
Fix: <img src={product.image} alt={product.name} className="rounded-lg" />
WCAG: 1.1.1 Non-text Content (Level A)
 
### [HIGH] Line 24: Click handler on div without keyboard support
<div onClick={handleSelect}>Select</div>
Fix: <button onClick={handleSelect}>Select</button>
WCAG: 2.1.1 Keyboard (Level A)
 
### [MEDIUM] Line 31: Color contrast ratio 3.2:1
text-gray-400 on bg-white fails WCAG AA for normal text.
Fix: Use text-gray-600 (contrast ratio 5.7:1)
WCAG: 1.4.3 Contrast (Level AA)
 
### [LOW] Line 8: Missing lang attribute on price display
Price formatted with locale but no lang attribute for screen readers.
Fix: Add lang="en" to the price <span>
WCAG: 3.1.2 Language of Parts (Level AA)
Orel Ohayon·
View all skills