Ação Inacessível

O Que Verificamos

Um elemento interativo deve ser ativável por tecnologia assistiva. Esta regra verifica se a ação associada a um elemento interativo pode ser focada *e* acionada usando o TalkBack ou Switch Access.

Em Resumo

• Esta regra tem um impacto crítico para os usuários
• Esta regra sinaliza elementos interativos que a tecnologia assistiva não pode focar ou ativar
• Elementos interativos não estão disponíveis para o TalkBack quando marcados como não importantes para acessibilidade
• Um elemento pai clicável com elementos filho que possuem texto são inacessíveis quando ocultos da tecnologia assistiva

Impacto para os Usuários

Usuários de tecnologia assistiva são os mais impactados. Quando o TalkBack pode focar em um elemento interativo, mas não pode ativá-lo, os usuários podem não conseguir completar ações críticas — como enviar um formulário, alternar uma configuração ou navegar para outra tela. Isso cria uma barreira completa para pessoas que dependem exclusivamente da tecnologia assistiva para interagir com o aplicativo.

Confirmar Problema de Ação Inacessível

1. Ative o TalkBack ou o Switch Access
2. Tente focar e interagir com o elemento
3. Uma das seguintes situações ocorrerá:
   • Inacessível: O elemento não pode ser focado ou sua ação não pode ser acionada
   • Acessível: O elemento é focado e sua ação pode ser acionada

Corrigir Problemas

Para resolver um problema de Ação Inacessível, certifique-se de que o elemento interativo não esteja explicitamente oculto da tecnologia assistiva. Vistas que as pessoas podem acessar sem tecnologia assistiva devem estar igualmente disponíveis para aqueles que a utilizam.

XML

Não defina a propriedade importantForAccessibility para "no" em vistas tocáveis. Se este atributo estiver presente, remova-o ou defina-o como "yes" ou "auto".

Compose

Não marque vistas Compose tocáveis como invisibleToUser(). Remova este modificador para garantir que o elemento esteja disponível para o TalkBack e o Switch Access.

Button(onClick = {  },
    modifier = Modifier.semantics {
        // Remove invisibleToUser() to make this element accessible
        invisibleToUser()
    }
) {
    Text("Click here")
}


FloatingActionButton(onClick = {  }) {
    Image(
        painter = painterResource(id = R.drawable.floating_button),
        contentDescription = "floating button",
        Modifier.semantics { 
            // Remove invisibleToUser() to make this element accessible
            invisibleToUser() 
        }
    )
}

React Native

Este problema é incomum para controles padrão tocáveis ou pressionáveis em React Native, mas pode ocorrer com elementos interativos personalizados ou quando importantForAccessibility é explicitamente definido como 'no' ou 'no-hide-descendants' em um elemento interativo.

Opção 1: Permitir que a vista pai gerencie o foco

Defina o importantForAccessibility da vista contenedora para 'yes' e atribua o accessibilityRole apropriado. accessibilityLabelDefina importantForAccessibility para 'no-hide-descendants' em quaisquer elementos filho decorativos, para que o TalkBack não os foque separadamente:

<View
  importantForAccessibility='yes'
  accessibilityRole='button'
  accessibilityLabel='Learn more about Deque'
  onTouchStart={openLink}
>
  <Image 
    source={DequeLogo}
    importantForAccessibility='no-hide-descendants'
    style={{ width: 100, height: 100 }} 
  />
</View>

Opção 2: Permitir que o próprio elemento gerencie o foco

Defina importantForAccessibility='yes' e accessibilityRole diretamente no controle:

<Image
  source={DequeLogo}
  importantForAccessibility='yes'
  accessibilityRole='imagebutton'
  accessibilityLabel='Learn more about Deque'
  onTouchStart={openLink}
  style={{ width: 100, height: 100 }}
/>

Flutter

Os widgets Material do Flutter (ElevatedButton, IconButton, etc.) expõem ações de toque ao leitor de tela automaticamente. Ao construir elementos interativos personalizados com GestureDetector, envolva-os em MergeSemantics com um widget Semantics para garantir que o leitor de tela possa identificar e ativar o elemento em uma única parada de foco.

MergeSemantics(
  child: Semantics(
    button: true,
    label: 'Archive item',
    child: GestureDetector(
      onTap: () {},
      child: Container(
        padding: const EdgeInsets.all(12.0),
        color: Colors.green.shade100,
        child: const Text('Archive item'),
      ),
    ),
  ),
)

Posso Ignorar Esta Regra?

Ação Inacessível tem um impacto Crítico para os usuários, e recomendamos fortemente corrigir esses problemas. Como esta é uma regra experimental, você deve verificar os resultados manualmente. Se você confirmou que o elemento é ativável pelo TalkBack, pode ser aceitável ignorar a constatação. Saiba mais sobre ignorar regras.

Recursos

Páginas de Curso da Deque University

• 2.1.1 Teclado (A)

Nota: O acesso completo aos recursos da Deque University requer uma assinatura.

Outros Recursos

• Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.1, Recomendação da W3C
  • Critério de Sucesso 2.1.1 - Teclado
• Documentos de Compreensão WCAG 2.1
  • Compreendendo 2.1.1 A - Teclado