1

    Accessibility Auditor (WCAG 2.2)

    by rayyer

    Find accessibility barriers and WCAG 2.2 AA failures in web and mobile UI code — with file:line, the exact criterion, and a fix

    Updated May 2026
    Security scanned
    One-time purchase
    Vue

    $10

    One-time purchase

    30-day refund guarantee

    Secure checkout via Stripe

    Included in download

    • Audit a React or Vue app for WCAG 2.2 AA failures before launch
    • Find icon buttons and form inputs with no accessible name for screen readers
    • file_write, file_read automation included
    • Ready for Vue
    • Instant install

    Sample Output

    A real example of what this skill produces.

    Detected: Web — Next.js 14 (React, Tailwind). Legal scope: EU Accessibility Act / EN 301 549 + ADA. Target: WCAG 2.2 AA.

    Writing the full report to ACCESSIBILITY_AUDIT.md.

    Summary: 12 findings — 3 Critical, 4 High, 3 Medium, 2 Low. Statically: not conformant.

    Most impactful: your icon-only search and "add to cart" buttons have no accessible name, so screen-reader users hear only "button" and literally can't shop. Add aria-labels and hide the decorative icons. Same severity: the currency dropdown is a div-with-onClick that keyboard users can't operate — it blocks checkout.

    High: body text at #949494 on white is 2.9:1 (fails 4.5:1); a global outline: none removes focus indicators; checkout inputs use placeholders instead of real labels; zoom is disabled in the viewport meta.

    First moves: fix the three Criticals (search, currency, form labels), restore visible focus, bump body contrast. The full report has file:line, the WCAG criterion, and a fix for each, plus a "Verify manually" list for screen-reader checks.

    Static audit, not a full conformance evaluation — confirm the manual items with a screen reader before claiming EAA conformance.

    Screenshots

    About This Skill

    Accessibility lawsuits and the EU Accessibility Act (in force since June 28, 2025) made a11y a legal requirement, not a nice-to-have. This skill audits your UI code for the barriers that exclude users with disabilities and fail WCAG 2.2 AA — before they reach users or regulators.

    What it checks

    Framework-aware checks for web (React, Vue, Angular, Svelte, plain HTML) and mobile (React Native, Flutter, native iOS/SwiftUI, native Android/Compose):
    • Names & labels — icon-only buttons with no accessible name, unlabeled form inputs, images missing alt/labels (the most common blocker)
    • Keyboard & focus — mouse-only custom widgets, keyboard traps, removed focus indicators (`outline: none`), bad tab order
    • Color & contrast — text below 4.5:1 (computed when colors are readable), meaning conveyed by color alone
    • Structure — heading order, landmarks, semantic HTML vs div soup
    • Forms — placeholder-as-label, errors shown only in color or not associated with fields
    • WCAG 2.2 additions — target size (24×24), focus not obscured, dragging alternatives, accessible authentication (paste-blocking on OTP, CAPTCHAs)
    • Mobile specifics — accessibilityLabel/contentDescription/Semantics, touch targets, dynamic type, VoiceOver/TalkBack state and announcements, reduced motion

    Legal scope, automatically

    Detects your target markets and cites the right regime — EU Accessibility Act / EN 301 549, ADA, Section 508, AODA — while keeping the technical target at WCAG 2.2 AA (the strict common denominator). It even distinguishes which criteria are required today under EU's WCAG 2.1 reference vs the newer 2.2 additions.

    How it works

    1. Detects platform, framework, and legal scope.
    2. Maps every UI surface with a11y obligations — images, controls, forms, structure, color, focus, motion, auth.
    3. Audits against WCAG 2.2 AA with framework-idiomatic patterns.
    4. Writes ACCESSIBILITY_AUDIT.md graded by user impact (Critical/High/Medium/Low) — each finding leads with who is blocked and from what, plus file:line, the exact WCAG criterion, and a concrete fix. Runtime-only checks go in a "Verify manually" section with steps.

    Why buy it

    • Severity by user impact — "screen-reader users can't checkout" beats an abstract rule number; you fix what actually matters first
    • Concrete, framework-correct fixes — real JSX/SwiftUI/Compose snippets, not "add a label"
    • Computes contrast — states the actual ratio (e.g. "#949494 on #fff = 2.9:1, fails") when colors are resolvable
    • Honest about static limits — routes screen-reader/keyboard/zoom checks to "Verify manually" instead of faking pass/fail
    • Complements axe/Lighthouse — catches the context they miss (is the alt text meaningful? is the focus order logical?)
    • Agent-agnostic — Claude Code, Cursor, Codex CLI, Copilot, Gemini CLI

    Who it's for

    • Teams shipping to the EU (EAA), US (ADA/508), or Canada (AODA)
    • Anyone who got a demand letter or is preparing a VPAT/ACR
    • Web and mobile devs who want a11y caught in code review, not in production

    Limitations

    Static code audit, not a full conformance evaluation. Some criteria need manual testing with assistive technology (it tells you which). Doesn't run axe/Lighthouse, doesn't produce a binding VPAT/ACR, doesn't redesign your UI.

    📖 Learn more: Best Frontend & Design Skills for Claude Code →

    Reviews

    No reviews yet - be the first to share your experience.

    Only users who have downloaded or purchased this skill can leave a review.

    Security Scanned

    Passed automated security review

    Permissions

    Write Files
    Read Files

    File Scopes

    **/*.{tsx,jsx,ts,js,vue,svelte,astro}
    **/*.{html,htm}
    **/*.{css,scss,sass,less}
    **/*.{swift,kt,java,dart}
    **/res/layout/**
    **/*.xib
    **/*.storyboard
    **/tailwind.config.{js,ts}
    **/theme*.{js,ts,json}
    **/package.json
    **/pubspec.yaml
    ACCESSIBILITY_AUDIT.md

    Static analysis only. Reads UI source (components, templates, styles, native layouts) and theme/color tokens to detect accessibility barriers and compute contrast where colors are resolvable. Writes a single file (ACCESSIBILITY_AUDIT.md). No network, no shell, no browser, no environment reads. It does not run axe/Lighthouse or any browser; runtime-only checks are listed for manual verification.

    Tags

    accessibility
    wcag-compliance
    frontend-dev
    mobile-dev
    legal-compliance
    a11y
    wcag
    ada
    eaa

    No runtime dependencies. Works on web (React, Vue, Angular, Svelte, HTML/CSS) and mobile (React Native, Flutter, native iOS/SwiftUI, native Android/Compose). Targets WCAG 2.2 AA. Compatible with any agent supporting the SKILL.md standard.

    Creator

    rayyer

    Frequently Asked Questions

    Learn More About AI Agent Skills

    More Premium Skills

    designing-hybrid-context-layers

    Architects the right retrieval strategy for every query — teaching your agent when to use RAG, a knowledge graph, or a temporal index instead of defaulting to vector search for everything.

    $1012 installs

    consumer-motivation-analyzer

    Go beyond surface-level feedback to uncover the psychological drivers and hidden motivations behind buyer behavior.

    $199 installs

    diagnosing-rag-failure-modes

    RAG fails quietly. It retrieves documents, returns confident-looking answers, and misses the question entirely — because the question required connecting facts across documents, reasoning about sequence, or tracing causation. This skill gives you a five-question diagnostic checklist that classifies any failing query as either RAG-safe or structurally RAG-incompatible, then maps it to the specific failure pattern and the architectural fix that resolves it.

    $105 installs

    keyword-research

    Transform URLs or product lists into SEO keyword research packs with Google Ads data and intent-based clustering.

    $75 installs

    $10