Has Valid Accessibility Actions

Rule ID: has-valid-accessibility-actions

WCAG 2.0 (A) 4.1.2

Accessibility actions allow assistive technology to programmatically invoke the actions of a component. To support accessibility actions, a component must do two things:

• Define the list of actions it supports via the accessibilityActions property.
• Implement an onAccessibilityAction function to handle action requests.

The accessibilityActions property should contain a list of action objects. Each action object should contain the following fields:

Standard Actions

The name field must be one of the following for standard actions:

The label field is optional for standard actions and is often unused by assistive technologies.

Custom Actions

The name and label fields are required for custom actions.

<View
  accessibilityActions={[
    {name: 'cut', label: 'cut'}
  ]}
/>

onAccessibilityAction

The only argument to this function is an event containing the name of the action to perform.

<View
  accessible={true}
  accessibilityActions={[
    {name: 'cut', label: 'cut'},
    {name: 'copy', label: 'copy'},
    {name: 'paste', label: 'paste'},
  ]}
  onAccessibilityAction={(event) => {
    switch (event.nativeEvent.actionName) {
      case 'cut':
        Alert.alert('Alert', 'cut action success');
        break;
      case 'copy':
        Alert.alert('Alert', 'copy action success');
        break;
      case 'paste':
        Alert.alert('Alert', 'paste action success');
        break;
    }
  }}
/>

Why It Matters

Using the correct accessibilityActions name field or making sure that custom actions have both a name and label will allow assistive technology users to use specific gestures. If a user can't use certain gestures, they may not be able to complete critical tasks within an app such as making a purchase or scheduling an appointment.

How to Fix the Problem

Ensure that a name is specified for standard accessibility actions and an onAccessibilityAction event handler is implemented for the action. If you are using a custom accessibility action, you must also define a label.

Passing Examples

<View
  accessibilityActions={[
    {name: 'magicTap'},
  ]}
  onAccessibilityAction={(event) => {
    switch (event.nativeEvent.actionName) {
      case 'magicTap':
        Alert.alert('Alert', 'magicTap action success');
        break;
    }
  }}
/>

Failing Examples

A custom accessibilityAction is properly defined, but there is not an onAccessibilityAction function to handle the event.

<View
  accessibilityActions={[
    {name: 'cut', label: 'cut'},
  ]}
/>

A custom action is defined and has an associated onAccessibilityAction function, but a label is not set.

<View
  accessibilityActions={[
    {name: 'cut'},
  ]}
  onAccessibilityAction={(event) => {
    switch (event.nativeEvent.actionName) {
      case 'cut':
        Alert.alert('Alert', 'cut action success');
        break;
    }
  }}
/>

Resources

• React Native Accessibility Actions