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.

Accessibility value - React Native

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 min, max, and no, or text using text. The accessibilityState indicates the current state of a component, for example disabled or checked.

JSX

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

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

Bijdragen