Tiene Acciones de Accesibilidad Válidas

ID de la regla: tiene-acciones-de-accesibilidad-válidas

WCAG 2.0 (A) 4.1.2

Las acciones de accesibilidad permiten a la tecnología de asistencia invocar programáticamente las acciones de un componente. Para soportar acciones de accesibilidad, un componente debe hacer dos cosas:

• Definir la lista de acciones que soporta a través de la propiedad accessibilityActions.
• Implementar una función onAccessibilityAction para manejar las solicitudes de acción.

La propiedad accessibilityActions debe contener una lista de objetos de acción. Cada objeto de acción debe contener los siguientes campos:

Acciones Estándar

El campo name debe ser uno de los siguientes para acciones estándar:

El campo label es opcional para acciones estándar y a menudo no es utilizado por tecnologías de asistencia.

Acciones Personalizadas

Los campos name y label son requeridos para acciones personalizadas.

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

onAccessibilityAction

El único argumento para esta función es un evento que contiene el nombre de la acción a realizar.

<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;
    }
  }}
/>

Por qué Es Importante

Usar el campo accessibilityActions name correcto o asegurarse de que las acciones personalizadas tengan tanto un name como un label permitirá a los usuarios de tecnología de asistencia usar gestos específicos. Si un usuario no puede usar ciertos gestos, puede que no logre completar tareas críticas dentro de una aplicación, como hacer una compra o programar una cita.

Cómo Solucionar el Problema

Asegúrese de que se especifique un name para las acciones de accesibilidad estándar y que se implemente un controlador de eventos onAccessibilityAction para la acción. Si está utilizando una acción de accesibilidad personalizada, también debe definir un label.

Ejemplos Correctos

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

Ejemplos Incorrectos

Un accessibilityAction personalizado está correctamente definido, pero no hay una función onAccessibilityAction para manejar el evento.

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

Se define una acción personalizada y tiene una función onAccessibilityAction asociada, pero no se establece un label.

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

Recursos

• Acciones de Accesibilidad de React Native