Nome do CheckBox

Qualquer elemento CheckBox deve ter um nome acessível disponível para tecnologias assistivas, como TalkBack e Voice Access.

Impacto

As pessoas que usam o TalkBack são as mais impactadas por problemas de acessibilidade encontrados por esta regra.

Confirmação

1. Ative o TalkBack
2. Tente focar o controle
3. Uma das seguintes opções acontecerá:
   • Inacessível: o TalkBack anuncia apenas o valor e a função.
   • Acessível: o nome e o valor são lidos pelo TalkBack.

Como Corrigir

XML

Forneça um nome explícito para o CheckBox controle utilizando um TextView e associando-o ao seu CheckBox elemento.

CheckBox checkBox = .......; // Role: CheckBox
TextView label = .......; // Role: Label
label.setLabelFor(checkBox.getId()); // Associate the Checkbox with its Name

Envolva o componente de checkbox e texto dentro de um elemento com o

papel de acessibilidade, e garanta que a ação do controle possa ser invocada no componente pai. Checkbox React Native

Row(modifier = Modifier
    .toggleable(
        value = checkedState,
        enabled = true,
        role = Role.Checkbox,
        onValueChange = { setCheckBoxState(!checkedState) }
    )
    .semantics(mergeDescendants = true) { }
    .constrainAs(labeledTextField) {
        setConstraints(top = parent.top, start = parent.start, end = parent.end)
    }
) {
    Checkbox(
        checked = checkedState,
        modifier = Modifier.padding(16.dp),
        onCheckedChange = null
    )

    Text(text = "Get Marketing emails", modifier = Modifier.padding(16.dp))
}

Nota: o componente de checkbox do React Native foi descontinuado, então isso só se aplicará ao usar um componente de checkbox de terceiros ou ao criar um componente personalizado.

Para combinar um checkbox e um rótulo no React Native, você pode envolver ambos os componentes dentro de um

componente: TouchableOpacity Para garantir que isso funcione bem e forneça todo o contexto necessário para usuários de tecnologia assistiva e não assistiva:

<TouchableOpacity
   style={{flexDirection:'row', alignItems: 'center',}}
   onPress={() => {
     setSelection(!isSelected)
     }
   }
   accessible={true}
   accessibilityLabel={"Do you like React Native?"}
   accessibilityRole='checkbox'>
     <CheckBox
       importantForAccessibility='no-hide-descendants'
       value={isSelected}
       onValueChange={setSelection}
       style={styles.checkbox}
      />
     <Text>Do you like React Native?</Text>
</TouchableOpacity>

Garanta que a

• visualização tenha a propriedade TouchableOpacity configurada como verdadeira, para que o grupo seja focado junto para os usuários de tecnologia assistiva. accessible Garanta que a

• propriedade do accessibilityLabel componente esteja definida com exatamente o mesmo valor do rótulo de texto. TouchableOpacity Defina os componentes

• para TouchableOpacity para fornecer o contexto correto aos usuários de tecnologia assistiva. accessibilityRole Defina os componentes checkbox com a propriedade estabelecida como

• para que o componente não possa ser focado individualmente. CheckBox Adicione uma ação via importantForAccessibility ao componente no-hide-descendants para lidar com o comportamento do checkbox quando ativado.

• Add an action via onPress to the TouchableOpacity component for handling the behavior of the checkbox when activated.