Skip to main content
Logo Appt Light

Accessibility value on React Native

An accessibility value helps users of assistive technologies to understand the value of elements on the screen. A slider should indicate the currently selected value, and ideally also it's minimum and maximum value. The screen reader announces the value of elements as it reads the screen. It is important to assign correct values to elements to avoid misunderstanding.

In React Native you can use the accessibilityValue and accessibilityState props to set an accessibility value. The accessibilityValue indicates the current value of a component. You can indicate a range, using minmax, and no, or text using text. The accessibilityState indicates the current state of a component, for example disabled or checked.

  accessibilityValue={{min: 0, max: 100, now: 50}}
  accessibilityState="busy" />

  accessibilityValue={{text: "Custom"}}
  accessibilityState="disabled" />


Let us know!