Has Valid Accessibility Role

Rule ID: has-valid-accessibility-role

WCAG 2.0 (A) 4.1.2

accessibilityRole communicates the purpose of a component to the user of assistive technology.

accessibilityRole can be one of the following:

• adjustable Used when an element can be "adjusted" (e.g. a slider).
• alert Used when an element contains important text to be presented to the user.
• button Used when the element should be treated as a button.
• checkbox Used when an element represents a checkbox that can be checked, unchecked, or have a mixed checked state.
• combobox Used when an element represents a combo box, which allows the user to select among several choices.
• header Used when an element acts as a header for a content section (e.g. the title of a navigation bar).
• image Used when the element should be treated as an image. Can be combined with a button or link.
• imagebutton Used when the element should be treated as a button and is also an image.
• keyboardkey Used when the element acts as a keyboard key.
• link Used when the element should be treated as a link.
• menu Used when the component is a menu of choices.
• menubar Used when a component is a container of multiple menus.
• menuitem Used to represent an item within a menu.
• none Used when the element has no role.
• progressbar Used to represent a component that indicates the progress of a task.
• radio Used to represent a radio button.
• radiogroup Used to represent a group of radio buttons.
• scrollbar Used to represent a scroll bar.
• search Used when a text field element should also be treated as a search field.
• spinbutton Used to represent a button which opens a list of choices.
• summary Used when an element can be used to provide a quick summary of current conditions in the app when the - app first launches.
• switch Used to represent a switch which can be turned on and off.
• tab Used to represent a tab.
• tablist Used to represent a list of tabs.
• text Used when the element should be treated as static text that cannot change.
• timer Used to represent a timer.
• togglebutton Used to represent a toggle button. Should be used with accessibilityState checked to indicate if the button is toggled on or off.
• toolbar Used to represent a toolbar (a container of action buttons or components).
• grid Used with ScrollView, VirtualizedList, FlatList, or SectionList to represent a grid. Adds the in/out of grid announcements to Android's GridView.

Why It Matters

Elements assigned invalid role values are not interpreted by assistive technology as intended by the developer.

When screen readers and other assistive technologies do not know the role of each element, they are not able to interact with it intelligently, nor are they able to communicate the role to the user. An element's features, properties, and methods of conveying information to and/or from the user can't be communicated via assistive technologies when a role value is invalid.

How to Fix the Problem

Ensure the accessibilityRole value is a valid role.

Passing Examples

<TouchableOpacity accessibilityRole="button">
  <Text>Increase Count</Text>
</TouchableOpacity>

Failing Examples

<TouchableOpacity accessibilityRole="secondary-button">
  <Text>Increase Count</Text>
</TouchableOpacity>

Resources

• React Native accessibilityRole