Web UI Accessibility Audit

Name: Web UI Accessibility Audit
Brand: AgentVolt
Availability: InStock

Run any web page or component through 100 established rules covering accessibility, layout, semantics, and performance.

Designp4

by AgentVoltv1.0.0Published 1y ago1 install

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 Audit

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

name: web-ui-accessibility-audit description: Run any web page or component through 100 established rules covering accessibility, layout, semantics, and performance. Use when working on web ui accessibility audit.

Web UI Accessibility Audit

Wraps Vercel Labs' web design guidelines skill. Reads source (not screenshots), returns file-and-line violations, and prescribes fixes. Focused on shipped codebases rather than net-new design. Use on any production UI before a launch or after a major refactor.

What you get

Line-referenced audit report
WCAG mapping
Performance flags
Ordered fix plan
Severity ranking
Automated patches where safe

Customize your output

WCAG level: A, AA, AAA
Component scope: page, component, whole site
Framework: React, Vue, Svelte, plain HTML
Auto-patch: yes, ask, no
Include performance: yes, no
Report format: markdown, HTML

Example output

'Audit flagging 12 contrast failures, 4 missing aria-labels, and a layout-shift pattern with patches.'

Best for

Front-end teams shipping to production.

Note: Not meant to produce new UI. It critiques existing. High confidence.

SKILL.md preview

SKILL.md

---
name: web-ui-accessibility-audit
description: Use this skill on a production web UI before a launch or after a major refactor, checking source code against established accessibility, layout, and semantics rules.
version: 1.0.0
category: Design
author: AgentVolt
license: proprietary
tags:
  - design
  - p4
---

# Web UI Accessibility Audit

Runs a web page or component through a comprehensive rule set covering accessibility, layout, semantics, and performance, reading source code rather than screenshots.

## When to use

… (sign up to view the full skill)