{"manifest":{"name":"WCAG Accessibility Auditor","version":"1.0.0","description":"Audit a UI component, page description, or HTML snippet against WCAG 2.2 AA criteria. Produces a checklist of pass/fail items with specific, actionable fixes — no generic advice.","tags":["accessibility","wcag","a11y","audit","ui","compliance"],"standard":"agentskills.io","standard_version":"1.0","content_checksum":"8e045eaf869585990f9534d4529264aad0fc7df845d87512c0931175eed66eb4","bundle_checksum":null,"metadata":{},"files":[]},"files":{"SKILL.md":"# WCAG Accessibility Auditor\n\n> **Purpose:** Audit any UI component, page structure, or HTML snippet against WCAG 2.2 Level AA criteria. Produces a structured checklist with pass/fail status for each applicable criterion, specific code-level fixes for failures, and a prioritized remediation plan. Covers all four WCAG principles: Perceivable, Operable, Understandable, and Robust.\n\n---\n\n## Invocation\n\n```\n/a11y-audit\n```\n\nProvide one of:\n- **HTML snippet** — paste raw HTML/JSX of a component\n- **Component description** — describe what it looks like and how it behaves\n- **URL** — describe the page structure (screenshot descriptions work too)\n\n---\n\n## Criteria Checked (WCAG 2.2 AA)\n\n### Perceivable\n- **1.1.1** Non-text content has text alternatives (`alt` text on images)\n- **1.3.1** Info and relationships conveyed through structure (semantic HTML, ARIA roles)\n- **1.3.2** Meaningful sequence — DOM order matches visual order\n- **1.3.3** Instructions don't rely solely on shape/color/size/location\n- **1.4.1** Color is not the only means of conveying information\n- **1.4.3** Contrast ratio ≥ 4.5:1 for normal text, ≥ 3:1 for large text\n- **1.4.4** Text can be resized 200% without loss of content\n- **1.4.10** Reflow — content works at 320px width without horizontal scroll\n- **1.4.11** Non-text contrast ≥ 3:1 for UI components and focus indicators\n\n### Operable\n- **2.1.1** All functionality available via keyboard\n- **2.1.2** No keyboard traps\n- **2.4.1** Skip navigation links present for repeated blocks\n- **2.4.2** Pages have descriptive titles\n- **2.4.3** Focus order is logical and predictable\n- **2.4.4** Link purpose clear from link text (no \"click here\")\n- **2.4.7** Keyboard focus is always visible\n- **2.5.3** Label in Name — visible label matches accessible name\n\n### Understandable\n- **3.1.1** Language of the page is set (`lang` attribute)\n- **3.2.1** No unexpected context changes on focus\n- **3.2.2** No unexpected changes on input (unless user is warned)\n- **3.3.1** Errors are identified and described in text\n- **3.3.2** Labels or instructions provided for user input\n\n### Robust\n- **4.1.1** Valid HTML — no duplicate IDs, proper nesting\n- **4.1.2** Name, Role, Value — all UI components have accessible names, roles, and states\n- **4.1.3** Status messages programmatically determinable (ARIA live regions)\n\n---\n\n## Output Format\n\n```markdown\n## Accessibility Audit Report\n\n**Component:** [name]\n**Standard:** WCAG 2.2 Level AA\n**Date:** [today]\n\n---\n\n### Overall Score: [X/28 criteria] — [PASS / FAIL / NEEDS REVIEW]\n\n---\n\n### Critical Failures (fix before launch)\n\n| Criterion | Issue | Fix |\n|-----------|-------|-----|\n| 1.4.3 | Contrast ratio 2.8:1 on `#999` text | Change to `#767676` (4.54:1) |\n| 2.1.1 | Dropdown not keyboard-accessible | Add `tabindex=\"0\"` and keydown handler |\n\n---\n\n### Warnings (fix this sprint)\n\n| Criterion | Issue | Recommendation |\n|-----------|-------|---------------|\n| 2.4.4 | \"Read more\" links lack context | Add `aria-label=\"Read more about [topic]\"` |\n\n---\n\n### Passed Criteria\n\n[List of criteria that pass, for confidence]\n\n---\n\n### Quick Fixes\n\n```html\n\n\n\n\n\"SkillSlap\n```\n\n---\n\n### Remediation Priority\n\n1. [Most critical fix]\n2. [Second fix]\n```\n\n---\n\n## Rules\n\n- Never mark a criterion as \"pass\" if you cannot confirm it from the provided input — use \"cannot verify\" instead\n- Always provide the **specific CSS/HTML/ARIA fix**, not just a description of the problem\n- Contrast ratio failures must include the exact hex values and their actual ratio\n- If the component has interactive states (hover, focus, error), audit those states separately\n- For JSX/React components, output fixes in JSX syntax, not plain HTML\n- Color contrast: use the formula `(L1 + 0.05) / (L2 + 0.05)` where L is relative luminance\n\n## Playground\n\n
WCAG Accessibility AuditorExample · SkillSlap
Input: HTML snippet
<button style='color:#aaa;\n  background:#999;'>\n  Submit\n</button>\n\n<img src='hero.jpg'>\n\n<input placeholder='Email'>
Output: Audit findings
🔴 Contrast fail (button) — WCAG 1.4.3\n   #aaa on #999 = 1.06:1\n   Required: 4.5:1 for normal text.\n   Fix: use #fff on #555 (7.5:1)\n\n🔴 Missing alt (img) — WCAG 1.1.1\n   Screen readers announce 'image'.\n   Fix: alt='Hero banner showing...'\n\n🟡 Placeholder as label — WCAG 1.3.1\n   Disappears on focus; not announced.\n   Fix: add <label>Email</label>\n   + id='email' on input.
"}}