CANON · Accessibility
Accessibility is not a layer applied at the end. It is the substrate. Every other design decision either supports it or undermines it. WCAG 2.2 AA is the floor.
The Four POUR Principles
WCAG organizes everything around four principles:
| Principle |
Means |
| Perceivable |
Information must be presentable in ways users can perceive (text, alt text, captions, contrast) |
| Operable |
UI components must be operable by all users (keyboard, time, no seizure triggers) |
| Understandable |
Information and operation must be understandable (predictable, error prevention) |
| Robust |
Content must work with current and future assistive tech (semantic HTML, valid markup) |
Semantic HTML First, ARIA Second
| Need |
Use this |
Not this |
| Clickable action |
<button> |
<div onclick> |
| Navigation to URL |
<a href> |
<button> or <div> |
| Form input |
<input>, <textarea>, <select> |
custom div with contenteditable |
| Heading |
<h1>–<h6> |
<div class="heading"> |
| List |
<ul>, <ol>, <li> |
<div> collection |
| Section |
<section>, <article>, <nav>, <aside>, <main>, <header>, <footer> |
<div> |
| Table of data |
<table>, <thead>, <tbody>, <th scope> |
<div> grid |
The first rule of ARIA: don't use ARIA. If a native element does the job, use it. ARIA is for what HTML can't express.
Required Page Structure
<!DOCTYPE html>
<html lang="en"> <!-- lang is mandatory -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page-Specific Title</title>
</head>
<body>
<a href="#main" class="sr-only-focusable">Skip to main content</a>
<header>
<nav aria-label="Primary"> ... </nav>
</header>
<main id="main">
<h1>One H1 per page</h1>
...
</main>
<footer> ... </footer>
</body>
</html>
| Element |
Why |
lang attribute |
Screen reader pronunciation |
| Skip link |
Keyboard users bypass nav |
One <h1> per page |
Document outline |
<main> landmark |
Screen reader jump-to |
<nav aria-label> |
Distinguish multiple navs |
Heading Hierarchy
H1 → H2 → H3 → H4 → H5 → H6
Rules:
- One H1 per page (page title)
- Don't skip levels (H1 → H3 is wrong)
- Use level for semantic depth, not visual size
- Style independently of level (H2 can look smaller than H3 if hierarchy demands)
Screen readers navigate by heading level. Skipping levels breaks the document outline.
Color Contrast (recap)
| Text size |
Minimum |
Source |
| Normal (< 18.66px regular, < 14px bold) |
4.5:1 |
WCAG 1.4.3 |
| Large (≥ 18.66px regular, ≥ 14px bold) |
3:1 |
WCAG 1.4.3 |
| UI components, focus rings, icons |
3:1 |
WCAG 1.4.11 |
See canon-color for full color guidance.
Focus Management
:focus-visible {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
}
| Rule |
Why |
Use :focus-visible, not :focus |
Keyboard users see ring; mouse users don't |
Never outline: none without replacement |
WCAG 2.4.7 violation |
| Focus ring contrast >= 3:1 against adjacent |
WCAG 1.4.11 |
| Focus must be visible after every action |
WCAG 2.4.7 |
| Tab order = DOM order |
Don't use positive tabindex |
| Focus trapped in modals |
WAI-ARIA modal pattern |
| Focus restored on modal close |
Standard expectation |
See canon-interaction for full focus and keyboard guidance.
Forms
<label for="email">Email address</label>
<input
id="email"
type="email"
required
aria-describedby="email-hint email-error"
aria-invalid="false"
autocomplete="email"
/>
<span id="email-hint">We'll never share your email.</span>
<span id="email-error" aria-live="polite"></span>
| Pattern |
Why |
<label for> linked to input |
Click label focuses input; SR reads label |
aria-describedby |
Hints and errors announced |
aria-invalid="true" on error |
SR announces error state |
aria-live="polite" on error message |
SR reads error when it appears |
autocomplete |
Browser fills correctly; SR uses for purpose |
required attribute |
Native validation, no JS needed |
| Error messages text, not color alone |
WCAG 1.4.1 |
See canon-forms for complete form guidance.
Images and Media
| Image type |
Alt text |
| Informative (conveys info) |
Describe the info: "Bar chart showing Q3 revenue up 12%" |
| Decorative |
alt="" (empty) — screen readers skip |
| Functional (button, link) |
Describe the action: "Search" not "magnifying glass" |
| Complex (chart, diagram) |
Short alt + long description nearby |
<!-- Informative -->
<img src="chart.png" alt="Q3 revenue grew 12% over Q2, with strong gains in enterprise sales.">
<!-- Decorative -->
<img src="divider.png" alt="">
<!-- Functional -->
<button><img src="search.svg" alt="Search"></button>
<!-- Complex -->
<img src="org-chart.png" alt="Organizational chart" aria-describedby="chart-desc">
<div id="chart-desc">CEO at top, with 4 VPs reporting...</div>
Video/audio: captions for video, transcripts for audio. WCAG 1.2.
ARIA: When to Use
ARIA roles and properties exist for what HTML can't express:
| Need |
ARIA |
Custom button (use <button> instead) |
role="button" (last resort) |
| Custom checkbox |
role="checkbox" + aria-checked |
| Custom tab interface |
role="tablist" + role="tab" + aria-selected |
| Disclosure widget |
aria-expanded on the trigger |
| Live updates |
aria-live="polite" or "assertive" |
| Hidden from SR (decorative) |
aria-hidden="true" |
| Label that isn't visible |
aria-label="..." |
| Label provided by another element |
aria-labelledby="id" |
| Description for complex content |
aria-describedby="id" |
Don't combine ARIA with native semantics. <button role="button"> is redundant. <a href role="link"> is wrong.
Keyboard Navigation
| Component |
Required keys |
| Modal |
Esc closes, Tab traps inside, focus restored on close |
| Tabs |
Arrow Left/Right between tabs, Tab into panel |
| Menu |
Arrow Up/Down between items, Esc closes, Tab leaves |
| Combobox |
Arrow Down opens, type filters, Enter selects |
| Dialog |
Esc closes, focus trapped |
| Slider |
Arrow keys adjust, Home/End jump to min/max, Page Up/Down for larger jumps |
| Carousel |
Arrow keys navigate, Pause/Play button required if auto-rotates |
See WAI-ARIA Authoring Practices for the canonical pattern of each.
Motion Preferences
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
Mandatory in every project. WCAG 2.3.3.
Color Preferences
@media (prefers-color-scheme: dark) {
/* dark theme */
}
@media (forced-colors: active) {
/* Windows High Contrast Mode */
/* Don't override user color choices */
}
Touch Target Size
| Standard |
Size |
| WCAG 2.5.8 (AA) |
24 × 24 px |
| WCAG 2.5.5 (AAA) |
44 × 44 px |
| Apple HIG |
44 × 44 pt |
| Material 3 |
48 × 48 dp |
Use 44 × 44 as the floor. See canon-spatial and canon-interaction.
Common WCAG 2.2 Success Criteria (the most-failed)
| SC |
Name |
Failure |
| 1.1.1 |
Non-text Content |
Missing alt text |
| 1.3.1 |
Info and Relationships |
Visual headings without <h> tags |
| 1.4.3 |
Contrast (Minimum) |
Body text < 4.5:1 |
| 1.4.10 |
Reflow |
Horizontal scroll at 320px |
| 1.4.11 |
Non-text Contrast |
Focus rings, icons < 3:1 |
| 2.1.1 |
Keyboard |
Mouse-only interactions |
| 2.4.4 |
Link Purpose |
"Click here", "Read more" |
| 2.4.7 |
Focus Visible |
outline: none without replacement |
| 2.5.8 |
Target Size (Minimum) |
Tap targets < 24×24 |
| 3.3.2 |
Labels or Instructions |
Inputs without labels |
| 4.1.2 |
Name, Role, Value |
Custom widgets without ARIA |
Anti-Patterns
| Anti-pattern |
WCAG violation |
Fix |
<div onclick> for buttons |
2.1.1, 4.1.2 |
Use <button> |
outline: none |
2.4.7 |
Use :focus-visible with custom ring |
| Placeholder as label |
3.3.2 |
Use <label> |
| "Click here" link text |
2.4.4 |
Describe the destination |
| Color as only signal |
1.4.1 |
Add icon, weight, or label |
| Auto-playing video with sound |
1.4.2 |
Mute by default; provide control |
| Carousel auto-rotates without pause |
2.2.2 |
Add pause; default to no auto-rotate |
| Time-limited forms |
2.2.1 |
Provide extension |
| Modal focus escapes |
WAI-ARIA modal |
Implement focus trap |
| Empty alt on informative image |
1.1.1 |
Add descriptive alt |
| Long alt on decorative image |
1.1.1 |
Use alt="" |
| Multiple H1s |
1.3.1 |
One per page |
| Skipping heading levels |
1.3.1 |
Don't skip |
| Form errors that disappear |
3.3.1 |
Persistent error message |
Audit Checklist
- Run axe DevTools or Lighthouse Accessibility audit. Score should be 95+.
- Tab through every interactive element. Visible focus ring? Logical order?
- Use a screen reader for 5 minutes (VoiceOver on Mac, NVDA on Windows). Pages make sense?
- Zoom to 200%. Layout still works? No content cut off?
- Check every form. Labels associated? Errors descriptive?
aria-describedby linked?
- Check every image. Alt text present? Decorative images empty alt?
- Check heading hierarchy. One H1? No skipped levels?
- Check color contrast for every text/bg pair. >= 4.5:1?
- Check
prefers-reduced-motion media query exists.
- Check skip link present and works.
Citations
1---2name: canon-accessibility3description: Use when designing or auditing accessibility, ARIA, semantic HTML, screen reader support, keyboard navigation, color contrast, motion preferences, or WCAG compliance. Trigger when the user mentions a11y, accessibility, ARIA, screen reader, WCAG, keyboard, focus, or asks to make something accessible.4---56# CANON · Accessibility78Accessibility is not a layer applied at the end. It is the substrate. Every other design decision either supports it or undermines it. WCAG 2.2 AA is the floor.910## The Four POUR Principles1112WCAG organizes everything around four principles:1314| Principle | Means |15|---|---|16| **Perceivable** | Information must be presentable in ways users can perceive (text, alt text, captions, contrast) |17| **Operable** | UI components must be operable by all users (keyboard, time, no seizure triggers) |18| **Understandable** | Information and operation must be understandable (predictable, error prevention) |19| **Robust** | Content must work with current and future assistive tech (semantic HTML, valid markup) |2021## Semantic HTML First, ARIA Second2223| Need | Use this | Not this |24|---|---|---|25| Clickable action | `<button>` | `<div onclick>` |26| Navigation to URL | `<a href>` | `<button>` or `<div>` |27| Form input | `<input>`, `<textarea>`, `<select>` | custom div with contenteditable |28| Heading | `<h1>`–`<h6>` | `<div class="heading">` |29| List | `<ul>`, `<ol>`, `<li>` | `<div>` collection |30| Section | `<section>`, `<article>`, `<nav>`, `<aside>`, `<main>`, `<header>`, `<footer>` | `<div>` |31| Table of data | `<table>`, `<thead>`, `<tbody>`, `<th scope>` | `<div>` grid |3233**The first rule of ARIA: don't use ARIA.** If a native element does the job, use it. ARIA is for what HTML can't express.3435## Required Page Structure3637```html38<!DOCTYPE html>39<html lang="en"> <!-- lang is mandatory -->40<head>41 <meta charset="utf-8">42 <meta name="viewport" content="width=device-width, initial-scale=1">43 <title>Page-Specific Title</title>44</head>45<body>46 <a href="#main" class="sr-only-focusable">Skip to main content</a>47 <header>48 <nav aria-label="Primary"> ... </nav>49 </header>50 <main id="main">51 <h1>One H1 per page</h1>52 ...53 </main>54 <footer> ... </footer>55</body>56</html>57```5859| Element | Why |60|---|---|61| `lang` attribute | Screen reader pronunciation |62| Skip link | Keyboard users bypass nav |63| One `<h1>` per page | Document outline |64| `<main>` landmark | Screen reader jump-to |65| `<nav aria-label>` | Distinguish multiple navs |6667## Heading Hierarchy6869```70H1 → H2 → H3 → H4 → H5 → H671```7273**Rules:**74- One H1 per page (page title)75- Don't skip levels (H1 → H3 is wrong)76- Use level for semantic depth, not visual size77- Style independently of level (H2 can look smaller than H3 if hierarchy demands)7879Screen readers navigate by heading level. Skipping levels breaks the document outline.8081## Color Contrast (recap)8283| Text size | Minimum | Source |84|---|---|---|85| Normal (< 18.66px regular, < 14px bold) | 4.5:1 | WCAG 1.4.3 |86| Large (≥ 18.66px regular, ≥ 14px bold) | 3:1 | WCAG 1.4.3 |87| UI components, focus rings, icons | 3:1 | WCAG 1.4.11 |8889See **canon-color** for full color guidance.9091## Focus Management9293```css94:focus-visible {95 outline: 2px solid var(--color-focus);96 outline-offset: 2px;97}98```99100| Rule | Why |101|---|---|102| Use `:focus-visible`, not `:focus` | Keyboard users see ring; mouse users don't |103| Never `outline: none` without replacement | WCAG 2.4.7 violation |104| Focus ring contrast >= 3:1 against adjacent | WCAG 1.4.11 |105| Focus must be visible after every action | WCAG 2.4.7 |106| Tab order = DOM order | Don't use positive tabindex |107| Focus trapped in modals | WAI-ARIA modal pattern |108| Focus restored on modal close | Standard expectation |109110See **canon-interaction** for full focus and keyboard guidance.111112## Forms113114```html115<label for="email">Email address</label>116<input117 id="email"118 type="email"119 required120 aria-describedby="email-hint email-error"121 aria-invalid="false"122 autocomplete="email"123/>124<span id="email-hint">We'll never share your email.</span>125<span id="email-error" aria-live="polite"></span>126```127128| Pattern | Why |129|---|---|130| `<label for>` linked to input | Click label focuses input; SR reads label |131| `aria-describedby` | Hints and errors announced |132| `aria-invalid="true"` on error | SR announces error state |133| `aria-live="polite"` on error message | SR reads error when it appears |134| `autocomplete` | Browser fills correctly; SR uses for purpose |135| `required` attribute | Native validation, no JS needed |136| Error messages text, not color alone | WCAG 1.4.1 |137138See **canon-forms** for complete form guidance.139140## Images and Media141142| Image type | Alt text |143|---|---|144| Informative (conveys info) | Describe the info: "Bar chart showing Q3 revenue up 12%" |145| Decorative | `alt=""` (empty) — screen readers skip |146| Functional (button, link) | Describe the action: "Search" not "magnifying glass" |147| Complex (chart, diagram) | Short alt + long description nearby |148149```html150<!-- Informative -->151<img src="chart.png" alt="Q3 revenue grew 12% over Q2, with strong gains in enterprise sales.">152153<!-- Decorative -->154<img src="divider.png" alt="">155156<!-- Functional -->157<button><img src="search.svg" alt="Search"></button>158159<!-- Complex -->160<img src="org-chart.png" alt="Organizational chart" aria-describedby="chart-desc">161<div id="chart-desc">CEO at top, with 4 VPs reporting...</div>162```163164**Video/audio:** captions for video, transcripts for audio. WCAG 1.2.165166## ARIA: When to Use167168ARIA roles and properties exist for what HTML can't express:169170| Need | ARIA |171|---|---|172| Custom button (use `<button>` instead) | `role="button"` (last resort) |173| Custom checkbox | `role="checkbox"` + `aria-checked` |174| Custom tab interface | `role="tablist"` + `role="tab"` + `aria-selected` |175| Disclosure widget | `aria-expanded` on the trigger |176| Live updates | `aria-live="polite"` or `"assertive"` |177| Hidden from SR (decorative) | `aria-hidden="true"` |178| Label that isn't visible | `aria-label="..."` |179| Label provided by another element | `aria-labelledby="id"` |180| Description for complex content | `aria-describedby="id"` |181182**Don't combine ARIA with native semantics.** `<button role="button">` is redundant. `<a href role="link">` is wrong.183184## Keyboard Navigation185186| Component | Required keys |187|---|---|188| Modal | Esc closes, Tab traps inside, focus restored on close |189| Tabs | Arrow Left/Right between tabs, Tab into panel |190| Menu | Arrow Up/Down between items, Esc closes, Tab leaves |191| Combobox | Arrow Down opens, type filters, Enter selects |192| Dialog | Esc closes, focus trapped |193| Slider | Arrow keys adjust, Home/End jump to min/max, Page Up/Down for larger jumps |194| Carousel | Arrow keys navigate, Pause/Play button required if auto-rotates |195196See WAI-ARIA Authoring Practices for the canonical pattern of each.197198## Motion Preferences199200```css201@media (prefers-reduced-motion: reduce) {202 *, *::before, *::after {203 animation-duration: 0.01ms !important;204 animation-iteration-count: 1 !important;205 transition-duration: 0.01ms !important;206 scroll-behavior: auto !important;207 }208}209```210211**Mandatory in every project.** WCAG 2.3.3.212213## Color Preferences214215```css216@media (prefers-color-scheme: dark) {217 /* dark theme */218}219220@media (forced-colors: active) {221 /* Windows High Contrast Mode */222 /* Don't override user color choices */223}224```225226## Touch Target Size227228| Standard | Size |229|---|---|230| WCAG 2.5.8 (AA) | 24 × 24 px |231| WCAG 2.5.5 (AAA) | 44 × 44 px |232| Apple HIG | 44 × 44 pt |233| Material 3 | 48 × 48 dp |234235**Use 44 × 44 as the floor.** See **canon-spatial** and **canon-interaction**.236237## Common WCAG 2.2 Success Criteria (the most-failed)238239| SC | Name | Failure |240|---|---|---|241| 1.1.1 | Non-text Content | Missing alt text |242| 1.3.1 | Info and Relationships | Visual headings without `<h>` tags |243| 1.4.3 | Contrast (Minimum) | Body text < 4.5:1 |244| 1.4.10 | Reflow | Horizontal scroll at 320px |245| 1.4.11 | Non-text Contrast | Focus rings, icons < 3:1 |246| 2.1.1 | Keyboard | Mouse-only interactions |247| 2.4.4 | Link Purpose | "Click here", "Read more" |248| 2.4.7 | Focus Visible | `outline: none` without replacement |249| 2.5.8 | Target Size (Minimum) | Tap targets < 24×24 |250| 3.3.2 | Labels or Instructions | Inputs without labels |251| 4.1.2 | Name, Role, Value | Custom widgets without ARIA |252253## Anti-Patterns254255| Anti-pattern | WCAG violation | Fix |256|---|---|---|257| `<div onclick>` for buttons | 2.1.1, 4.1.2 | Use `<button>` |258| `outline: none` | 2.4.7 | Use `:focus-visible` with custom ring |259| Placeholder as label | 3.3.2 | Use `<label>` |260| "Click here" link text | 2.4.4 | Describe the destination |261| Color as only signal | 1.4.1 | Add icon, weight, or label |262| Auto-playing video with sound | 1.4.2 | Mute by default; provide control |263| Carousel auto-rotates without pause | 2.2.2 | Add pause; default to no auto-rotate |264| Time-limited forms | 2.2.1 | Provide extension |265| Modal focus escapes | WAI-ARIA modal | Implement focus trap |266| Empty alt on informative image | 1.1.1 | Add descriptive alt |267| Long alt on decorative image | 1.1.1 | Use `alt=""` |268| Multiple H1s | 1.3.1 | One per page |269| Skipping heading levels | 1.3.1 | Don't skip |270| Form errors that disappear | 3.3.1 | Persistent error message |271272## Audit Checklist2732741. Run **axe DevTools** or **Lighthouse Accessibility audit**. Score should be 95+.2752. Tab through every interactive element. Visible focus ring? Logical order?2763. Use a screen reader for 5 minutes (VoiceOver on Mac, NVDA on Windows). Pages make sense?2774. Zoom to 200%. Layout still works? No content cut off?2785. Check every form. Labels associated? Errors descriptive? `aria-describedby` linked?2796. Check every image. Alt text present? Decorative images empty alt?2807. Check heading hierarchy. One H1? No skipped levels?2818. Check color contrast for every text/bg pair. >= 4.5:1?2829. Check `prefers-reduced-motion` media query exists.28310. Check skip link present and works.284285## Citations286287- WCAG 2.2: https://www.w3.org/TR/WCAG22/288- WCAG 2.2 Quick Reference: https://www.w3.org/WAI/WCAG22/quickref/289- WAI-ARIA Authoring Practices Guide (APG): https://www.w3.org/WAI/ARIA/apg/290- MDN Accessibility: https://developer.mozilla.org/en-US/docs/Web/Accessibility291- Inclusive Components by Heydon Pickering: https://inclusive-components.design292- A11y Project: https://www.a11yproject.com293- axe DevTools: https://www.deque.com/axe/
dragoon0x