-
Notifications
You must be signed in to change notification settings - Fork 273
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
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 istrue
- default
accessibilityRole
is"text"
- changing
accessible
tofalse
makes screen reader ignore the view - changing
accessibilityRole
to"none"
removes Static Text trait, but view is still readable by screen reader
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"
- assume default
accessible
value oftrue
- assume default
accessibilityRole
oftext
- assume no role when
accessible={false}
oraccessibilityRole="none"
(based on iOS semantics) - assume no role when
importantForAccessibility="no"
orimportantForAccessibility="no-hide-descendants"
(based on Android semantics)