React Native A11y

Resources

• https://reactnative.dev/docs/accessibility
• https://callstack.com/blog/react-native-android-accessibility-tips/

A11y properties

• accessible: when true, groups children into a single selectable component
• accessibilityLabel: read for the element. Unclear: if not provided, does it default to all the Text children’s contents?
• accessibilityHint: explains what accessing it does. Is this too verbose?
• accessibilityRole: what type of interaction it is. Lots of options: https://reactnative.dev/docs/accessibility#accessibilityrole - common ones:
  • button
  • checkbox
  • header
  • image
  • menu
  • progressbar
  • radio
  • radiogroup
  • search
  • switch - a toggle
  • tab
  • tablist
  • text - static text
• accessibilityState - object with true/false values for disabled, selected, checked, busy, and/or expanded
• accessibilityValue - at least for sliders like min, max, and now - unclear if needed for text inputs
• accessibilityElementsHidden - hides this element from screen readers