Accessibility: State

Accessibility State

checked state

iOS

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)

Android

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"

Findings

• Android & iOS behave quite consistently between the cases
• lack of checked state is treated differently than checked: false

disabled state

iOS

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

Android

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"

Findings

• Android & iOS behave quite consistently between the cases
• lack of disabled state is treated the same as disabled: false

busy state

TODO: perform full check. Quick check showed that on iOS lack of busy state is treated the same as busy: false

selected state

TODO: perform full check. Quick check showed that on iOS lack of selected state is treated the same as selected: false

expanded state

iOS

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)

Android

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"