| 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 than checked: 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 as disabled: 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
| Control |
Screen Reader |
Label |
Value |
Traits |
Identifier |
Hint |
User Input Labels |
<View accessible accessibilityState={{ expanded: true }} /> |
"expanded" |
(none) |
"expanded" |
(none) |
(none) |
(none) |
(none) |
<View accessible accessibilityState={{ expanded: false }} /> |
"collapsed" |
(none) |
"collapsed" |
(none) |
(none) |
(none) |
(none) |
<View accessible /> |
(none) |
(none) |
(none) |
(none) |
(none) |
(none) |
(none) |
| Control |
Screen Reader |
<View accessible accessibilityRole="menu" accessibilityState={{ expanded: true }} /> |
"expanded menu, actions available use tap with 3 fingers to view" |
<View accessible accessibilityRole="menu" accessibilityState={{ expanded: false }} /> |
"collapsed menu, actions available use tap with 3 fingers to view" |
<View accessible accessibilityRole="menu" /> |
"menu, actions available use tap with 3 fingers to view" |