Has Valid Accessibility Actions

Link to Has Valid Accessibility Actions copied to clipboard
Free Trial

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:

Name Type Required
name string yes
label string no

Standard Actions

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

Name Platform Support
magicTap iOS only
escape iOS only
activate Android and iOS
increment Android and iOS
decrement Android and iOS
longpress Android only

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