# Accessibility — WCAG Fundamentals for Designers

<!-- hint:slides topic="Accessibility: WCAG POUR principles, conformance levels, color contrast, keyboard navigation, semantic HTML, and ARIA" slides="6" -->

## Why Accessibility Matters

Accessibility (a11y) ensures products work for people with disabilities—including motor, cognitive, visual, and auditory. It's also:

- **Legal** — Laws (ADA, Section 508, EU accessibility acts) require compliance.
- **Ethical** — Equal access is a right.
- **Business** — Larger audience, better SEO, often better UX for everyone.

## WCAG POUR Principles

WCAG 2.1 organizes guidelines under four principles (POUR):

```mermaid
flowchart TD
    P[WCAG 2.1]
    P --> P1[Perceivable]
    P --> P2[Operable]
    P --> P3[Understandable]
    P --> P4[Robust]
    P1 --> P1A[Info & UI presentable to users]
    P2 --> P2A[UI operable by all]
    P3 --> P3A[Info & UI understandable]
    P4 --> P4A[Content interpretable by assistive tech]
```

| Principle | Meaning |
|-----------|---------|
| **Perceivable** | Information and UI must be presentable to users in ways they can perceive (text alternatives, captions, color not sole indicator). |
| **Operable** | UI must be operable by everyone (keyboard, enough time, no seizure-inducing content). |
| **Understandable** | Content and operation must be understandable (readable, predictable, input assistance). |
| **Robust** | Content must be robust enough for assistive technologies (valid markup, correct roles). |

## Conformance Levels

| Level | Description |
|-------|-------------|
| **A** | Minimum—must satisfy to be accessible at all. |
| **AA** | Target for most sites—addresses major barriers. Legal compliance often requires AA. |
| **AAA** | Highest—enhanced accessibility. Not always achievable for all content. |

**Practical target:** AA for text, UI, and media. Consider AAA for critical flows.

## Color Contrast

- **Normal text:** 4.5:1 contrast ratio (AA); 7:1 for AAA.
- **Large text (18pt+ or 14pt+ bold):** 3:1 (AA); 4.5:1 (AAA).
- **UI components:** 3:1 against adjacent colors.

Use tools like WebAIM Contrast Checker or browser DevTools to verify.

## Keyboard Navigation

- All interactive elements must be reachable via **Tab**.
- Focus order should follow visual order.
- Focus must be visible (focus ring).
- No keyboard traps.
- Skip links and landmarks help keyboard users navigate quickly.

## Screen Reader Basics

Screen readers (NVDA, JAWS, VoiceOver) announce:
- Headings and structure
- Links and buttons
- Form labels and errors
- Live regions (dynamic updates)

**Design implications:** Use semantic HTML, meaningful labels, and avoid "click here."

## Semantic HTML

Use the right element for the job:

| Use | Element |
|-----|---------|
| Headings | `<h1>`–`<h6>` |
| Links | `<a href="...">` |
| Buttons | `<button>` |
| Forms | `<label>`, `<input>`, `<select>` |
| Landmarks | `<header>`, `<main>`, `<nav>`, `<footer>`, `<article>`, `<aside>` |

Semantic HTML gives structure without extra ARIA in many cases.

## ARIA: Roles, States, and Properties

ARIA (Accessible Rich Internet Applications) fills gaps when HTML isn't enough:

- **Roles** — `role="button"`, `role="dialog"`, `role="tablist"`
- **States** — `aria-expanded`, `aria-selected`, `aria-checked`
- **Properties** — `aria-label`, `aria-describedby`, `aria-labelledby`

### When NOT to Use ARIA

- Prefer native HTML when it exists (`<button>` > `role="button"` on a `<div>`).
- Don't use ARIA to fix bad semantics—fix the HTML first.
- Avoid redundant ARIA (e.g., `aria-label` on a visible `<button>` with text—usually unnecessary).

## Focus Management

- **Modals:** Trap focus inside; return focus on close.
- **Dynamic content:** Move focus to new content when it appears (e.g., after form submit).
- **Single-page apps:** Ensure route changes update announcements (e.g., `aria-live` or heading updates).

## Alt Text Guidelines

- **Informative images:** Describe the content or function. Be concise.
- **Decorative images:** `alt=""` (empty) so screen readers skip them.
- **Complex images:** Provide longer description (e.g., `longdesc` or nearby text).

## Testing Tools

| Tool | What It Helps With |
|------|--------------------|
| **axe DevTools** | Automated WCAG audits in browser |
| **Lighthouse** | Accessibility audit + performance |
| **WAVE** | Visual feedback on a11y issues |
| **Screen readers** | NVDA (Windows), VoiceOver (macOS/iOS), TalkBack (Android) |

**Rule:** Automated tools catch ~30% of issues. Manual testing with keyboard and screen reader is essential.

## Summary

Design for POUR: perceivable, operable, understandable, robust. Target WCAG AA. Ensure color contrast (4.5:1), keyboard access, semantic HTML, and sensible ARIA. Test with real users and assistive tech—automated tools are only the first step.