Accessibility & WCAG Compliance

Provides WCAG 2.1 Level AA compliance patterns for accessible web development including semantic HTML, ARIA implementation, keyboard navigation, and screen reader compatibility.

Description

This skill teaches accessibility agents how to evaluate and implement WCAG 2.1 Level AA standards across web applications. It covers the four POUR principles (Perceivable, Operable, Understandable, Robust), ARIA attributes, keyboard navigation patterns, color contrast requirements, and assistive technology compatibility.

When to Use

• Reviewing UI components for accessibility compliance
• Implementing keyboard navigation
• Adding ARIA labels and roles
• Evaluating color contrast ratios
• Testing screen reader compatibility
• Conducting WCAG 2.1 audits

Entry Points

Trigger Phrases: "accessibility review", "WCAG compliance", "screen reader", "keyboard navigation", "ARIA", "a11y audit"

Context Patterns: UI component implementations, form designs, interactive widgets, color scheme changes, content structure updates

Core Knowledge

POUR Principles

Perceivable

• Text alternatives: Alt text for images, transcripts for audio
• Time-based media: Captions for videos, audio descriptions
• Adaptable: Semantic HTML, proper heading hierarchy
• Distinguishable: Color contrast 4.5:1 (text), 3:1 (UI components)

Operable

• Keyboard accessible: All functionality via keyboard, no keyboard traps
• Enough time: Adjustable time limits, pause/stop animations
• Seizures: No flashing content >3 times per second
• Navigable: Skip links, focus indicators, meaningful link text

Understandable

• Readable: Language declared, simple language where possible
• Predictable: Consistent navigation, no unexpected context changes
• Input assistance: Error identification, labels/instructions, error suggestions

Robust

• Compatible: Valid HTML, proper ARIA usage, assistive tech support

ARIA Attributes

Color Contrast Requirements

WCAG 2.1 Level AA:

• Normal text: 4.5:1 minimum
• Large text (18pt+ or 14pt+ bold): 3:1 minimum
• UI components and graphics: 3:1 minimum

Tools: Chrome DevTools (Inspect > Accessibility), WebAIM Contrast Checker

Keyboard Navigation Patterns

Accessibility Review Template

## Accessibility Review: [Component]

### WCAG 2.1 Level AA Compliance

#### Perceivable
- [ ] Alt text for images (1.1.1)
- [ ] Color contrast ≥4.5:1 for text (1.4.3)
- [ ] Semantic HTML structure (1.3.1)
- [ ] Content not solely conveyed by color (1.4.1)

#### Operable
- [ ] All functionality keyboard accessible (2.1.1)
- [ ] No keyboard traps (2.1.2)
- [ ] Visible focus indicators (2.4.7)
- [ ] Skip navigation links (2.4.1)

#### Understandable
- [ ] Language declared (lang="en") (3.1.1)
- [ ] Labels for form inputs (3.3.2)
- [ ] Error identification and suggestions (3.3.1, 3.3.3)
- [ ] Consistent navigation (3.2.3)

#### Robust
- [ ] Valid HTML (4.1.1)
- [ ] ARIA attributes used correctly (4.1.2)
- [ ] Name, role, value for custom controls (4.1.2)

### Findings

#### BLOCKER: [Issue]
- **WCAG Criterion:** [Number and description]
- **Impact:** [Screen readers, keyboard users, low vision]
- **Location:** [Component:line]
- **Fix:** [Specific recommendation]

### Screen Reader Testing
- **NVDA:** [Pass/Fail with notes]
- **JAWS:** [Pass/Fail with notes]
- **VoiceOver:** [Pass/Fail with notes]

### Verdict
- [ ] APPROVED (WCAG 2.1 AA compliant)
- [ ] MINOR_ISSUES (usable, improvements recommended)
- [ ] MAJOR_ISSUES (blocks compliance, must fix)

Examples

Example: Inaccessible Form

❌ Before (Non-compliant):

<form>
  <input type="text" placeholder="Username">
  <input type="password" placeholder="Password">
  <div style="color: red;">Invalid credentials</div>
  <span onclick="submit()">Submit</span>
</form>

Issues:

1. No labels (WCAG 3.3.2)
2. Error not associated with input (WCAG 3.3.1)
3. Submit not keyboard accessible (WCAG 2.1.1)
4. No focus indicators

✅ After (Compliant):

<form>
  <div>
    <label for="username">Username</label>
    <input 
      id="username" 
      type="text" 
      aria-describedby="username-error"
      aria-invalid="true"
    >
    <span id="username-error" role="alert">
      Invalid credentials. Please check your username and password.
    </span>
  </div>
  
  <div>
    <label for="password">Password</label>
    <input 
      id="password" 
      type="password"
      aria-describedby="password-hint"
    >
    <span id="password-hint">
      Must be at least 8 characters
    </span>
  </div>
  
  <button type="submit">Submit</button>
</form>

<style>
  input:focus, button:focus {
    outline: 2px solid blue;
    outline-offset: 2px;
  }
</style>

Improvements:

• Explicit <label> elements (WCAG 3.3.2) ✓
• aria-invalid and aria-describedby for errors (WCAG 3.3.1) ✓
• <button> for keyboard accessibility (WCAG 2.1.1) ✓
• Visible focus indicators (WCAG 2.4.7) ✓

References

• WCAG 2.1: https://www.w3.org/WAI/WCAG21/quickref/
• ARIA Practices: https://www.w3.org/WAI/ARIA/apg/
• Testing Tools: axe DevTools, WAVE, Pa11y