Accessibility Testing

Procedures and tools for testing accessibility compliance.

Automated Testing

Recommended Tools

• axe DevTools: -
• Lighthouse: -
• WAVE: -
• Pa11y: -

What Automated Testing Catches

• Missing alt text
• Color contrast issues
• Missing form labels
• Invalid ARIA usage
• Missing document language
• Empty buttons and links

Limitations

Automated testing catches approximately 30-40% of accessibility issues. Manual testing is required for:

• Logical reading order
• Meaningful link text
• Correct heading hierarchy
• Keyboard navigation flow
• Screen reader experience

Manual Testing

Keyboard Testing Checklist

• All interactive elements are reachable via Tab key
• Focus order is logical and follows visual layout
• Focus indicator is visible on all elements
• No keyboard traps exist
• Skip links work correctly
• Modal dialogs trap and return focus correctly
• Custom widgets follow expected keyboard patterns

Screen Reader Testing

Recommended Screen Readers:

• VoiceOver (macOS, iOS)
• NVDA (Windows, free)
• JAWS (Windows, paid)
• TalkBack (Android)

Screen Reader Checklist

• Page title accurately describes content
• Headings create logical document outline
• Images have appropriate alt text
• Form fields have associated labels
• Error messages are announced
• Dynamic content updates are announced
• Links and buttons have descriptive text

Visual Testing

Color Contrast

• Text meets minimum contrast ratios
• UI components meet contrast requirements
• Information not conveyed by color alone

Zoom and Resize

• Content is readable at 200% zoom
• No horizontal scrolling at 320px width
• Text can be resized without loss of content

Reduced Motion

• Animations can be paused or disabled
• prefers-reduced-motion is respected
• Essential animations have alternative presentations

Testing Schedule

Tailwind Accessibility Checklist

When reviewing Tailwind code, verify these patterns are in place:

• Interactive elements have focus-visible:ring-2 focus-visible:ring-offset-2
• Icon-only buttons have aria-label or sr-only text
• Skip link uses sr-only focus:not-sr-only focus:absolute
• Touch targets use min-h-11 min-w-11 minimum
• Animations use motion-safe: or motion-reduce: variants
• Decorative images use aria-hidden="true" or empty alt
• Form inputs have associated <label> elements

Reporting Issues

When reporting accessibility issues, include:

1. Description: What the problem is
2. Impact: Who is affected and how
3. Location: URL and element identifier
4. WCAG criterion: Which guideline is violated
5. Steps to reproduce: How to find the issue
6. Suggested fix: Proposed solution