WCAG AA compliance scanning for missing alt text, keyboard navigation, and design consistency

Accessibility Audit Agent

The Problem

1 in 4 adults has a disability. Inaccessible websites exclude millions of users and expose companies to lawsuits. Missing alt text means screen readers describe images as "image_1234.png". Missing keyboard navigation locks out users who cannot use a mouse. WCAG compliance audits cost $5,000-$15,000 per engagement — and most teams skip them entirely.

The Solution

UX Sally scans your HTML, JSX, and Vue templates for WCAG AA violations. It finds every image without alt text, every button without a label, every form without proper ARIA attributes — and generates the exact fixes. Your WCAG score goes from 62 to 95 in one pass.

How It Works

Before Agent

Team ships UI → accessibility complaint filed → hire consultant 
($10,000+) → 3-week audit → 200-page report → developer spends 
2 weeks fixing → re-audit needed → another $5,000 
(2 months, $15,000+)

After Agent

Developer writes component → runs ux-sally → finds 12 missing 
alt texts + 3 keyboard traps in 8 seconds → generates fixes → 
developer applies → WCAG AA compliant before merge (20 minutes total)

What It Catches

✅ Missing Alt Text — <img> tags without alt attribute
✅ Empty Alt on Informative Images — decorative alt on meaningful images
✅ Missing Form Labels — inputs without associated <label> or aria-label
✅ Keyboard Traps — focus stuck in modals or dropdowns
✅ Missing Skip Navigation — no "skip to content" link
✅ Low Color Contrast — text below 4.5:1 ratio (AA standard)
✅ Missing ARIA Roles — interactive elements without role attribute
✅ Auto-playing Media — video/audio without pause control
✅ Missing Focus Indicators — outline:none without replacement
✅ Incorrect Heading Order — h1 → h3 (skipping h2)

Real Example

Input (React component with accessibility issues):

jsx

function ProductCard({ product }) {
  return (
    <div onClick={() => navigate(`/product/${product.id}`)}>
      <img src={product.image} />
      <span style={{ color: '#999', fontSize: '12px' }}>{product.name}</span>
      <div>{product.price}</div>
      <div className="btn" onClick={addToCart}>Add to Cart</div>
    </div>
  );
}

Agent Output:

🔴 CRITICAL: Image without alt text (line 4)
   Screen readers will announce "image" with no context
   Fix: <img src={product.image} alt={product.name} />

🔴 CRITICAL: Clickable div without keyboard access (line 3)
   Cannot be reached with Tab key or activated with Enter
   Fix: Use <a href={`/product/${product.id}`}> or add 
   role="link" tabIndex={0} onKeyDown={handleEnter}

🟡 WARNING: Low color contrast (line 5)
   #999 on white = 2.8:1 ratio (needs 4.5:1 for AA)
   Fix: Use #595959 or darker for 4.5:1 minimum

🔴 CRITICAL: Button without semantic element (line 7)
   <div> is not recognized as interactive by assistive tech
   Fix: <button onClick={addToCart}>Add to Cart</button>

Found: 4 issues (3 critical, 1 warning)
WCAG Score: 62 → 95 after fixes

Impact Numbers

| Metric | Before | After | |--------|--------|-------| | WCAG AA score | 62 | 95 | | Images without alt text | 12 per page avg | 0 | | Keyboard-inaccessible elements | 5-8 per page | 0 | | Audit cost | $5,000-$15,000 | $0.01 per scan | | Time to compliance | 2 months | 20 minutes |

Getting Started

bash

agentbox pull ux-sally
agentbox ux-sally "audit accessibility of src/components/"

Accessibility Audit — UX Sally