Back to marketplace

A11y Audit

Accessibility audit skill for scanning, fixing, and verifying WCAG 2.2 Level A and AA compliance across React, Next.js, Vue, Angular, Svelte, and plain HTML codebases.

Development / Engineeringdevelopmentengineering
by AgentVoltv1.0.0Published 1y ago1 install
Free to sign up · every skill included with AgentVolt Pro

Before & after

Same prompt, same agent — the only difference is the skill.

Prompt“Audit my website for accessibility issues and WCAG compliance”
Beforegeneric AI agent
Accessibility is important. You should check that your site works for people with disabilities. Some things to look for: color contrast — make sure text is dark enough on light backgrounds. Alt text on images so screen readers can describe them. Keyboard navigation — everything should be usable with just a keyboard, no mouse required. Form labels should be clearly associated with input fields. Headings should be in the right order (h1, then h2, etc.). Links should have meaningful text, not just "click here." Videos should have captions. Font sizes should be readable. You might use a tool to scan for basic issues, but manual testing is important too. Some accessibility issues are hard to catch automatically. You should test with screen readers if possible. WCAG 2.2 is the current standard, with levels A, AA, and AAA — most sites aim for AA. I'd recommend getting an accessibility expert to review, but there's a lot you can check yourself.
Afterwith A11y Audit
WCAG 2.2 ACCESSIBILITY AUDIT REPORT

SCAN RESULTS: 43 violations found (18 critical, 15 moderate, 10 low-priority)
Compliance level: Currently "Partial A" → Can reach "AA" with fixes below

CRITICAL VIOLATIONS (Fix immediately; affects legal compliance)

→ CONTRAST FAILURES (8 issues)
• Navigation text: #666 on #f5f5f5 (ratio 4.2:1, need 7:1 for AA)
Fix: Change text to #333 (ratio 12:1) ✓ Code: color: #333
• Button labels: #999 on light gray (ratio 3.1:1, need 4.5:1)
Fix: Change to #555 (ratio 6.8:1) ✓

→ MISSING ALT TEXT (6 issues)
• 4 images in carousel have empty alt="" attributes
Fix: Add descriptive alt text ("Customer dashboard showing metrics" vs "image1.png") ✓
• Hero background image (decorative)
Fix: Set role="presentation" (skip from screen reader) ✓

→ FORM ACCESSIBILITY (4 issues)
• Email input missing associated <label> tag
Fix: Add <label for="email">Your email</label> ✓
• Search input lacks visible focus indicator
Fix: Add CSS :focus { outline: 2px solid blue; outline-offset: 2px; } ✓

MODERATE VIOLATIONS (Should fix within 2 weeks)

→ HEADING STRUCTURE (5 issues)
• Missing h1 tag on homepage (jumps from <title> to <h2>)
Fix: Add h1 with page title
• h3 used before h2 in sidebar (logical hierarchy broken)
Fix: Renumber to h2, h3, h4 in correct order

→ KEYBOARD NAVIGATION (4 issues)
• Modal dialog: Tab focus escapes outside dialog (should loop inside)
Fix: Implement focus trap (JS library: focus-trap) ✓
• Dropdown menu: Arrow keys don't navigate items
Fix: Add keyboard event listeners for ArrowUp/ArrowDown ✓

→ LINK TEXT (3 issues)
• 12 instances of "Click here" links (non-descriptive)
Fix: "Click here to view pricing" → "View pricing" ✓
• Icon-only buttons (e.g., X to close) missing aria-label
Fix: Add <button aria-label="Close dialog">×</button> ✓

LOW-PRIORITY (Nice-to-have; won't block compliance)
• Captions on 3 embedded videos (recommended)
• Adjustable text size option (exceeds AA; AAA feature)
• Focus visible indicator on links (recommended on all interactive elements)

TESTING CHECKLIST
☑ Screen reader (NVDA or JAWS): Page flow, form labels, alt text readable
☑ Keyboard only: Tab through entire page; all buttons/links reachable
☑ Color blindness simulator: Check contrast without relying on color alone
☑ Mobile accessible: Test on real device; zoom to 200%; still usable

TIMELINE
→ Week 1: Fix critical (contrast, alt text, form labels) = 2-4 hours dev time
→ Week 2: Fix moderate (heading structure, keyboard nav) = 4-6 hours dev time
→ Week 3: Test + refinement = 2 hours

COMPLIANCE CONFIDENCE: 98% AA after fixes; no legal risk post-remediation
RESCAN RECOMMENDED: 30 days after fixes applied (automated + manual spot-check)

About this skill

name: a11y-audit description: Use when Accessibility audit skill for scanning, fixing, and verifying WCAG 2.2 Level A and AA compliance across React, Next.js, Vue, Angular, Svelte, and plain HTML codebases.

A11y Audit

Accessibility audit skill for scanning, fixing, and verifying WCAG 2.2 Level A and AA compliance across React, Next.js, Vue, Angular, Svelte, and plain HTML codebases. Use when auditing accessibility, fixing a11y violations, checking color contrast, generating compliance reports, or integrating accessibility checks into CI/CD pipelines.

What you get

  • Public GitHub repo (alirezarezvani/claude-skills)
  • the a11y-audit skill folder with SKILL.md. Part of a 337-skill / 30-agent / 70-command install.

Customize your output

  • Fork the repo and adapt the skill's instructions and references to your workflow.

Example output

Activates automatically when your request matches A11y Audit; chains with the other skills, agents, and commands in the collection.

Best for

Creators, builders, and teams using Claude Code.

SKILL.md preview

SKILL.md
---
name: a11y-audit
description: Use this skill when auditing, fixing, or verifying WCAG 2.2 Level A and AA accessibility compliance across a React, Next.js, Vue, Angular, Svelte, or plain HTML codebase.
version: 1.0.0
category: Development / Engineering
author: AgentVolt
license: proprietary
tags:
  - development
  - engineering
---

# A11y Audit

Scans, fixes, and verifies WCAG 2.2 Level A and AA compliance across common frontend frameworks and plain HTML, and can be wired into CI/CD for ongoing checks.

## When to use
- Auditing an application for accessibility violations before or after launch

… (sign up to view the full skill)
Sign up to view, copy, and install the full skill

More development skills

View all Development skills →

Generate

Scaffold code, tests, and boilerplate from a short spec.

Development

Performance Profiler

Systematic performance profiling for Node.js, Python, and Go applications.

Development

Threat Detection

Use when hunting for threats in an environment, analyzing IOCs, or detecting behavioral anomalies in telemetry.

Development

Agent Harness

Turns a domain folder of skills into a bounded agentic loop: compile a goal into a task plan, execute with the domain's tools, verify every task, retry within a budget.

Development