AugmentClaude
FrontendAccessibility

Accessibility Auditor

By bitjaru· bitjaru/styleseed· 0

Audit components for WCAG accessibility issues and get fixes.

Installation

  1. Make sure Claude is on your device and in your terminal.

    Skills load from ~/.claude/skills/ when Claude Code starts up — so you need it on your machine first. If you don't have it yet, install it once with the command below, then run claude in any terminal to verify.

    One-time setup
    npm i -g @anthropic-ai/claude-code

    Already have it? Skip ahead.

  2. Paste into Claude Code or into your terminal.
    Install
    Sign up to copy
    Sign up free to reveal

    This copies the whole skill folder into ~/.claude/skills/ss-a11y-bitjaru/ — the SKILL.md plus any scripts, reference docs, or templates the skill ships with. Safe default: works for every skill.

    Faster alternative (instruction-only skills)

    Skips the clone and grabs only the SKILL.md file. Don't use this if the skill ships Python scripts, reference markdowns, or asset templates — they won't be downloaded and the skill will fail when it tries to load them.

    Quick install (SKILL.md only)
    Sign up to copy
    Sign up free to reveal
  3. Restart Claude Code.

    Quit and reopen Claude Code (or any other agent that loads from ~/.claude/skills/). New skills are picked up on startup.

  4. Just ask Claude.

    Skills auto-activate when your request matches the skill's description — no slash command needed. Trigger phrases live in the skill's own frontmatter; you can read them in the “What this skill does” section above.

Prefer to read the source first? Open on GitHub.

When Claude uses it

Audit a component or page for accessibility issues and fix them

What this skill does

Accessibility Audit

When NOT to use

  • For general design system compliance review → use /ss-review
  • For Nielsen UX heuristics → use /ss-audit
  • For non-StyleSeed code (no data-slot, no semantic tokens) — assumes StyleSeed conventions
  • For runtime testing — this is a static code audit, not a screen-reader simulation

Target: $ARGUMENTS

Audit Criteria

WCAG 2.2 AA Compliance

1. Perceivable

  • Color contrast: Text must meet 4.5:1 (normal) or 3:1 (large/bold text)
    • Check text-muted-foreground (#717182) on bg-background (#FFFFFF) = 4.6:1 (passes)
    • Check text-brand on white (verify contrast with your skin's brand color)
    • Flag any custom colors that don't meet ratio
  • Non-text contrast: UI controls/graphics must meet 3:1
  • Text alternatives: All <img> need alt, icons need aria-label when meaningful
  • Color independence: Don't convey info by color alone (add icons/text)

2. Operable

  • Touch targets: Minimum 44x44px (min-h-11 min-w-11)
    • Common violation: h-9 (36px) buttons — should be h-11
    • Icon buttons need explicit size: w-11 h-11
  • Keyboard navigation: All interactive elements must be keyboard-accessible
    • Tab order should be logical
    • focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
  • Motion: Animations must respect prefers-reduced-motion 
    @media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

3. Understandable

  • Labels: Form inputs must have visible labels or aria-label
  • Error messages: Form errors must be programmatically associated (aria-describedby)
  • Language: <html lang="en"> (or appropriate language code for your project)

4. Robust

  • Semantic HTML: Use appropriate elements (<button>, <nav>, <main>, <header>)
  • ARIA: Use Radix UI components (they handle ARIA automatically)
  • Roles: Custom interactive elements need proper role attributes

Design System Token Reference

TokenMinimum ContrastNote
--foreground7:1+Body text — verify with your skin
--muted-foreground4.5:1+Secondary text — verify with your skin
--brand4.5:1+Accent — verify with your skin's brand color
--destructive4.5:1+Error — verify with your skin
--success3:1+Large text/icons only — verify with your skin
--warning4.5:1+Warning text — some skins need a darker variant

Output

  1. Issues found: List with severity (Critical/Major/Minor)
  2. Auto-fixes: Apply fixes directly where possible
  3. Manual review needed: Flag items that need human judgment

Related skills

G

Generative Code Art

anthropics

Create algorithmic art with p5.js using randomness and interactive parameters.

OfficialComplete terms in LICENSE.txt
U

UI/UX Pro Max

anthropics

Build production-grade web components and interfaces with distinctive, polished design.

OfficialComplete terms in LICENSE.txt
A

Artifact Theme Toolkit

anthropics

Apply professional color and font themes to slides, docs, and web pages.

OfficialComplete terms in LICENSE.txt
M

Multi-Component Web Artifacts

anthropics

Build complex React artifacts with Tailwind CSS and shadcn/ui components.

OfficialComplete terms in LICENSE.txt