Controle Ativo Aninhado

This page is not available in the language you requested. You have been redirected to the English version of the page.

Link to this page copied to clipboard

Evite incorporar múltiplos controles ativos dentro de um único elemento de acessibilidade

Not for use with personal data

note

Esta é uma regra experimental, e, portanto, seus resultados são considerados em fase de teste beta. Saiba mais sobre regras experimentais e como você pode ajudar a melhorá-las.

Saiba como estamos usando inteligência artificial para esta regra!

O Que Verificamos

Um elemento de acessibilidade não deve ter múltiplos controles ativos incorporados nele. O TalkBack não pode ativar mais de um controle dentro de um único elemento de acessibilidade, portanto, o usuário deve ser capaz de focar e interagir individualmente com cada controle ativo.

Visão Geral

Esta regra tem um impacto crítico para os usuários
Um elemento de acessibilidade não deve conter múltiplos controles interativos que são individualmente clicáveis, mas estão ocultos da tecnologia assistiva
O TalkBack só pode ativar uma ação por elemento focado - se múltiplos controles estiverem aninhados e ocultos, os usuários não poderão acessá-los de forma independente

Impacto para os Usuários

As pessoas que usam TalkBack são as mais afetadas. Quando múltiplos controles ativos estão aninhados dentro de um único elemento de acessibilidade, o TalkBack pode apenas ativar um deles ou pode ativar um completamente errado. Isto significa que os usuários podem desencadear uma ação não intencionada, não obter resposta alguma, ou ficar completamente incapazes de acessar certos controles.

Confirmar Problema de Controle Ativo Aninhado

Ative o TalkBack
Tente focar no controle
Tente ativar o controle
Uma das seguintes situações ocorrerá:
- Inacessível: Nada acontece
- Inacessível: O controle é ativado, mas sua caixa de foco contém outro controle
- Inacessível: Um controle diferente é ativado
- Acessível: O controle é ativado e é o único controle em sua caixa de foco

Corrigir Problemas

Evite elementos clicáveis aninhados. Certifique-se de que cada item clicável seja individualmente focável pela tecnologia assistiva. Se um elemento pai precisar lidar com uma ação geral, os controles filhos devem estar ocultos da tecnologia assistiva para que os usuários não sejam apresentados a interações conflitantes ou inalcançáveis.

XML

Não defina a propriedade importantForAccessibility em elementos clicáveis aninhados dentro de um layout. Se os controles filhos não devem ser individualmente acessíveis, certifique-se de que o pai lida com a ação e é o único elemento focável. "no" Compose

Evite o padrão abaixo, onde um pai clicável contém filhos ocultos com

— usuários de TalkBack não poderão alcançar os controles filhos ocultos: invisibleToUser() Se os filhos tiverem ações individuais, certifique-se de que o pai não seja clicável também. O exemplo abaixo mostra cada filho como independentemente clicável, com um pai não clicável:

Row(modifier = Modifier.clickable { ... }) {
    Text("Settings", 
        modifier = Modifier.clickable { ... }
            .semantics { 
        invisibleToUser() 
    })
    Text("Information", 
        modifier = Modifier.clickable { ... }
            .semantics { 
        invisibleToUser() 
    })
}

React Native

Row {
    Text("Settings", 
        modifier = Modifier.clickable { ... })
    Text("Information", 
        modifier = Modifier.clickable { ... })
}

Se um controle filho não deve ser individualmente focado, certifique-se de que o elemento pai seja acessível e lide com a ação. Defina

no filho para que ele esteja oculto da tecnologia assistiva: importantForAccessibility='no-hide-descendants' Posso Ignorar Esta Regra?

<TouchableOpacity
   style={{flexDirection:'row', alignItems: 'center',}}
   onPress={() => props.navigation.navigate('FocusableTextExample')}
   accessible={true}
   accessibilityLabel={"Purchase items in your shopping cart"}>
     <Button title="Buy"
       importantForAccessibility='no-hide-descendants'
       accessibilityElementsHidden='true'
       adjustsFontSizeToFit={true}
       marginBottom={20}
       titleStyle={{
         color: "white",
         fontSize: 20,
        }}
        buttonStyle={{
          height: 50,
          width: 200
        }}
     />
</TouchableOpacity>