Possui Ações de Acessibilidade Válidas

ID da Regra: has-valid-accessibility-actions

WCAG 2.0 (A) 4.1.2

As ações de acessibilidade permitem que tecnologia assistiva invoque programaticamente as ações de um componente. Para dar suporte a ações de acessibilidade, um componente deve fazer duas coisas:

• Definir a lista de ações que suporta através da propriedade accessibilityActions .
• Implementar uma função onAccessibilityAction para lidar com as solicitações de ação.

A propriedade accessibilityActions deve conter uma lista de objetos de ação. Cada objeto de ação deve conter os seguintes campos:

Ações Padrão

O campo name deve ser um dos seguintes para ações padrão:

O campo label é opcional para ações padrão e muitas vezes não é utilizado por tecnologias assistivas.

Ações Personalizadas

Os campos name e label são obrigatórios para ações personalizadas.

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

onAccessibilityAction

O único argumento para esta função é um evento contendo o nome da ação a ser realizada.

<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 Que Isso é Importante

Usar o campo correto accessibilityActions name ou assegurar que ações personalizadas tenham tanto um name e label permitirá que usuários de tecnologia assistiva usem gestos específicos. Se um usuário não puder usar certos gestos, ele pode não conseguir completar tarefas críticas dentro de um aplicativo, como fazer uma compra ou agendar um compromisso.

Como Corrigir o Problema

Certifique-se de que um name seja especificado para ações de acessibilidade padrão e que um manipulador de eventos onAccessibilityAction seja implementado para a ação. Se você estiver usando uma ação de acessibilidade personalizada, também deverá definir um label.

Exemplos de Sucesso

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

Exemplos de Falha

Uma accessibilityAction personalizada é definida corretamente, mas não há uma função onAccessibilityAction para lidar com o evento.

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

Uma ação personalizada é definida e tem uma onAccessibilityAction função associada, mas um label não está definido.

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

Recursos

• Ações de Acessibilidade do React Native