Has Valid Accessibility Value
Link to Has Valid Accessibility Value copied to clipboard
Rule ID: has-valid-accessibility-value
Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).
accessibilityValue is an object. It contains the following fields:
| Name | Description | Type | Required |
|---|---|---|---|
min |
The minimum value of this component's range. | integer | Required if now is set. |
max |
The maximum value of this component's range. | integer | Required if now is set. |
now |
The current value of this component's range. | integer | No |
text |
A textual description of this component's value. Will override min, now, and max if set. |
string | No |
Why It Matters
The accessibilityValue fields must be spelled correctly and correspond to values that make sense to describe the intended accessibility value. Failure to comply with allowed values results in components that are not accessible to assistive technology users.
How to Fix the Problem
Ensure that the accessibilityValue prop is an object that has fields set to a valid name and type value.
Passing Examples
<TouchableOpacity accessibilityValue={{ min: 0, now: 40, max: 70 }} />
<TouchableOpacity accessibilityValue={{ text: "stuff" }} />Failing Examples
<TouchableOpacity accessibilityValue={{ min: 0, now: 50, max: 100, text: "stuff" }} />
<TouchableOpacity accessibilityValue={{ now: 50 }} />
<TouchableOpacity accessibilityValue="stuff" />
<TouchableOpacity accessibilityValue={{ min: "0", now: "50", max: "100" }} />
<TouchableOpacity accessibilityValue={{ text: 0 }} />