Mobile Accessibility is Different
Mobile devices bring their own constraints: small screens, touch interfaces, and different assistive technologies. Your responsive website and native apps need to be tested on them as well as on desktop.
Key Mobile Accessibility Considerations
1. Touch Target Size (WCAG 2.5.5 / 2.5.8)
Small buttons are frustrating for everyone, and can be very hard to hit for users with motor tremors.
- Best Practice (AAA): Ensure interactive targets are at least 44x44 CSS pixels. (Apple's HIG recommends 44x44pt, Android's Material Design recommends 48x48dp).
- Minimum (AA, WCAG 2.2): Targets must be at least 24x24 CSS pixels, or have sufficient spacing around them so the target + spacing equals 24x24.
2. Device Orientation (WCAG 1.3.4)
Do not restrict your app or website to a single orientation (portrait or landscape) unless it is essential (e.g., a piano app). Users who mount their devices to wheelchairs often cannot rotate them.
3. Pointer Gestures (WCAG 2.5.1)
Complex gestures (like multi-finger swipes or path-based drawing) can be difficult for some users. Any action that requires a complex gesture must also be achievable with a simple, single-pointer tap (e.g., providing a visible "Delete" button instead of relying solely on a swipe-to-delete gesture).
4. Responsive Reflow (WCAG 1.4.10)
Content must reflow to fit a screen width of 320 CSS pixels without requiring horizontal scrolling (except for content that naturally requires it, like maps or data tables). Ensure your viewport meta tag does not disable zooming (user-scalable=no).
5. Mobile Screen Readers
Test your mobile web and native apps with the built-in screen readers:
- VoiceOver (iOS): Accessible via Settings > Accessibility.
- TalkBack (Android): Accessible via Settings > Accessibility.
Ensure focus order is logical and custom swipe gestures don't conflict with screen reader navigation.