MCPFlixFree Beta
code-review

Accessibility Check

Audit web pages and components for WCAG 2.1 AA accessibility issues — semantic HTML, ARIA, contrast, keyboard nav.

/a11y-check

Install this skill

  1. 1. Copy the SKILL.md content (button above)
  2. 2. Create a folder for the skill:
    # Mac/Linux
mkdir -p ~/.claude/skills/a11y-check

# Windows (PowerShell)
mkdir $env:USERPROFILE\.claude\skills\a11y-check
  3. 3. Save the content as ~/.claude/skills/a11y-check/SKILL.md
  4. 4. Restart Claude Code (or open a new session)
  5. 5. Type /a11y-check to invoke it
accessibilitywcagariaa11y

/a11y-check

Catch accessibility issues before users do.

Usage

/a11y-check # current React/Vue/Svelte components /a11y-check src/components/Button.tsx # specific component /a11y-check https://example.com # live URL (uses Playwright + axe-core)

What it checks

Semantic HTML

  • Buttons that should be <button> (not <div onClick>)
  • Headings out of order (h1 → h3 skipping h2)
  • Links without href or descriptive text

ARIA & keyboard

  • Missing aria-label on icon-only buttons
  • Focus traps in modals
  • Tab order issues
  • Missing skip links

Visual

  • Color contrast ratios (text vs background, AA: 4.5:1 normal, 3:1 large)
  • Text size below recommended
  • Touch targets <44px

Forms

  • Inputs without <label>
  • Missing aria-describedby for errors
  • Required fields not announced

Images & media

  • <img> without alt text
  • Decorative images missing alt=""
  • Videos without captions track

Output

Issues grouped by severity (critical → minor) with:

  • WCAG criterion violated (e.g. 1.4.3, 2.4.4)
  • Component / file path
  • One-line fix
  • Code example of the corrected version

Rules

  • Don't flag known false-positives from React Aria / Headless UI
  • Acknowledge when a check requires runtime verification (e.g. focus order)
← Back to all skillsBuild a custom skill