Skip to content

Accessibility Behavior

Maciej Jastrzebski edited this page Oct 2, 2022 · 11 revisions

Methods of testing:

  • iOS: using Accessibility Inspector (in iOS mode!) on iOS simulator
  • Android: using TalkBack on Android emulator

<Text> component

<Text> behavior in iOS

Component Screen reader Label Value Traits Identifier Hint User Input Label
<Text >Hello!</Text> Hello! Hello ! (none) Static Text (none) (none) Hello !
<Text accessible accessibilityRole="text">Hello!</Text> Hello! Hello ! (none) Static Text (none) (none) Hello !
<Text accessible={true}>Hello!</Text> Hello! Hello ! (none) Static Text (none) (none) Hello !
<Text accessible={false}>Hello!</Text> (ignored) (ignored) (ignored) (ignored) (ignored) (ignored) (ignored)
<Text accessibilityRole="text">Hello!</Text> Hello! Hello ! (none) Static Text (none) (none) Hello !
<Text accessibilityRole="none">Hello!</Text> Hello! Hello ! (none) (none) (none) (none) Hello !

Findings:

  • default accessible prop value is true
  • default accessibilityRole is "text"
  • changing accessible to false makes screen reader ignore the view
  • changing accessibilityRole to "none" removes Static Text trait, but view is still readable by screen reader

<Text> behavior in Android

Component Screen reader
<Text >Hello!</Text> Hello!
<Text accessible accessibilityRole="text">Hello!</Text> Hello!
<Text accessible={true}>Hello!</Text> Hello!
<Text accessible={false}>Hello!</Text> Hello!
<Text accessibilityRole="text">Hello!</Text> Hello!
<Text accessibilityRole="none">Hello!</Text> Hello!
<Text importantForAccessibility="no">Hello!</Text> (ignored)
<Text importantForAccessibility="no-hide-descendants">Hello!</Text> (ignored)

Findings:

  • Android accessible props does not affect TalkBack screen reader behaviour
  • Android accessibilityRole props does not affect TalkBack screen reader behaviour
  • Android ignores element if importantForAccessibility value "no" or "no-hide-descendants"

<Text> handling recommendations

  • assume default accessible value of true
  • assume default accessibilityRole of text
  • assume no role when accessible={false} or accessibilityRole="none" (based on iOS semantics)
  • assume no role when importantForAccessibility="no" or importantForAccessibility="no-hide-descendants" (based on Android semantics)
Clone this wiki locally