What it does

Accessibility Checker runs a thorough WCAG 2.1 AA audit on the markup you paste. It checks every element against all applicable success criteria — images for alt text, interactive elements for keyboard operability, colour values for a 4.5:1 contrast ratio, form inputs for associated labels, and dynamic content for live region announcements. Findings are grouped by WCAG principle (Perceivable / Operable / Understandable / Robust) with a direct link to the relevant guideline.

For each violation, the skill outputs both the problem (what it found) and the fix (the exact corrected markup). It understands React and Vue syntax, so it can flag jsx-a11y violations like missing button type attributes and incorrect role usage on non-interactive elements.

How to install

bash

npx skills add user/a11y-checker

Registered with your Claude Code environment in seconds. No dependencies, no configuration required. Works on any HTML, JSX, TSX, or Vue SFC you paste directly into the prompt.

How to use

Paste your markup and ask for an accessibility audit:

prompt

Check this HTML for accessibility issues: [paste markup]

The skill returns findings grouped by WCAG principle. A typical output section looks like this:

output

## WCAG 2.1 AA Audit Findings

### Perceivable
● [FAIL] 1.1.1 Non-text Content — img missing alt attribute
  Found:  <img src="hero.jpg">
  Fix:    <img src="hero.jpg" alt="Team working together in open office">

● [FAIL] 1.4.3 Contrast (Minimum) — #999999 on #ffffff = 2.85:1 (need 4.5:1)
  Found:  color: #999999; background: #ffffff
  Fix:    color: #757575; background: #ffffff (ratio 4.6:1 ✓)

### Operable
● [FAIL] 2.1.1 Keyboard — <div onclick> not keyboard focusable
  Found:  <div onclick="openMenu()">Menu</div>
  Fix:    <button type="button" onclick="openMenu()">Menu</button>

### Result: 3 failures, 2 warnings — not WCAG 2.1 AA compliant

Configuration options

prompt

# Raise the bar to WCAG AAA
Check this HTML for accessibility issues — check for WCAG AAA compliance

# Narrow the scope
Check this HTML for accessibility issues — focus on keyboard accessibility only

# React/JSX audit
Check this HTML for accessibility issues — audit this React component

Tip: Run Accessibility Checker before every PR merge. Paste the changed component markup and use the "focus on keyboard accessibility only" modifier for fast pre-merge spot checks, then run the full audit before any major release.

Related skills

After fixing the violations found by Accessibility Checker, use CSS Wizard to regenerate any colour palettes at the required contrast ratio. Pair with UI Code Reviewer for a broader code quality pass on the same component, and Test Generator to write automated accessibility tests that prevent regressions.