What is the web accessibility skill?
The web accessibility skill is a SKILL.md in Addy Osmani's web-quality-skills repository. It makes an AI coding agent audit a rendered page with Lighthouse and the accessibility tree, then fix source code against WCAG 2.2 using written patterns for text alternatives, contrast, keyboard use, forms and ARIA. It also says a score of 100 is not conformance.
The skill is the accessibility folder of web-quality-skills, an unofficial collection of Agent Skills for Lighthouse-driven work on web projects. It targets WCAG 2.2 and the Lighthouse accessibility audits, and the README describes the collection as stack-agnostic.
Its workflow is evidence first. The agent runs a live Lighthouse accessibility audit when it can, uses failed nodes to find the component, inspects the rendered accessibility tree, fixes the source and re-runs the same audit.
What changes in your agent's output
- Icon buttons get an accessible name through aria-label or visually hidden text, and decorative images get an empty alt.
- Focus outlines are never removed. The skill shows :focus-visible with a 2px outline and 3:1 contrast against the background.
- Click-only div elements are replaced by a native button, and the skill warns against adding key handlers to a native button.
- Form errors carry more than color: an icon, text, aria-invalid and aria-describedby.
- Sticky headers get scroll-margin so a focused element is not hidden, which is the new WCAG 2.2 criterion 2.4.11.
What the skill covers
Sections follow the four WCAG principles: perceivable, operable, understandable and reliable. The 2.2 additions are marked, including target size at 24 by 24 CSS pixels, dragging alternatives, consistent help, redundant entry and accessible authentication. Two reference files hold the WCAG criteria and reusable code patterns.
Who the web accessibility skill is for
Best for
- Teams that need a repeatable a11y pass on pages an agent writes or edits.
- Projects that want a prioritized fix list: critical, serious and moderate issues are listed in order.
- Pairing with a rules-style skill such as fixing-accessibility or web-design-guidelines.
Not for
- Legal sign-off. The skill states that automated tools find only a subset of barriers and a Lighthouse score of 100 is not WCAG conformance.
- Visual direction or copy. It audits and repairs, it does not design.
- Replacing a manual screen reader pass. The checklist still asks for VoiceOver, NVDA or TalkBack testing.
Use it with UiChemy
Pages built with UiChemy Composer or AI to WordPress end up as editable markup inside Elementor or Gutenberg, which is the code an accessibility audit reads. Run this skill on the published result and fix what it finds. Click Get Started on uichemy.com.
How to install Web Accessibility Skill: WCAG 2.2 Audits for AI Agents
git clone https://github.com/addyosmani/web-quality-skills.gitClone the repository
Run
git clone https://github.com/addyosmani/web-quality-skills.git. Each skill is a folder inside the skills directory, and accessibility is skills/accessibility.Copy the skill folder
Copy skills/accessibility into the folder where your agent loads skills, for one project or globally. The README's manual route copies the whole skills directory, which keeps the cross-links between the sibling skills working. Copy the folder as a whole, because SKILL.md links to a references folder with WCAG and code-pattern files.
Add live browser tools if you have them
The README says the skills prefer Chrome DevTools MCP for traces and Lighthouse runs when your agent exposes it. Without it they fall back to the Lighthouse CLI, PageSpeed Insights and manual checks.
Ask in plain words
Skills activate when your request matches their description, for example by asking for a quality review of a page.
Check that it loaded
Ask for an accessibility review of one page. The agent should run or request a Lighthouse accessibility audit, inspect the accessibility tree, and test the flow with the keyboard before it edits.
Key features
- Evidence-led audit loopRun a Lighthouse accessibility audit, localize failures from audit nodes, read the accessibility tree, fix the source, then re-run the same audit and manual interaction.
- Honest limitsThe skill says automated tools detect only a subset of barriers, and that a score of 100 is not WCAG conformance.
- WCAG 2.2 coverageCriteria are grouped under perceivable, operable, understandable and reliable, with the new 2.2 items flagged.
- Contrast thresholdsA table gives 4.5:1 for normal text at AA, 3:1 for large text and 3:1 for UI components, with the AAA values beside it.
- Keyboard and focus patternsNative elements first, role and tabindex only when a div is unavoidable, :focus-visible outlines, skip links and no keyboard traps.
- New 2.2 criteriaFocus not obscured, 24 by 24 pixel target size, dragging movements, consistent help, redundant entry and accessible authentication.
- Forms and ARIALabels, error identification, aria-invalid, aria-describedby and live regions, with a preference for native elements over ARIA.
- Manual testing checklistKeyboard walk, screen reader, 200 percent zoom, high contrast mode, reduced motion, focus order and target size.
- Impact rankingCommon issues are tiered as critical, serious and moderate, so the fix order is explicit.
- Reference filesreferences/WCAG.md and references/A11Y-PATTERNS.md hold criteria detail and patterns such as the modal focus trap and skip link.
Frequently asked questions
What is the web accessibility skill?
It is the accessibility folder in addyosmani/web-quality-skills. Its SKILL.md tells an AI coding agent to audit a rendered page against WCAG 2.2 with Lighthouse and the accessibility tree, fix the source, and verify the fix with the same audit and a keyboard pass.
How do I install it without npx?
Clone the repository with git, then copy skills/accessibility, or the whole skills folder, into the directory where your agent loads skills. Copying everything keeps links to the sibling web-quality-audit skill working. No package manager is needed for that route.
Does a Lighthouse score of 100 mean my page is accessible?
No. The skill says so directly: automated tools detect only a subset of accessibility barriers, a score of 100 is not WCAG conformance, and a low score does not replace issue-level evidence. It still asks for keyboard and screen reader checks.
Which WCAG version does it follow?
WCAG 2.2. Sections mark the criteria that are new in 2.2, such as focus not obscured, target size, dragging movements, consistent help, redundant entry and accessible authentication. Conformance levels A, AA and AAA are listed with AA as the standard target.
Do I need Chrome DevTools MCP?
No. The skill prefers live Lighthouse and accessibility snapshots when your agent exposes Chrome DevTools MCP, and otherwise falls back to the Lighthouse CLI or axe for automated coverage plus the same manual checks.
How is it different from the fixing-accessibility skill?
This one is an audit workflow tied to WCAG 2.2 and measurable Lighthouse evidence. fixing-accessibility is a rules-style skill for fixing issues in changed code. They can run together, and this page's sibling web quality audit covers all categories.
What license does it use?
The repository is MIT licensed, and the SKILL.md frontmatter also says MIT. The install count of 57.8K on this page comes from a third-party skills listing, not from the repository.