When should we use `accessibilityRole` in React Native?

user_13498876 0
Viewed 5362

Is this correct? I'm afraid it will read the word 'switch' twice to the user. 

<Switch
      accessible={true}
      accessibilityLabel="Switch button"
      accessibilityHint="Double tap to toggle setting"
      accessibilityRole="switch"   
/>

Many thanks in advance.

voiceover talkback react-native accessibility
2 Answers

A couple notes on accessibility here:

  • As of 0.60, all interactive React Native components are accessible by default. (accessible=true)
  • Beware when using the accessible parameter. It will bundle any child elements into one accessible component and a screen reader will not allow users to select individual components when true. (You may need to override the default behavior because of this.)
  • Particularly with labels, remember to use full punctuation, or you may create unintended and overwhelming run-on sentences.
  • For UX, your label should read the purpose of the switch in a concise manner. Reading it without context, I have no idea what this toggle would actually do.

To answer your question:

You are correct that this setup would read out "switch button" twice, followed by the hint.

I tested the <Switch> component on an iPad just now with VoiceOver. By default, it is accessible and reads with a role of "button". Giving it a parameter of accessibilityRole='switch' reads with a role of "switch button" and automatically includes the "Double tap to toggle setting." hint.

The following component will read to the user as, "Airplane mode. switch button ... Double tap to toggle setting."

<Switch
      accessibilityLabel="Airplane mode."
      accessibilityRole="switch"   
/>
user_109340970
user_61696680
Related