Has Valid Accessibility State

Link to Has Valid Accessibility State copied to clipboard
Free Trial

Rule ID: has-valid-accessibility-state

WCAG 2.0 (A) 4.1.2

Describes the current state of a component to the user of assistive technology.

accessibilityState is an object. It contains the following fields:

Name Description Type Required
disabled Indicates whether the element is disabled or not. boolean No
selected Indicates whether a selectable element is currently selected or not. boolean No
checked Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes. boolean or 'mixed' No
busy Indicates whether an element is currently busy or not. boolean No
expanded Indicates whether an expandable element is currently expanded or collapsed. boolean No

To use, set the accessibilityState to an object with a specific definition.

Why It Matters

The accessibilityState fields must be spelled correctly and correspond to values that make sense to describe the intended accessibility state. 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 accessibilityState prop is an object that has fields set to a valid name and type value.

Passing Examples

<TouchableOpacity accessibilityState={{ checked: true }} />
<TouchableOpacity accessibilityState={{ checked: "mixed" }} />
<TouchableOpacity accessibilityState={{ checked: true, disabled: true }} />

Failing Examples

<TouchableOpacity accessibilityState="selected" />
<TouchableOpacity accessibilityState={{ disabled: "true" }} />
<View accessibilityStates={["checked"]} />