WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

Number of posts in this thread: 4 (In chronological order)

From: Mohith BP
Date: Tue, Nov 03 2020 1:35AM
Subject: Info requested on React Native role and state support with screen readers
No previous message | Next message →

Hi All,

I would like to know how both VoiceOver and TalkBack screen readers
support the 27 roles listed in the react native document.
The doc can be found on:
https://reactnative.dev/docs/accessibility

Is there any sample app which uses react native accessibilityRole and
accessibilityState to test the support with VO and TalkBack.

Thanks & Regards,
Mohith B. P.

From: Joe Humbert (A11y)
Date: Tue, Nov 03 2020 6:20AM
Subject: Re: Info requested on React Native role and state support with screen readers
← Previous message | Next message →

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

From: Joe Humbert (A11y)
Date: Tue, Nov 03 2020 6:24AM
Subject: Re: Info requested on React Native role and state support with screen readers
← Previous message | Next message →

Resending as HTML email with list so hopefully its more readable:



* 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/Spinner)
* 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





From: Mohith BP
Date: Tue, Nov 03 2020 10:30PM
Subject: Re: Info requested on React Native role and state support with screen readers
← Previous message | No next message

Hi Joe Humbert,

Thank you for the detailed response. This helps.
One of my friends suggested to use "https://snack.expo.io/" to build
React and run apps on devices quickly.
This seems to be not accessible with screen reader.
I will post if any positive progress.

Thanks & Regards,
Mohith B. P.

On 11/3/20, Joe Humbert (A11y) < = EMAIL ADDRESS REMOVED = > wrote:
> Resending as HTML email with list so hopefully its more readable:
>
>
>
> * 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/Spinner)
> * 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
>
>
>
>
>
>