E-mail List Archives
Thread: Info requested on React Native role and state support with screen readers
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
-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
Mohith BP
Sent: Tuesday, November 3, 2020 3:36 AM
To: WebAIM Discussion List < = EMAIL ADDRESS 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
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://webaim.org/discussion/archives
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
-----Original Message-----
From: Joe Humbert (A11y) < = EMAIL ADDRESS REMOVED = >
Sent: Tuesday, November 3, 2020 8:20 AM
To: 'WebAIM Discussion List' < = EMAIL ADDRESS 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 ADDRESS REMOVED = >
= EMAIL ADDRESS REMOVED = > On Behalf Of Mohith BP
Sent: Tuesday, November 3, 2020 3:36 AM
To: WebAIM Discussion List < <mailto: = EMAIL ADDRESS REMOVED = >
= EMAIL ADDRESS 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 ADDRESS REMOVED =
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
>
>
>
>
>
> -----Original Message-----
> From: Joe Humbert (A11y) < = EMAIL ADDRESS REMOVED = >
> Sent: Tuesday, November 3, 2020 8:20 AM
> To: 'WebAIM Discussion List' < = EMAIL ADDRESS 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 ADDRESS REMOVED = >
> = EMAIL ADDRESS REMOVED = > On Behalf Of Mohith BP
>
> Sent: Tuesday, November 3, 2020 3:36 AM
>
> To: WebAIM Discussion List < <mailto: = EMAIL ADDRESS REMOVED = >
> = EMAIL ADDRESS 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 ADDRESS REMOVED =
>
> > > > >