Back to marketplace

Web UI Accessibility Code Audit with WCAG Fixes

Line-by-line audit of UI source for accessibility, focus, layout shift, and UX perf, mapped to WCAG 2.2 and ranked with code fixes.

Development / Frontendaccessibilitywcag
by AgentVoltv1.0.0
Free to sign up · every skill included with AgentVolt Pro

Before & after

Same prompt, same agent — the only difference is the skill.

Prompt“Audit the accessibility of our new checkout flow”
Beforegeneric AI agent
I can review your checkout flow for accessibility issues. To do a thorough audit, I'd need to see the actual code or ideally navigate through the flow myself to understand the structure. What framework are you using - React, Vue, vanilla HTML? Are there specific concerns you have about keyboard navigation, color contrast, or screen reader support? What's your target WCAG level - A, AA, or AAA? Do you want me to look at performance issues too, or just accessibility? Once I understand your stack and see the code, I can point out common issues, but a full audit would involve checking against many different guidelines.
Afterwith Web UI Accessibility Code Audit with WCAG Fixes
ACCESSIBILITY AUDIT - CHECKOUT FLOW

SCAN METADATA:
  Framework: React 18
  Pages scanned: 4 (cart, shipping, payment, confirmation)
  Issues found: 18 (5 critical, 7 high, 6 medium)
  WCAG Target: AA
  Compliance: Currently 42% (target: 100% for AA)

═════════════════════════════════════════════════════════
CRITICAL ISSUES (block accessibility)
═════════════════════════════════════════════════════════

1. MISSING FORM LABELS
   File: pages/checkout/payment.tsx, line 84-92
   Element: Credit card input
   Issue: No <label> element, no aria-label
   Impact: Screen reader users don't know what field they're in
   WCAG violation: 1.3.1 (Info and Relationships)
   Fix: Add <label htmlFor="card-number">Card Number</label>
   Priority: CRITICAL (must fix before launch)
   Time estimate: 15 minutes

2. KEYBOARD TRAP IN PAYMENT MODAL
   File: components/PaymentModal.tsx, line 45-120
   Issue: Tab focus cannot escape modal (no Escape key handler)
   Impact: Keyboard-only users stuck
   WCAG violation: 2.1.2 (No Keyboard Trap)
   Fix: Add onKeyDown handler for Escape, return focus to opener
   Code pattern: if (event.key === 'Escape') { closeModal(); }
   Time estimate: 30 minutes

3. COLOR CONTRAST FAILURE
   File: styles/checkout.css, lines 234, 456
   Element: Disabled button text (gray text on light gray button)
   Current ratio: 2.1:1 | Required: 4.5:1 (AA)
   Impact: Low vision users cannot read disabled states
   WCAG violation: 1.4.3 (Contrast - Minimum)
   Fix: Change text color from #999999 to #555555
   Time estimate: 5 minutes

4. MISSING ALT TEXT ON PRODUCT IMAGES
   File: components/OrderSummary.tsx, line 67-71
   Issue: <img src="product.png" /> with no alt attribute
   Impact: Screen reader only says "image" (no context)
   WCAG violation: 1.1.1 (Non-text Content)
   Count: 3 product images in flow
   Fix: Add alt="Blue running shoe, size 10"
   Time estimate: 10 minutes

5. ARIA ROLE MISMATCH
   File: pages/checkout/cart.tsx, line 156
   Element: <div role="button" onClick={removeItem}>
   Issue: Divs with role=button don't respond to keyboard (Enter key)
   Impact: Keyboard users cannot interact with delete buttons
   WCAG violation: 2.1.1 (Keyboard)
   Fix: Replace with <button> element OR add onKeyDown handler
   Time estimate: 45 minutes (requires state management review)

═════════════════════════════════════════════════════════
HIGH PRIORITY ISSUES (impair accessibility)
═════════════════════════════════════════════════════════

6. MISSING HEADING HIERARCHY
   File: pages/checkout/shipping.tsx (entire page)
   Issue: Page starts with <h2>, skips <h1>
   Impact: Screen reader users lose page structure
   WCAG violation: 1.3.1 (Info and Relationships)
   Fix: Add proper <h1> before shipping form section

7. AUTO-FOCUSING FORM FIELD
   File: components/ShippingForm.tsx, line 12
   Issue: First input autoFocus={true} on page load
   Impact: Blind users not warned of auto-focus, keyboard focus changed unexpectedly
   WCAG violation: 3.2.5 (Change on Request)
   Fix: Remove autoFocus attribute, let user tab to first field

8. NO SKIP LINK
   File: pages/checkout/layout.tsx
   Issue: No "Skip to main content" link at top
   Impact: Keyboard users must tab through header 15+ times
   WCAG violation: 2.4.1 (Bypass Blocks)
   Fix: Add hidden skip link, revealed on Tab key press
   Time estimate: 1 hour

9. DYNAMIC ERROR MESSAGES
   File: components/FormValidator.tsx, line 89
   Issue: Error message appears without aria-live announcement
   Impact: Screen reader doesn't alert user to new error
   WCAG violation: 4.1.3 (Status Messages)
   Fix: Wrap error in <div aria-live="polite" aria-atomic="true">
   Time estimate: 30 minutes

10. MISSING LANG ATTRIBUTE
    File: public/index.html (root)
    Issue: No <html lang="en"> declared
    Impact: Screen reader uses default language
    WCAG violation: 3.1.1 (Language of Page)
    Fix: Add lang="en" to <html> tag
    Time estimate: 5 minutes

11. INTERACTIVE ELEMENTS TOO SMALL
    File: styles/buttons.css, line 34
    Element: "Update Quantity" buttons
    Current size: 28x28px
    WCAG recommendation: 44x44px minimum
    Impact: Motor control impaired users have difficulty clicking
    WCAG violation: 2.5.5 (Target Size)
    Fix: Increase padding to 12px (results in 44x44px)
    Time estimate: 10 minutes

12. FORM SUBMISSION WITHOUT CONFIRMATION
    File: pages/checkout/payment.tsx, line 212
    Issue: Form submits on blur of last field
    Impact: Keyboard users accidentally submit incomplete form
    WCAG violation: 3.3.4 (Error Prevention)
    Fix: Require explicit button click to submit
    Time estimate: 1 hour

═════════════════════════════════════════════════════════
MEDIUM PRIORITY ISSUES
═════════════════════════════════════════════════════════

13-18: [6 additional issues including heading nesting, link text clarity, focus indicators, etc.]
    Average fix time: 20-45 minutes each

═════════════════════════════════════════════════════════
PERFORMANCE FINDINGS
═════════════════════════════════════════════════════════

Core Web Vitals impact on accessibility:
  • LCP: 2.8s (acceptable, doesn't block accessibility)
  • CLS: 0.18 (problematic - form fields shift during validation)
  • FID: 120ms (acceptable)

Recommendation: Fix CLS by pre-allocating space for error messages

═════════════════════════════════════════════════════════
AUTOMATIC PATCHES APPLIED
═════════════════════════════════════════════════════════

Safe auto-fixes (already applied to feature/accessibility branch):
  ✓ Added html lang="en"
  ✓ Fixed color contrast on disabled buttons
  ✓ Added missing alt text to product images
  ✓ Increased button sizes from 28x28 to 44x44
  ✓ Added skip link component
  ✓ Wrapped error messages with aria-live

Branch: feature/accessibility | Ready for PR review

═════════════════════════════════════════════════════════
REMEDIATION PLAN
═════════════════════════════════════════════════════════

Phase 1 (Day 1 - CRITICAL fixes): 2 hours
  • Form labels (#1)
  • Keyboard trap (#2)
  • Color contrast (#3)
  • Alt text (#4)
  • Button roles (#5)

Phase 2 (Day 2 - HIGH fixes): 4 hours
  • Items 6-12 (heading hierarchy, skip link, error handling, form submission)

Phase 3 (Day 3 - MEDIUM fixes): 3 hours
  • Items 13-18
  • Performance optimization (CLS fix)

Total remediation time: 9 hours
Estimated completion: 3 days at current team velocity

TESTING BEFORE DEPLOY:
  ✓ Screen reader test (NVDA, JAWS)
  ✓ Keyboard-only navigation (Tab, Enter, Escape)
  ✓ Contrast checker (all text elements)
  ✓ Automated tools (Axe DevTools, Lighthouse)
  ✓ Manual user testing with accessibility consultant

RESULTING WCAG SCORE:
  After fixes: 94% AA compliance (target achieved)
  AAA assessment: 71% (3 issues to reach AAA, optional)

DOCUMENTATION:
  • Accessibility checklist added to code review template
  • Component accessibility guide drafted
  • Training session for frontend team scheduled

About this skill

Your Lighthouse score is green, but keyboard users still can't open the filter menu, and the modal drops focus somewhere off-screen when it closes. This skill reads your component source the way a screen reader and a keyboard will. It points to the exact line that breaks, says what the user actually experiences, and gives you code that fixes it.

What it does

  • Works out the role, name, and state of every interactive element, and catches icon-only buttons with no name, placeholder-only labels, and aria-labels that break voice control
  • Finds div-with-onClick controls, redundant or harmful ARIA, and the wrong pattern for the job (menu vs disclosure, link vs button)
  • Checks focus handling in dialogs, dropdowns, and SPA route changes: focus moving in, staying trapped, returning to the trigger, and not being hidden by sticky headers
  • Maps each finding to a WCAG 2.2 criterion, including the newer ones (Focus Not Obscured, Target Size, Label in Name)
  • Flags layout shift, reflow at 320px, text-spacing clipping, and motion issues that real users notice
  • Ranks findings from Blocker to Minor by task impact, and puts shared components first so one fix covers every place they're used

What you get

A findings table with file:line, severity, WCAG criterion, and fix. You also get drop-in patches for every Blocker and Serious issue, plus a short list of what still needs a runtime check with a keyboard, a screen reader, or zoom.

Best for

Front-end engineers and design system teams reviewing React, Vue, Svelte, or HTML components before a launch or after a big refactor.

SKILL.md preview

SKILL.md
---
name: web-ui-accessibility-code-audit
description: Audits web UI source code (JSX/TSX, Vue, Svelte, HTML, CSS) for accessibility, semantics, keyboard and focus behavior, layout stability, and performance that users can feel. Returns file:line findings mapped to WCAG 2.2, ranked by whether real users can finish the task, with drop-in code fixes. Use when the user says "audit this component for accessibility", "is this page WCAG AA", "review my UI before launch", "my modal loses focus when it closes", "screen reader just says 'button' with no name", "keyboard users can't use our dropdown", "our page jumps around while loading".
---

# Web UI Accessibility Code Audit

… (sign up to view the full skill)
Sign up to view, copy, and install the full skill

More development skills

View all Development skills →

Frontend Component UX and Accessibility Review

Severity-ranked fixes with code for UI components: states, keyboard, focus, ARIA, touch targets, contrast, and responsive breakage.

Development

Three.js Click-to-Learn 3D Game Builder

Build click-to-learn 3D games in Three.js: TSL materials, reliable object picking, and an accessible quiz overlay fed by content data.

Development

Angular Standalone Features and State Architecture

Build Angular standalone features with lazy routes, scoped state, safe RxJS flows, and targeted tests.

Development

shadcn/ui Component Building and Theming

Build, theme, and debug shadcn/ui components the way the library is designed to work, with Tailwind v3 and v4 theming handled correctly.

Development