Accessibility Guidelines

The rules are the web's, WCAG 2.2 at level AA, applied to native screens. Every control needs a spoken label and role; text needs a contrast ratio of at least 4.5:1 (3:1 for large text); touch targets should be at least 48 × 48 dp on Android (Apple asks for 44 × 44 pt); and text must survive the user's font scale, which PixelRatio read with PixelRatio.getFontScale().

Test with the real screen readers. On Android that is TalkBack (Settings > Accessibility), which this emulator image includes: it can be switched on from a script,

Turning TalkBack on from the command lineShell

adb -s emulator-5554 shell settings put secure enabled_accessibility_services \
  com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService
adb -s emulator-5554 shell settings put secure accessibility_enabled 1

and then you explore by touch: a tap focuses and reads, a double tap activates, a swipe right moves on. The emulator has no speech engine, but TalkBack logs every utterance it would speak, which makes a surprisingly good test record:

Output of 219

E talkback: SpeechControllerImpl: TTS is not ready. ... fragments:[{text:Cart, ...},
  {text:Heading, ...}]
E talkback: SpeechControllerImpl: TTS is not ready. ... fragments:[{text:Removed Salt and
  Saffron, ...}]

On iOS, VoiceOver and Xcode 10 's Accessibility Inspector play the same roles (not run here). Automated tools catch some problems: Google's Accessibility Scanner app, the eslint-plugin-react-native-a11y rules (3.5.1, MIT) in the editor, and the audit script in Auditing and Translating.

MENU