Descriptive Page Title

` | `
Custom interactive element

Modal content
``` ### Skip Links ```html Skip to main content ``` ### Keyboard Patterns | Component | Keys | |-----------|------| | Buttons | Enter, Space | | Links | Enter | | Menus | Arrows, Enter, Escape | | Tabs | Arrows, Tab | | Modals | Tab (trapped), Escape to close | --- ## ARIA ### When to Use ARIA 1. First, use semantic HTML 2. Then, add ARIA if needed 3. "No ARIA is better than bad ARIA" ### Common ARIA Patterns ```html
Content updates will be announced

Urgent updates interrupt

Home About

Loading...

...

Section Title

``` ### ARIA Roles ```html
Header

Nav

Main

Sidebar

Footer

Custom button

Modal

Tabs

Error message
``` --- ## Color & Contrast ### Contrast Requirements | Text Size | Level AA | Level AAA | |-----------|----------|-----------| | Normal text (<18px) | 4.5:1 | 7:1 | | Large text (≥18px bold, ≥24px) | 3:1 | 4.5:1 | | UI components | 3:1 | - | ### Color Independence ```html Error ⚠️ Error: Please enter a valid email ``` ### Testing Tools - WebAIM Contrast Checker - Chrome DevTools color picker - Stark (Figma plugin) - axe DevTools --- ## Testing ### Automated Testing ```javascript // Using jest-axe import { axe, toHaveNoViolations } from 'jest-axe'; expect.extend(toHaveNoViolations); it('should have no accessibility violations', async () => { const { container } = render(); const results = await axe(container); expect(results).toHaveNoViolations(); }); ``` ### Manual Testing Checklist - [ ] Navigate entire page with keyboard only - [ ] Test with screen reader (VoiceOver, NVDA) - [ ] Check color contrast - [ ] Zoom to 200% - still usable? - [ ] Disable CSS - still understandable? - [ ] Check all images have alt text - [ ] Verify form labels and errors - [ ] Test focus visibility - [ ] Check heading structure ### Screen Reader Testing | OS | Screen Reader | Browser | |----|---------------|---------| | macOS | VoiceOver | Safari | | Windows | NVDA | Firefox | | Windows | JAWS | Chrome | | Mobile | TalkBack | Chrome | | iOS | VoiceOver | Safari | --- ## Common Patterns ### Modal Dialog ```html

Confirm Action

Are you sure you want to proceed?

``` Focus management: 1. Move focus to modal on open 2. Trap focus inside modal 3. Return focus to trigger on close ### Tabs ```html

General settings content
``` --- ## References - `references/wcag-checklist.md` - Full WCAG 2.1 checklist - `references/aria-patterns.md` - Common ARIA patterns - `references/testing-tools.md` - Testing tool setup

Section

Subsection

Section Title