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:

• Defina a lista de ações que ele suporta através da propriedade accessibilityActions.
• Implemente uma função onAccessibilityAction para lidar com 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 é usado 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 garantir que ações personalizadas tenham tanto um name quanto um label permitirá que usuários de tecnologia assistiva usem gestos específicos. Se um usuário não conseguir usar certos gestos, ele pode não conseguir concluir tarefas críticas em 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 um manipulador de eventos onAccessibilityAction seja implementado para a ação. Se você estiver usando uma ação de acessibilidade personalizada, também deve 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

Um accessibilityAction personalizado está corretamente definido, 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 função onAccessibilityAction associada, mas um label não está configurado.

<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