AI_template/.claude/skills/a11y-audit/SKILL.md

name, description, disable-model-invocation, argument-hint, context, agent

name	description	disable-model-invocation	argument-hint	context	agent
a11y-audit	Run a WCAG 2.2 AA accessibility audit on a component or page. Checks semantic HTML, ARIA, keyboard navigation, color contrast, and screen reader compatibility.	true	[file-or-directory]	fork	frontend-architect

Accessibility Audit

Audit $ARGUMENTS for WCAG 2.2 Level AA compliance.

Steps

1. Read the target code — understand the component/page structure
2. Check against this checklist:

Semantic HTML

• Correct heading hierarchy (h1 → h2 → h3, no skips)
• Landmark elements used (nav, main, aside, footer)
• Lists use ul/ol/li, not styled divs
• Buttons are <button>, links are <a>, not divs with onClick

ARIA

• Interactive elements have accessible names (label, aria-label, aria-labelledby)
• Form inputs have associated labels
• Dynamic content updates use aria-live regions
• Decorative images have aria-hidden="true" or empty alt
• No redundant ARIA (e.g., role="button" on <button>)

Keyboard

• All interactive elements are focusable and operable via keyboard
• Focus order follows visual order
• Focus is trapped in modals/dialogs
• Skip-to-content link present (page-level)
• No keyboard traps

Visual

• Text contrast ratio >= 4.5:1 (normal), >= 3:1 (large)
• Focus indicators visible on all interactive elements
• prefers-reduced-motion respected for animations
• prefers-color-scheme supported if applicable
• Content readable at 200% zoom

States

• Loading states announced (aria-busy)
• Error messages programmatically associated with inputs (aria-describedby)
• Disabled states use disabled attribute, not just styling

3. Report format:

## Accessibility Audit: [component/file name]

### Issues Found
1. [CRITICAL/HIGH/MEDIUM/LOW] — description + file:line + fix

### Passes
- [What's done well]

### Recommendations
- [Improvements beyond minimum compliance]