Tiene acciones de accesibilidad válidas

Rule ID: has-valid-accessibility-actions

WCAG 2.0 (A) 4.1.2

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

• Define la lista de acciones que admite a través de accessibilityActions la propiedad.
• Implementar una onAccessibilityAction función para manejar 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 las acciones estándar:

El campo label es opcional para acciones predefinidas y a menudo no lo utilizan las tecnologías de asistencia.

Acciones personalizadas

Los campos name de acción y label de valor son obligatorios para acciones personalizadas.

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

onAccessibilityAction

El único argumento de 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 nombre de acción como un label valor permitirá que los usuarios de tecnología de asistencia utilicen gestos específicos. Si un usuario no puede usar ciertos gestos, es posible que no pueda completar tareas críticas dentro de una aplicación, como realizar una compra o programar una cita.

Cómo solucionar el problema

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

Ejemplos aprobados

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

Ejemplos reprobados

Se define correctamente una accessibilityAction personalizada, pero no hay una onAccessibilityAction función para manejar el evento.

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

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

<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