WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Info requested on React Native role and state support with screen readers

for

From: Joe Humbert (A11y)
Date: Nov 3, 2020 6:20AM

Hi Mohith,

From my experience, if the OS has a corresponding role (e.g.,
accessibilityTrait on iOS) or native element the role will be supported:
(these are just guesses)

adjustable - iOS only, supported
alert - supported on iOS, probably on Android (if mapped to a
dialog/alertdialog)
button - supported on iOS and Android
checkbox - supported on Android, iOS does not have a native checkbox
combobox - unknown iOS, possibly on Android (if mapped to
Spinner/DropdownButton)
header - supported on iOS, possibly on Android (if mapped to
android:accessibilityHeading)
image - supported on iOS & Android
imagebutton - supported on iOS & Android
keyboardkey - supported on iOS, unknown on Android
link - supported on iOS & Android
menu - possibly supported in both
menubar - unknown
menuitem - unknown
none - supported on iOS, possibly Android (if mapped to
importantforaccessibility, but that seems separate)
progressbar - supported on iOS, possibly on Android
radio - supported on Android, no native radio button on iOS
radiogroup - supported on Android, no native radio button on iOS
scrollbar - supported on iOS, unknown on android
search - supported on iOS, possibly on Android
spinbutton - supported on iOS, unknown on Android (possibly if it maps to a
picker)
summary - supported on iOS, unknown on Android (possibly if it maps to
android:accessibilityPaneTitle)
switch - supported on iOS & Android
tab - supported on iOS & Android
tablist - possibly on iOS & Android
text - supported on iOS & Android
timer - possibly on iOS, unknown on Android
Toolbar- unknown, but possibly on Android

Seems like React Native could use better documentation. They already have
Android and iOS "flags" in the documentation (Although the Android one has
color contrast issues).

To my knowledge, there is no app on either OS that has all of these and the
states provided in a way that could be easily used for testing. If you find
one, I would like to know so I can recommend it

You might be able to do some testing using the "live" code editor here
https://reactnative.dev/docs/getting-started#interactive-examples, but I
have not tried it.

References:
https://developer.apple.com/documentation/objectivec/nsobject/uiaccessibilit
y/accessibility_traits
https://material.io/components
https://api.flutter.dev/flutter/widgets/Semantics-class.html

Thankx,
Joe Humbert
Accessibility Champion
Android & iOS Accessibility Novice