Mobile Accessibility Testing Guide: iOS, Android, and WCAG 2.2

Over 60% of web traffic comes from mobile devices. Yet most accessibility testing happens on desktop, with a keyboard and NVDA. Mobile accessibility is a different beast: touch interactions, screen reader gestures, responsive layouts, and operating system-level features create a unique set of challenges. If you're not testing accessibility on mobile, you're ignoring the majority of your users — including the 15-20% who rely on accessibility features like larger text, screen readers, or voice control on their phones.

WCAG 2.2 Mobile-Relevant Criteria

WCAG is technology-agnostic — it applies to mobile just as it does to desktop. But several success criteria are particularly relevant on mobile:

• 2.5.5 Target Size (Enhanced, AAA) / 2.5.8 Target Size Minimum (AA): interactive elements must be at least 24x24 CSS pixels (AA) or 44x44 pixels (AAA). On mobile, small tap targets are the #1 usability and accessibility issue.
• 1.3.4 Orientation (AA): content must not be locked to portrait or landscape orientation unless essential. Users with mounted devices may not be able to rotate.
• 2.5.1 Pointer Gestures (A): functionality that requires multi-point or path-based gestures (pinch, swipe) must also be operable with single-point activation. No pinch-to-zoom as the only way to resize content.
• 2.5.4 Motion Actuation (A): features triggered by device motion (shake to undo, tilt to scroll) must have a UI alternative. And users must be able to disable motion response.
• 1.4.10 Reflow (AA): content must reflow at 320 CSS pixels width without horizontal scrolling. This is responsive design — essential on mobile.

Testing with VoiceOver (iOS)

VoiceOver is the built-in screen reader on iPhone and iPad. It's used by over 70% of mobile screen reader users. Here's how to test:

Enable VoiceOver

Settings > Accessibility > VoiceOver > On. Or ask Siri: "Turn on VoiceOver." Pro tip: set up the Accessibility Shortcut (Settings > Accessibility > Accessibility Shortcut) to triple-click the side button for quick toggle.

Essential Gestures

• Swipe right: move to next element
• Swipe left: move to previous element
• Double-tap: activate the selected element
• Swipe up/down: change the rotor setting (headings, links, form controls)
• Two-finger swipe up: read all from current position
• Three-finger swipe: scroll the page

What to Check

1. Navigate through the entire page with swipe-right. Does VoiceOver read all content in a logical order?
2. Are all interactive elements (buttons, links, form fields) reachable and properly labeled?
3. Can you complete the main user flow (login, add to cart, submit form) using only VoiceOver?
4. Are images announced with meaningful alt text? Are decorative images silent?
5. Do custom components (dropdowns, modals, carousels) announce their state (expanded/collapsed, selected, page count)?

Testing with TalkBack (Android)

TalkBack is Android's built-in screen reader. It has about 25% market share among mobile screen reader users.

Enable TalkBack

Settings > Accessibility > TalkBack > On. Or hold both volume buttons for 3 seconds (if shortcut is enabled).

Essential Gestures

• Swipe right: next element
• Swipe left: previous element
• Double-tap: activate
• Swipe up then right: next reading control (headings, links, etc.)
• Three-finger swipe: scroll

Key Differences from VoiceOver

TalkBack handles web content slightly differently than VoiceOver. Custom ARIA implementations may work in one and break in the other. Always test on both platforms if your audience uses both.

Touch Target Testing

WCAG 2.5.8 requires a minimum target size of 24x24 CSS pixels. Apple's HIG recommends 44x44 points, and Google's Material Design recommends 48x48 dp. In practice, aim for at least 44x44 CSS pixels for comfortable use.

Common offenders:

• Close buttons (X) on modals and banners — often 16x16 pixels
• Icon-only navigation buttons
• Inline text links in dense paragraphs
• Checkbox and radio button hit areas
• Pagination numbers

Test by trying to tap each interactive element with a thumb (not a fingertip). If it requires precision, it's too small.

Responsive Design and Reflow

WCAG 1.4.10 (Reflow) requires that content is usable at 320px width without horizontal scrolling (except for data tables, maps, and similar content). Test by:

1. Open your site on a phone with a small screen (iPhone SE or equivalent)
2. Increase text size to the maximum in device settings
3. Navigate through every page — is all content readable? Are buttons still tappable?
4. Check that fixed-width elements don't cause horizontal overflow

Dynamic Text Size

Both iOS (Dynamic Type) and Android (Font Size setting) allow users to increase text size system-wide. Your web app should respect these settings. Use relative units (rem, em) instead of fixed pixels for text. Test at the maximum text size setting — content should reflow, not overflow or get cut off.

Automated Mobile Testing Tools

• Accessibility Scanner (Android): free Google app that scans any screen for accessibility issues (contrast, touch targets, labels)
• Accessibility Inspector (Xcode): built-in tool for inspecting VoiceOver labels, traits, and hierarchy on iOS
• axe DevTools Mobile: commercial tool for automated accessibility testing on iOS and Android apps
• Web Accessibility Checker: run your URL through an automated checker to catch issues before mobile testing