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, o(s) seu(s) resultado(s) são considerados em fase de testes beta. Saiba mais sobre regras experimentais e como você pode ajudar a melhorá-los.

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.

Exemplo de Falha ❌

An Android shopping app showing three product cards each outlined with a red TalkBack focus border. Inside each card are 'Add to Cart', wishlist, and share buttons that are unreachable. A label at the bottom reads 'Cards are focused - buttons unreachable'

TalkBack focuses each entire card as a single unit

Os botões "Adicionar ao Carrinho", lista de desejos, e compartilhar aninhados dentro de cada cartão estão inacessíveis

Os usuários do TalkBack não conseguem ativar os controles individuais dentro do cartão

Exemplo de Sucesso ✅

An Android shopping app showing three product cards where each control within a card is individually numbered with a green badge: image (1), product name (2), Add to Cart (3), wishlist (4), and share (5). A label reads 'Individual controls within cards can be focused'

Cada controle dentro de um cartão é individually focusable pelo TalkBack

O TalkBack navega para a imagem, nome do produto, botão "Adicionar ao Carrinho", lista de desejos e botão de compartilhar como elementos separados

Os usuários podem ativar cada ação de forma independente

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 configure a propriedade importantForAccessibility para "no" em elementos clicáveis aninhados dentro de um layout. Se os controles filhos não devem ser acessíveis individualmente, certifique-se de que o pai lide com a ação e seja o único elemento focável.

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

Evite o padrão abaixo, onde um elemento pai clicável contém filhos ocultos com invisibleToUser() — os usuários do TalkBack não conseguirão acessar os controles filhos ocultos:

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

Se um controle filho não deve ser focado individualmente, assegure-se de que o elemento pai seja acessível e manuseie a ação. Configure importantForAccessibility='no-hide-descendants' no filho para que ele seja ocultado das tecnologias assistivas:

<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>