Accessibility Testing Guide

This guide provides step-by-step instructions for testing the accessibility of our React Native app to ensure EAA compliance.

Quick Testing Checklist

✅ Before Each Release

  • Screen reader navigation works on both iOS and Android
  • All buttons and interactive elements have proper labels
  • Color contrast meets 4.5:1 ratio for normal text, 3:1 for large text
  • App works with 200% text scaling
  • Keyboard navigation is logical and complete
  • Status changes are announced to screen readers
  • Door button persistence works after app restart (NEW)
  • Session continuity maintains accessibility (NEW)

Detailed Testing Procedures

1. Screen Reader Testing

iOS VoiceOver Testing

  1. Enable VoiceOver:
    • Settings > Accessibility > VoiceOver > On
    • Or use triple-click home button shortcut
  2. Basic Navigation:
    • Swipe right/left to navigate between elements
    • Double-tap to activate buttons
    • Two-finger tap to stop/start reading
  3. Test Checklist:
    • All buttons announce their purpose clearly
    • Door status changes are announced
    • Loading states are communicated
    • Error messages are read aloud
    • Modal dialogs are properly announced
    • App restart maintains door button accessibility (NEW)

Android TalkBack Testing

  1. Enable TalkBack:
    • Settings > Accessibility > TalkBack > On
  2. Basic Navigation:
    • Swipe right/left to navigate
    • Double-tap to activate
    • Two-finger swipe down to read continuously
  3. Test Same Checklist as iOS

1.5. Session Persistence Testing (NEW)

Door Button Persistence Test

Purpose: Verify door button maintains “open door” state after app restart

Steps:

  1. Initial Setup:
    • Click email link to authenticate with hotel key
    • Verify door button shows “Open Door” (not “Loading”)
    • Note the door status and accessibility announcements
  2. App Restart Test:
    • Close the app completely (remove from background)
    • Reopen the app
    • Expected Result: Door button should show “Open Door” immediately
    • With Screen Reader: Should announce door status, not loading state
  3. Accessibility Continuity:
    • Enable VoiceOver/TalkBack
    • Navigate to door button after restart
    • Expected: Clear announcement of door status and functionality
    • Not Expected: “Loading” or “Please wait” announcements
  4. Cross-Platform Testing:
    • Test on both iOS and Android
    • Verify consistency across platforms
    • Test with different screen reader settings

Cache Restoration Test

Purpose: Verify all session data persists correctly

Steps:

  1. Complete Session Setup:
    • Authenticate via email link
    • Note all displayed information (room number, dates, etc.)
    • Enable elevator controls if available
  2. Force App Restart:
    • Force quit the app
    • Clear from recent apps list
    • Restart device (optional, for thorough testing)
  3. Verification:
    • Room number displayed correctly
    • Arrival/departure dates shown
    • Hotel name preserved
    • Elevator controls available (if applicable)
    • Door button shows “Open Door”
    • All accessibility labels maintained

Debug Information Test

Purpose: Ensure debug logging doesn’t interfere with accessibility

Steps:

  1. Enable Debug Mode (if available)
  2. Check Console Logs:
    • Look for accessibility-related logging
    • Verify no accessibility errors
    • Confirm session restoration logs
  3. Screen Reader Interaction:
    • Debug logs should not be announced
    • Only user-relevant information should be spoken

2. Keyboard Navigation Testing

Setup External Keyboard

  • iOS: Connect Bluetooth keyboard
  • Android: Connect Bluetooth keyboard or use on-screen keyboard navigation

Test Navigation

  1. Tab Order:
    • Tab moves through interactive elements logically
    • All interactive elements are reachable
    • Tab order matches visual layout
    • Door button remains accessible after restart (NEW)
  2. Focus Indicators:
    • Currently focused element is clearly visible
    • Focus indicators have sufficient contrast
    • Focus doesn’t get trapped in components
    • Focus states persist after app restart (NEW)
  3. Keyboard Shortcuts:
    • Space/Enter activates buttons
    • Escape closes modals
    • Arrow keys work where appropriate

3. Visual Accessibility Testing

Color Contrast Testing

Use tools like:

  • Colour Contrast Analyser (desktop app)
  • WebAIM Contrast Checker (online)
  • Accessibility Inspector (iOS/macOS)

Requirements:

  • Normal text: 4.5:1 contrast ratio
  • Large text (18pt+): 3.1 contrast ratio
  • UI components: 3:1 contrast ratio

Text Scaling Testing

  1. iOS:
    • Settings > Display & Brightness > Text Size
    • Test with largest accessibility size (200%+)
  2. Android:
    • Settings > Display > Font Size and Style
    • Test with largest size

Test Checklist:

  • All text remains readable at 200% size
  • UI doesn’t break with large text
  • Interactive elements remain usable
  • No text gets cut off

4. Motor Accessibility Testing

Touch Target Testing

  • All buttons are at least 44x44 points (iOS) / 48x48 dp (Android)
  • Adequate spacing between interactive elements
  • Buttons work with various touch gestures

Alternative Input Testing

  • Voice Control works (iOS/Android)
  • Switch Control works (iOS/Android)
  • External switch devices work

5. Automated Testing Tools

React Native Accessibility Testing

# Install accessibility testing tools
npm install --save-dev @testing-library/react-native
npm install --save-dev jest-native

# Run accessibility tests
npm run test:accessibility

iOS Accessibility Inspector

  1. Xcode > Open Developer Tool > Accessibility Inspector
  2. Select your device/simulator
  3. Run audit on your app
  4. Review and fix reported issues

Android Accessibility Scanner

  1. Install from Google Play Store
  2. Enable in Settings > Accessibility
  3. Use floating action button to scan screens
  4. Review suggestions and implement fixes

Common Issues and Solutions

Issue: Button not announced by screen reader

Solution:

<TouchableOpacity
  accessible={true}
  accessibilityRole="button"
  accessibilityLabel="Clear description of what button does"
  accessibilityHint="What happens when activated"
>

Issue: Status changes not announced

Solution:

<View
  accessible={true}
  accessibilityRole="text"
  accessibilityLabel={dynamicStatusText}
  accessibilityLiveRegion="polite"
>

Issue: Modal not properly announced

Solution:

<Modal
  accessible={true}
  accessibilityViewIsModal={true}
  accessibilityLabel="Modal title or purpose"
>

Issue: Decorative elements being read

Solution:

<Image
  accessible={false}
  // or
  accessibilityElementsHidden={true}
  source={decorativeImage}
/>

Testing Schedule

Daily (During Development)

  • Quick screen reader test of modified components
  • Keyboard navigation check for new features

Weekly (Sprint Testing)

  • Full screen reader navigation test
  • Color contrast validation
  • Text scaling verification

Pre-Release (Complete Testing)

  • Full accessibility audit
  • Testing with real users who use assistive technologies
  • Documentation updates
  • Accessibility statement review

Accessibility Testing Tools

Free Tools

  • iOS Accessibility Inspector (built into Xcode)
  • Android Accessibility Scanner (Google Play)
  • Colour Contrast Analyser (TPGi)
  • axe DevTools (browser extension)
  • Deque axe-core (automated testing)
  • Evinced SDK (continuous testing)
  • Level Access AMP (enterprise testing)

Reporting Issues

When you find accessibility issues:

  1. Document the Issue:
    • What assistive technology was used
    • Steps to reproduce
    • Expected vs actual behavior
    • Screenshots/recordings if helpful
  2. Categorize Severity:
    • Critical: Blocks core functionality
    • High: Significantly impacts usability
    • Medium: Minor usability impact
    • Low: Enhancement opportunity
  3. Create Issue Ticket:
    • Use “Accessibility” label
    • Include WCAG success criteria reference
    • Assign appropriate priority

Getting Help

Internal Resources

  • Accessibility team lead: [Name/Contact]
  • Development team accessibility champion: [Name/Contact]
  • UX accessibility specialist: [Name/Contact]

External Resources

  • WebAIM: Comprehensive accessibility resources
  • A11y Project: Community-driven accessibility resources
  • Deque University: Accessibility training and certification
  • Apple Accessibility Documentation
  • Android Accessibility Documentation

Success Metrics

Track these metrics to measure accessibility progress:

  • Coverage: % of components with proper accessibility implementation
  • Issues: Number of accessibility issues found/resolved
  • Testing: % of releases that pass accessibility testing
  • User Feedback: Accessibility-related user feedback and resolution
  • Compliance: WCAG conformance level achieved

Remember: Accessibility testing should be integrated into your regular development workflow, not treated as an afterthought. The earlier you catch accessibility issues, the easier and cheaper they are to fix.