WCAG 2.2 AA Accessibility

Accessibility guidance for web applications targeting WCAG 2.2 Level AA.

Quick Reference

Decision Matrix

Text contrast (WCAG 1.4.3, 1.4.11)

Large text is a point size. 18pt is 24px. Bold 14pt is about 18.5px. Regular text at 18px is still normal text and needs 4.5:1.

If someone has to read placeholder text, it needs the same ratio as normal text. Do not treat an opacity modifier as a passing color until the pair is measured. Token floors, Tailwind failures, and dark mode are in Color Contrast.

Interactive Element Requirements

Screen Reader Essentials

// Visually hidden but screen-reader accessible
<span className="sr-only">Close dialog</span>

// Live regions for dynamic content
<div aria-live="polite" aria-atomic="true">
  {statusMessage}
</div>

// Assertive for errors
<div aria-live="assertive" role="alert">
  {errorMessage}
</div>

Core Principles

1. Perceivable — Content must be presentable in ways all users can perceive (contrast, alt text, captions)
2. Operable — UI must be operable via keyboard, with enough time, no seizure triggers
3. Understandable — Content and UI behavior must be understandable (labels, errors, consistent navigation)
4. Robust — Content must be interpreted reliably by assistive technologies (semantic HTML, valid ARIA)

Hover/Focus Content (WCAG 1.4.13)

Tooltips, popovers, and any content triggered by hover or focus must be:

// Dismissible — user can close without moving pointer (Escape key)
// Hoverable — user can move pointer over the tooltip without it disappearing
// Persistent — stays visible until user dismisses, moves focus, or info becomes invalid

// PASS — Radix UI Tooltip handles all three requirements
<Tooltip>
  <TooltipTrigger>Hover me</TooltipTrigger>
  <TooltipContent>
    This tooltip is dismissible, hoverable, and persistent
  </TooltipContent>
</Tooltip>

// FAIL — disappears when pointer moves away from trigger
<div
  onMouseEnter={() => setShow(true)}
  onMouseLeave={() => setShow(false)}  // Can't hover the tooltip content
>
  {show && <div className="absolute">Tooltip content</div>}
</div>

// PASS — tooltip stays visible when hovering its content
<div
  onMouseEnter={() => setShow(true)}
  onMouseLeave={() => setShow(false)}
>
  Trigger
  {show && (
    <div
      onMouseEnter={() => setShow(true)}   // Keep open when hovering content
      onMouseLeave={() => setShow(false)}
    >
      Tooltip content
    </div>
  )}
</div>

Status Messages (WCAG 4.1.3)

Dynamic status updates must be announced to screen readers without receiving focus:

// Toast notifications
<div role="status" aria-live="polite">
  {toast && <p>{toast.message}</p>}
</div>

// Search result counts
<div role="status" aria-live="polite" aria-atomic="true">
  {results.length} listings found
</div>

// Form submission success
<div role="status">Listing saved successfully</div>

// Error alerts (urgent — use assertive)
<div role="alert">Payment failed. Please try again.</div>

// Loading progress
<div role="status" aria-live="polite">
  Uploading... {progress}% complete
</div>

WCAG 2.2 Complete Success Criteria Coverage

All 55 Level A and AA success criteria are covered across the skill resources:

Principle 1: Perceivable (20 criteria)

Principle 2: Operable (20 criteria)

Principle 3: Understandable (13 criteria)

Principle 4: Robust (2 criteria)

Note: 4.1.1 Parsing was removed in WCAG 2.2 and is no longer required.

When Reviewing Code

Run this checklist on every component:

• Color contrast meets 4.5:1 for text, 3:1 for UI components
• No information conveyed by color alone (use icons, patterns, or text too)
• All interactive elements reachable and operable by keyboard
• Focus order is logical and visible
• Images have meaningful alt text (or alt="" + aria-hidden if decorative)
• Form inputs have associated <label> elements
• Error messages are programmatically associated with inputs (aria-describedby)
• Dynamic content updates announced via aria-live regions
• No content flashes more than 3 times per second
• Text resizes to 200% without loss of content or functionality (1.4.4)
• Content reflows at 320 CSS pixels wide without two-dimensional scrolling, except where the layout needs two dimensions (1.4.10)
• Touch targets are at least 24x24 CSS pixels (44x44 preferred)
• Drag operations have single-pointer alternatives
• Tooltips/popovers are dismissible, hoverable, and persistent
• <html lang> is set correctly
• Page has unique, descriptive <title>
• DOM order matches visual reading order
• Links have descriptive text (no "click here")
• Navigation is consistent across pages
• Paste is not blocked on password/code fields
• prefers-reduced-motion is respected for all animations