-
Notifications
You must be signed in to change notification settings - Fork 273
Accessibility: State
Maciej Jastrzebski edited this page Oct 9, 2022
·
7 revisions
Control | Screen Reader | Label | Value | Traits | Identifier | Hint | User Input Labels |
---|---|---|---|---|---|---|---|
<View accessible={true} accessibilityRole="checkbox" accessibilityState={{ checked: true }} /> |
"checkbox, checked" | (none) | checkbox, checked | (empty) | (none) | (none) | (empty array) |
<View accessible={true} accessibilityRole="checkbox" accessibilityState={{ checked: 'mixed' }} /> |
"checkbox, mixed" | (none) | checkbox, mixed | (empty) | (none) | (none) | (empty array) |
<View accessible={true} accessibilityRole="checkbox" accessibilityState={{ checked: false }} /> |
"checkbox, not checked" | (none) | checkbox, not checked | (empty) | (none) | (none) | (empty array) |
<View accessible={true} accessibilityRole="checkbox" accessibilityState={{}} /> |
"checkbox" | (none) | checkbox | (empty) | (none) | (none) | (empty array) |
<View accessible={true} accessibilityRole="checkbox" /> |
"checkbox" | (none) | checkbox | (empty) | (none) | (none) | (empty array) |
Control | Screen Reader |
---|---|
<View accessible={true} accessibilityRole="checkbox" accessibilityState={{ checked: true }} /> |
"checked, checkbox" |
<View accessible={true} accessibilityRole="checkbox" accessibilityState={{ checked: 'mixed' }} /> |
"mixed, checkbox" |
<View accessible={true} accessibilityRole="checkbox" accessibilityState={{ checked: false }} /> |
"not checked, checkbox" |
<View accessible={true} accessibilityRole="checkbox" accessibilityState={{}} /> |
"checkbox" |
<View accessible={true} accessibilityRole="checkbox" /> |
"checkbox" |
- Android & iOS behave quite consistently between the cases
- lack of
checked
state is treated differently thanchecked: false
Control | Screen Reader | Label | Value | Traits | Identifier | Hint | User Input Labels |
---|---|---|---|---|---|---|---|
<View accessible={true} accessibilityRole="button" accessibilityState={{ disabled: true }} |
"button, not enabled" | (none) | (none) | Button, Not Enabled | (none) | (none) | Button |
<View accessible={true} accessibilityRole="button" accessibilityState={{ disabled: false }} |
"button" | (none) | (none) | Button | (none) | (none) | Button |
<View accessible={true} accessibilityRole="button" accessibilityState={{}} |
"button" | (none) | (none) | Button | (none) | (none) | Button |
<View accessible={true} accessibilityRole="button" |
"button" | (none) | (none) | Button | (none) | (none) | Button |
Control | Screen Reader |
---|---|
<View accessible={true} accessibilityRole="button" accessibilityState={{ disabled: true }} |
"button, disabled" |
<View accessible={true} accessibilityRole="button" accessibilityState={{ disabled: false }} |
"button, double tap to activate" |
<View accessible={true} accessibilityRole="button" accessibilityState={{}} |
"button, double tap to activate" |
<View accessible={true} accessibilityRole="button" |
"button, double tap to activate" |
- Android & iOS behave quite consistently between the cases
- lack of
disabled
state is treated the same asdisabled: false
TODO: perform full check. Quick check showed that on iOS lack of busy
state is treated the same as busy: false
TODO: perform full check. Quick check showed that on iOS lack of selected
state is treated the same as selected: false
TODO: perform full check. Quick check showed that on iOS lack of expanded
state is treated differently than expanded: false