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:24AM

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





-----Original Message-----
From: Joe Humbert (A11y) < <EMAIL REMOVED> >
Sent: Tuesday, November 3, 2020 8:20 AM
To: 'WebAIM Discussion List' < <EMAIL REMOVED> >
Subject: RE: [WebAIM] Info requested on React Native role and state support
with screen readers



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>
https://reactnative.dev/docs/getting-started#interactive-examples, but I
have not tried it.



References:


<https://developer.apple.com/documentation/objectivec/nsobject/uiaccessibili
ty/accessibility_traits>
https://developer.apple.com/documentation/objectivec/nsobject/uiaccessibilit
y/accessibility_traits

<https://material.io/components> https://material.io/components

<https://api.flutter.dev/flutter/widgets/Semantics-class.html>
https://api.flutter.dev/flutter/widgets/Semantics-class.html



Thankx,

Joe Humbert

Accessibility Champion

Android & iOS Accessibility Novice



-----Original Message-----

From: WebAIM-Forum < <mailto: <EMAIL REMOVED> >
<EMAIL REMOVED> > On Behalf Of Mohith BP

Sent: Tuesday, November 3, 2020 3:36 AM

To: WebAIM Discussion List < <mailto: <EMAIL REMOVED> >
<EMAIL REMOVED> >

Subject: [WebAIM] Info requested on React Native role and state support with
screen readers



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>
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.


http://list.webaim.org/ List archives at
<http://webaim.org/discussion/archives>;
http://webaim.org/discussion/archives

<EMAIL REMOVED>