# Accessibility Exercises

## Exercise 1: Contrast Audit

**Task:** Audit a real site or design file. For body text, headings, and at least two buttons/links, measure contrast ratios. Document passes (AA) and failures. For each failure, propose a fix.

**Validation:**
- [ ] At least 5 elements measured
- [ ] Contrast ratios recorded (e.g., 4.2:1 fails; 4.5:1 passes)
- [ ] Each failure has a concrete fix (color change, size change, or background)
- [ ] Re-measurement shows passes after fixes

**Hints:**
1. Use WebAIM Contrast Checker or browser DevTools
2. Large text = 18pt+ or 14pt+ bold; different threshold (3:1 for AA)
3. Buttons: contrast against both background and any border

---

## Exercise 2: Keyboard-Only Form

**Task:** Build a simple form (name, email, submit) that is fully usable with the keyboard. Ensure: tab order makes sense, focus is visible, errors are announced, and Enter submits.

**Validation:**
- [ ] All fields reachable and operable via Tab/Enter/Space
- [ ] Focus ring visible on all interactive elements
- [ ] Form can be submitted with Enter
- [ ] Validation errors are associated with fields (e.g., `aria-describedby`) and focus moves to first error

**Hints:**
1. Use `<label for="id">` to associate labels
2. Use `aria-describedby` for error messages
3. Test with `:focus-visible` styles

---

## Exercise 3: Screen Reader Testing

**Task:** Use VoiceOver or NVDA to complete a task on a site (e.g., find and click a specific link, fill a field). Document: what was announced, what was confusing, and one change that would help.

**Validation:**
- [ ] Task completed with screen reader only
- [ ] At least 3 observations documented (announcements, confusion, gaps)
- [ ] One concrete improvement suggested with implementation note (e.g., add `aria-label`, fix heading order)

**Hints:**
1. Use heading navigation (VoiceOver: VO+Cmd+H) to skim
2. Use rotor/lists to jump to links or form controls
3. Note redundant or missing announcements

---

## Exercise 4: Semantic HTML vs. ARIA

**Task:** Given this markup, fix it for accessibility. Use semantic HTML first; add ARIA only when needed.

```html
<div onclick="submit()">Submit</div>
<div class="checkbox" onclick="toggle()"></div>
<img src="chart.png">
```

**Validation:**
- [ ] "Submit" is a `<button>` or has `role="button"` + `tabindex="0"` + keyboard handler if not `<button>`
- [ ] Checkbox uses `<input type="checkbox">` or has `role="checkbox"`, `aria-checked`, and keyboard support
- [ ] Image has meaningful `alt` or `alt=""` if decorative
- [ ] No ARIA when native HTML suffices

**Hints:**
1. `<button>` handles keyboard and focus automatically
2. `<input type="checkbox">` is preferred over ARIA checkbox
3. Ask: is the image meaningful? If not, `alt=""`

---

## Exercise 5: Run axe and Fix Issues

**Task:** Install axe DevTools (browser extension). Run it on a page. Fix all Critical and Serious issues. Document what you changed and why.

**Validation:**
- [ ] axe shows 0 Critical and 0 Serious issues (or documented exceptions)
- [ ] Each fix is documented (element, rule, fix applied)
- [ ] Manual spot-check: keyboard and screen reader still work

**Hints:**
1. Common fixes: add `alt`, fix contrast, add `aria-label`, fix heading order
2. Some issues require design changes—document and escalate
3. Re-run axe after each fix to ensure no regressions