Skip to content

Accessibility: State

Maciej Jastrzebski edited this page Oct 9, 2022 · 7 revisions

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

TODO: perform full check. Quick check showed that on iOS lack of expanded state is treated differently than expanded: false

Clone this wiki locally