Accessibility skill for Claude Code: audit and fix web pages against WCAG 2.2

Makes your agent audit and fix web accessibility against WCAG 2.2, using live Lighthouse results when it can.

Installs: 66K; on skills.sh
Stars: 3K; on GitHub
Files: 2; besides SKILL.md
Updated: Aug 2026; last repo commit

accessibility makes the agent audit a web page against WCAG 2.2 and fix what it finds. It loads when you ask to improve accessibility, run an a11y audit, meet WCAG, support screen readers or fix keyboard navigation, and it prefers evidence: a live Lighthouse audit and the rendered accessibility tree, then a fix and a re-run.

Without a live browser it falls back to the Lighthouse CLI or axe plus manual checks, and it says an automated score of 100 is not WCAG conformance. It ships two reference files, one with code patterns and one WCAG quick reference. The README calls the pack unofficial.

Good for

Front-end developers asked to meet WCAG or fix a11y issues
Teams checking keyboard and screen reader support
Site owners preparing for an accessibility review

Install accessibility

Claude Code

Copy this prompt.

Install the accessibility skill in Claude Code. Run this command:

npx skills add https://github.com/addyosmani/web-quality-skills --skill accessibility

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

Audit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible".

Sections in SKILL.md

Evidence-led audit workflow
WCAG Principles: POUR
Conformance levels
Perceivable
Text alternatives (1.1)
Color contrast (1.4.3, 1.4.6)
Media alternatives (1.2)
Operable
Keyboard accessible (2.1)
Focus visible (2.4.7)
Focus not obscured (2.4.11) — new in 2.2
Skip links (2.4.1)
Target size (2.5.8) — new in 2.2
Dragging movements (2.5.7) — new in 2.2
Timing (2.2)
Motion (2.3)

Key facts

Author: addyosmani (repo owner)
Installs on skills.sh: 65,969 (Nov 2, 2026)
GitHub stars: 3,022 on the web-quality-skills repo (Nov 2, 2026)
License: MIT
Last commit: 2026-08-24
What installs: 3 files including SKILL.md: references/A11Y-PATTERNS.md and references/WCAG.md
Needs: Optional: Chrome DevTools MCP for live Lighthouse audits; otherwise Lighthouse CLI or axe
Works in: Claude Code, Codex, Gemini CLI and claude.ai, per the README

What it includes

Run Lighthouse, inspect the accessibility tree, fix, then re-run the same audit
Uses lighthouse_audit and take_snapshot when Chrome DevTools MCP is available, and tests the flow with the keyboard.
Runs code · Evidence-led audit workflow
npx lighthouse and axe-core CLI when no live tools exist
The SKILL.md shows npx lighthouse with the accessibility category and an axe-core CLI install.
Runs code · Lighthouse CLI or axe fallback
Alt text, accessible names, contrast ratios and media alternatives
Normal text needs 4.5:1 at AA; large text and UI parts need 3:1.
Perceivable
Keyboard access, focus visibility, skip links, target size, dragging and motion
WCAG 2.2 additions such as 24 by 24 CSS pixel targets and focus not obscured are covered.
Operable
Page language, consistent help, form labels, errors, redundant entry and sign-in
Also covers the new 2.2 criteria 3.2.6, 3.3.7 and 3.3.8.
Understandable
Prefer native elements; correct ARIA roles and live regions
Links to a tabs pattern and a live region helper.
Robust
Automated tools plus a seven-item manual checklist
Keyboard, screen reader, zoom, high contrast, reduced motion, focus order and target size.
Testing checklist
Critical, serious and moderate lists
For example missing labels and alt text are critical.
Common issues by impact
Code patterns: focus trap, skip link, errors, labels, tabs, live regions
Includes VoiceOver and NVDA shortcuts.
Read · references/A11Y-PATTERNS.md
WCAG 2.2 quick reference and what changed from 2.1
Success criteria by level.
Read · references/WCAG.md

From the official docs

Permissions

Medium risk

It runs Lighthouse and axe through npm and edits your front-end code to fix findings. Review the commands before approving and check the diff.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It runs third-party tools from npm
The fallback runs npx lighthouse and installs @axe-core/cli with npm install -g. Check the package names before you approve.
It audits live pages
It loads the URLs you give it in a browser or Lighthouse. Point it at sites you own or have permission to test.
It edits your source to fix issues
Fixes go into your markup and CSS. Review the diff and re-run your own tests.
Optional Chrome DevTools MCP has its own data handling
If you connect it for live Lighthouse audits, note that its README says Google collects usage statistics by default (opt out with --no-usage-statistics) and that the server exposes browser content to your agent.

Technical details

Talks to	pages you point it at. npm (to fetch lighthouse and axe-core)

Questions

What does the accessibility skill do?

It makes Claude audit a page against WCAG 2.2, find failing elements, fix the source and re-run the audit. It also covers manual checks that tools miss.

How do I install the accessibility skill?

Use the install box above. The README also lists npx skills add addyosmani/web-quality-skills, a Claude Code plugin (/plugin marketplace add addyosmani/web-quality-skills, then /plugin install web-quality-skills@addy-web-quality-skills) and a Codex route (codex plugin marketplace add addyosmani/web-quality-skills).

Does it need Chrome DevTools MCP?

No. The README calls the integration optional. With it, the skill runs a live Lighthouse audit. Without it, the skill falls back to the Lighthouse CLI, axe or manual checks.

Does it work in the Claude app?

The README says for claude.ai to add skills to project knowledge or paste the SKILL.md contents into the conversation. Live audits need a browser tool, so expect manual guidance there.

Will a perfect score mean I am compliant?

No. The skill says automated tools find only a subset of barriers, a score of 100 is not WCAG conformance and manual checks are still needed.

Is it safe to run?

It is a text file with two reference files and no scripts. It tells the agent to run Lighthouse or axe against pages and to install axe globally, so run it only on sites you own or may test.

Information

updated Nov 2, 2026

Repository: addyosmani/web-quality-skills
Folder: skills/accessibility

addyosmani/web-quality-skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 5

accessibility SKILL.md · github.com
web-quality-skills README · github.com
A11Y-PATTERNS.md · github.com
WCAG.md · github.com
chrome-devtools-mcp README · github.com