Claude Skill MartBrowse skillsWhat is a Skill?
 
← Back to list

Web Accessibility (a11y) Audit

Audits and fixes web accessibility issues against WCAG 2.2 with concrete HTML/CSS/JS patterns.

Dev & CodingIntermediate★ 2,599⑂ 238AI score 9/10Last updated: Jun 14, 2026

What it does

Gives Claude a structured WCAG 2.2 + Lighthouse playbook so it can review your markup and styles and hand back real fixes.

  • POUR principles and A / AA / AAA conformance targets
  • Text alternatives, color contrast ratios (4.5:1 and 3:1), captions and transcripts
  • Keyboard operability, visible focus, focus-not-obscured (2.4.11), skip links
  • New WCAG 2.2 criteria: 24×24px target size, dragging alternatives, redundant entry, accessible authentication
  • ARIA-vs-native guidance, live regions, form labels and error handling
  • Automated checks (Lighthouse, axe-core) plus a manual testing checklist

Who it's for

  • Frontend developers who must hit AA for legal or procurement requirements
  • Teams new to accessibility who need a prioritized "fix this first" list
  • Design system and component library authors
  • QA engineers guarding against accessibility regressions

Examples

  1. "Run an a11y audit on this landing page" → flags missing alt text, low-contrast colors, and outline: none rules, with patch suggestions
  2. "Make this modal keyboard accessible" → refactors to native <dialog> or applies the focus-trap pattern
  3. "Bring our checkout form to WCAG 2.2 AA" → associates labels, announces errors via role="alert" / aria-invalid, removes redundant entry, enforces 24×24px targets

· · · Install guide · · ·

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the skills/accessibility folder from the GitHub repo addyosmani/web-quality-skills into my ~/.claude/skills/accessibility/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/addyosmani/web-quality-skills.git && cp -r web-quality-skills/skills/accessibility ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal (Terminal on macOS, PowerShell or WSL on Windows).
  2. Create the skills directory if needed: mkdir -p ~/.claude/skills
  3. Clone the repository: git clone https://github.com/addyosmani/web-quality-skills.git
  4. Copy the whole folder so the reference files come along: cp -r web-quality-skills/skills/accessibility ~/.claude/skills/
  5. Verify with ls ~/.claude/skills/accessibility — you should see SKILL.md and a references folder.
  6. Restart Claude Code and ask something like "run an a11y audit" or "check WCAG compliance" to trigger the skill.
View source on GitHub ↗License: MIT