Version: 1.0
Standard: WCAG 2.2 AA
Audience: Web Developers, QA Testers, UI Designers
Phase 1 – Automated Accessibility Scan
Goal: Find common accessibility issues before manual testing.
Checklist
☐ Run an accessibility scan on every page template.
☐ Review all reported errors.
☐ Fix high-impact issues first:
- Missing alternative text
- Low color contrast
- Missing form labels
- Empty links/buttons
- Heading structure
- Missing language attributes
☐ Re-run scan until no critical issues remain.
Recommended Tools
| Tool | Purpose |
|---|---|
| WAVE | Visual accessibility checker |
| axe DevTools | Browser accessibility testing |
| Lighthouse | Accessibility score and recommendations |
| Accessibility Insights | Microsoft accessibility auditing |
Phase 2 – Keyboard Navigation
Goal: Ensure the website is fully usable without a mouse.
Checklist
☐ Disconnect the mouse.
☐ Navigate using only:
- Tab
- Shift + Tab
- Enter
- Space
- Arrow Keys
- Escape
Verify:
☐ Every interactive element receives keyboard focus.
☐ Focus order follows the visual layout.
☐ No keyboard traps exist.
☐ Menus open and close correctly.
☐ Dialogs trap focus correctly.
☐ Focus returns after closing modals.
☐ Dropdowns work from the keyboard.
☐ Sliders and carousels are keyboard accessible.
☐ Skip Navigation link works.
Recommended Tools
- Native keyboard testing
- axe DevTools
- Accessibility Insights
Phase 3 – Screen Reader Testing
Goal: Verify the site is understandable without visual cues.
Checklist
Test with at least one screen reader.
Verify:
☐ Page title is meaningful.
☐ Headings are announced correctly.
☐ Lists are announced properly.
☐ Navigation landmarks exist.
☐ Buttons have meaningful names.
☐ Links make sense out of context.
☐ Images have useful alt text.
☐ Decorative images are ignored.
☐ Form controls announce:
- Label
- Required state
- Error state
- Instructions
☐ Dynamic updates are announced.
Recommended Screen Readers
| Platform | Screen Reader |
|---|---|
| Windows | NVDA |
| Windows | JAWS |
| macOS | VoiceOver |
| iPhone | VoiceOver |
| Android | TalkBack |
Phase 4 – Color & Contrast
Goal: Ensure content is readable.
Checklist
☐ Normal text has at least 4.5:1 contrast.
☐ Large text has at least 3:1 contrast.
☐ Buttons meet contrast requirements.
☐ Placeholder text is readable.
☐ Error messages don’t rely on color alone.
☐ Charts use labels or patterns.
☐ Links are identifiable without color.
Recommended Tools
- WebAIM Contrast Checker
- Stark
- axe DevTools
Phase 5 – Semantic HTML Review
Goal: Confirm proper HTML structure.
Checklist
☐ One H1 per page.
☐ Heading hierarchy is logical.
☐ Lists use proper list markup.
☐ Tables use:
- table
- th
- scope
- caption (when needed)
☐ Buttons use <button>.
☐ Navigation uses <nav>.
☐ Main content uses <main>.
☐ Forms use semantic elements.
☐ Labels are associated with inputs.
☐ ARIA is only used when necessary.
Developer Review
Check for:
☐ Missing labels
☐ Incorrect roles
☐ Nested interactive elements
☐ Duplicate IDs
☐ Invalid ARIA attributes
Phase 6 – Forms
Checklist
Every form should have:
☐ Visible labels
☐ Required field indicators
☐ Helpful instructions
☐ Error summaries
☐ Inline validation
☐ Programmatic labels
☐ Autocomplete attributes
☐ Accessible CAPTCHA alternatives
Verify:
☐ Errors receive focus.
☐ Screen readers announce errors.
☐ Success messages are announced.
Phase 7 – Images & Media
Images
☐ Informative images have descriptive alt text.
☐ Decorative images use empty alt attributes (alt="").
☐ SVG icons have accessible names.
☐ Background images are decorative only.
Video
☐ Captions included.
☐ Transcripts available.
☐ Audio descriptions when necessary.
☐ Controls accessible.
☐ Autoplay disabled.
Audio
☐ Transcript available.
☐ Playback controls accessible.
Phase 8 – Responsive Accessibility
Checklist
Test:
☐ Desktop
☐ Tablet
☐ Mobile
☐ Zoom at 200%
☐ Zoom at 400%
Verify:
☐ No content loss.
☐ No horizontal scrolling.
☐ Buttons remain usable.
☐ Menus remain accessible.
☐ Focus remains visible.
Phase 9 – Focus Indicators
Checklist
☐ Visible focus on every control.
☐ Focus color meets contrast.
☐ Focus is never removed with CSS.
☐ Custom controls have custom focus styles.
Phase 10 – Interactive Components
Review every:
☐ Modal
☐ Accordion
☐ Tabs
☐ Dropdown
☐ Carousel
☐ Tooltip
☐ Toast notification
Verify:
☐ Keyboard support
☐ Focus management
☐ Screen reader announcements
☐ Correct ARIA usage
Phase 11 – Content Review
Checklist
☐ Plain language used.
☐ Reading order is logical.
☐ Instructions are clear.
☐ Link text is descriptive.
Avoid:
- “Click Here”
- “Read More”
- “Learn More”
Instead use descriptive links.
Example:
✓ Download Annual Report (PDF)
Phase 12 – Browser Testing
Test in:
☐ Chrome
☐ Firefox
☐ Safari
☐ Edge
Verify accessibility behavior remains consistent.
Phase 13 – Mobile Accessibility
Test:
☐ VoiceOver (iOS)
☐ TalkBack (Android)
Verify:
☐ Gestures work.
☐ Reading order is correct.
☐ Buttons are large enough (minimum 44 × 44 CSS pixels recommended).
☐ Orientation changes work.
Phase 14 – Performance & Accessibility
Review:
☐ Images optimized.
☐ Lazy loading doesn’t hide important content.
☐ Loading indicators are announced.
☐ Skeleton screens remain accessible.
☐ Reduced motion preference is respected.
Phase 15 – Final WCAG Compliance Review
POUR Principles
Perceivable
☐ Text alternatives
☐ Captions
☐ Adaptable content
☐ Sufficient contrast
Operable
☐ Keyboard accessible
☐ No flashing content
☐ Enough time limits
☐ Clear navigation
Understandable
☐ Predictable behavior
☐ Clear language
☐ Helpful error messages
Robust
☐ Valid HTML
☐ Correct ARIA
☐ Screen reader compatibility
☐ Browser compatibility
Accessibility Tools Reference
| Tool | Best For |
|---|---|
| WAVE | Visual accessibility analysis |
| axe DevTools | Automated WCAG testing in-browser |
| Lighthouse | Accessibility scoring and performance |
| Accessibility Insights | Guided accessibility assessments |
| WebAIM Contrast Checker | Color contrast verification |
| Stark | Design and contrast testing |
| NVDA | Windows screen reader testing |
| JAWS | Enterprise screen reader testing |
| VoiceOver | macOS and iOS testing |
| TalkBack | Android testing |
| ARC Toolkit | Manual accessibility inspection |
| tota11y | Visual accessibility debugging |
| HTML Validator (W3C) | HTML validation |
| ARIA DevTools | ARIA inspection |
Definition of Done
Before release, confirm:
☐ No critical automated accessibility errors☐ Keyboard navigation fully functional
☐ Screen reader tested
☐ Color contrast passes WCAG
☐ Forms fully accessible
☐ Interactive components tested
☐ Responsive layouts remain accessible
☐ Focus indicators visible
☐ HTML validated
☐ Manual accessibility review completed
☐ WCAG 2.2 AA requirements satisfied
Release Status:
☐ Approved for Production
☐ Requires Accessibility Remediation
Leave a Reply