Ui Ux Expert

# Accessibility Implementation Guide

> **Reference Document**: Comprehensive WCAG 2.2 implementation guide, screen reader testing procedures, and keyboard navigation patterns for the UI/UX Expert skill.

---

## Table of Contents

1. [WCAG 2.2 Overview](#wcag-22-overview)
2. [Complete WCAG 2.2 Success Criteria](#complete-wcag-22-success-criteria)
3. [Color & Contrast Guidelines](#color--contrast-guidelines)
4. [Keyboard Navigation Patterns](#keyboard-navigation-patterns)
5. [Screen Reader Implementation](#screen-reader-implementation)
6. [ARIA Patterns & Best Practices](#aria-patterns--best-practices)
7. [Form Accessibility](#form-accessibility)
8. [Testing with Assistive Technologies](#testing-with-assistive-technologies)
9. [Common Accessibility Violations](#common-accessibility-violations)
10. [Accessibility Checklist](#accessibility-checklist)

---

## 1. WCAG 2.2 Overview

### The Four Principles (POUR)

**Perceivable**: Information and user interface components must be presentable to users in ways they can perceive.
- If they can't perceive it, they can't use it
- Provide text alternatives, captions, adaptable content, distinguishable elements

**Operable**: User interface components and navigation must be operable.
- Users must be able to operate the interface
- Keyboard accessible, enough time, no seizures, navigable, input modalities

**Understandable**: Information and the operation of user interface must be understandable.
- Users must understand the information and interface operation
- Readable, predictable, input assistance

**Robust**: Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
- Must work with current and future tools
- Compatible with assistive technologies

---

### Conformance Levels

**Level A** (Minimum):
- Essential accessibility features
- Basic support for assistive technologies
- Legal minimum in many jurisdictions

**Level AA** (Recommended):
- Addresses the biggest and most common barriers
- Industry standard for most organizations
- Required by most accessibility laws (ADA, Section 508)

**Level AAA** (Enhanced):
- Highest level of accessibility
- Not required for entire sites
- May not be achievable for all content

**Recommendation**: Aim for Level AA compliance across all content, with AAA where feasible.

---

## 2. Complete WCAG 2.2 Success Criteria

### Principle 1: Perceivable

#### 1.1 Text Alternatives

**1.1.1 Non-text Content (Level A)**:
- All non-text content has a text alternative
- Images: Use alt text describing the image
- Decorative images: Use empty alt (`alt=""`)
- Complex images: Provide long descriptions

```html
<!-- Informative image -->
<img src="chart.png" alt="Sales increased 25% in Q3 2025">

<!-- Decorative image -->
<img src="divider.png" alt="" role="presentation">

<!-- Complex image with long description -->
<img src="complex-diagram.png" alt="System architecture diagram"
     aria-describedby="diagram-desc">
<div id="diagram-desc">
  The diagram shows three tiers: presentation layer with React components,
  business logic layer with Node.js services, and data layer with PostgreSQL.
</div>

<!-- Icons with labels -->
<button>
  <svg aria-hidden="true">...</svg>
  <span>Save</span>
</button>
```

---

#### 1.2 Time-based Media

**1.2.1 Audio-only and Video-only (Level A)**:
- Provide transcripts for audio-only content
- Provide audio descriptions or transcripts for video-only

**1.2.2 Captions (Level A)**:
- Provide captions for all prerecorded video with audio
- Include speech and important sounds

**1.2.3 Audio Description or Media Alternative (Level A)**:
- Provide audio description or full text alternative for video

**1.2.4 Captions (Live) (Level AA)**:
- Provide live captions for live audio content

**1.2.5 Audio Description (Level AA)**:
- Provide audio description for all prerecorded video

```html
<video controls>
  <source src="tutorial.mp4" type="video/mp4">
  <track