Nome do CheckBox

O Que Verificamos

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

Exemplo de Falha ❌

name = {nenhum}

TalkBack anuncia apenas o valor e o papel
"Marcado, Caixa de Seleção"

Voice Access - O usuário diz "Assinar boletim informativo"
Isso não ativará a caixa de seleção, pois ela não tem nome

Exemplo de Sucesso ✅

name = "Assinar boletim informativo"

TalkBack anuncia the name, value, and role
"Assinar boletim informativo, Marcado, Caixa de Seleção"

Voice Access - O usuário diz "Assinar boletim informativo"
Isso ativa a caixa de seleção porque o nome coincide

Visão Geral

• Esta regra tem um impacto sério para os usuários
• Cada caixa de seleção precisa de um nome: usuários que dependem do TalkBack ou do Voice Access devem ser capazes de identificar e interagir com as caixas de seleção
• Associe um rótulo visível: use um TextView (XML) ou um componente Text (Compose) ligado à caixa de seleção
• Evite usar as propriedades Text e ContentDescription juntas — elas entram em conflito uma com a outra

Impacto para Usuários

Pessoas que usam tecnologia assistiva, como TalkBack e/ou Voice Access, são as mais impactadas por problemas detectados por esta regra.

Quando um CheckBox não tem um nome acessível, o TalkBack anuncia apenas seu valor e papel — por exemplo, "Marcado, Caixa de Seleção" — deixando o usuário sem contexto sobre o que está selecionando. Isso torna impossível entender o propósito do controle sem exploração adicional e impede que os usuários do Voice Access ativem a caixa de seleção dizendo seu rótulo.

Confirmar Problema de Nome de Caixa de Seleçã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.

Corrigir Problemas

Para resolver um problema de Nome da Caixa de Seleção, certifique-se de que cada caixa de seleção tenha um nome acessível associando-a a um rótulo de texto visível. Assim, o TalkBack anunciará um nome significativo junto ao valor e papel da caixa de seleção. Os usuários do Voice Access poderão ativar a caixa de seleção dizendo seu rótulo.

XML

Associe um TextView ao CheckBox usando o atributo labelFor. Isso vincula o rótulo visível à caixa de seleção para que o TalkBack anuncie o texto do rótulo como o nome acessível da caixa de seleção.

  <LinearLayout
      android:layout_width="wrap_content"                                       
      android:layout_height="wrap_content"
      android:orientation="horizontal">                                         
                                                                              
      <CheckBox                                                               
          android:id="@+id/subscribe_checkbox"
          android:layout_width="wrap_content"                                   
          android:layout_height="wrap_content" />
                                                                                
      <TextView                                                               
          android:layout_width="wrap_content"                                 
          android:layout_height="wrap_content"
          android:text="Subscribe to newsletter"                                
          android:labelFor="@id/subscribe_checkbox" />
                                                                                
  </LinearLayout>  

Se as visualizações forem criadas programaticamente, ou a associação não puder ser feita em XML, use setLabelFor para ligar o rótulo à caixa de seleção no código.

TextView label = findViewById(R.id.checkbox_label);
CheckBox checkBox = findViewById(R.id.subscribe_checkbox);
label.setLabelFor(checkBox.getId());

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

Envolva a Caixa de Seleção e um elemento de texto dentro de um elemento pai com o papel de acessibilidade Checkbox, e certifique-se de que a ação da caixa de seleção possa ser invocada selecionando o elemento pai.

Row(modifier = Modifier
    .toggleable(
        value = checkedState,
        enabled = true,
        role = Role.Checkbox, // Parent element has the accessibility role
        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.

Nota: O componente de caixa de seleção do React Native foi descontinuado, portanto, isso se aplicará apenas ao usar um elemento de caixa de seleção de terceiros ou ao criar um elemento personalizado.

Para combinar uma caixa de seleção e um rótulo no React Native, você pode envolver ambos os elementos dentro de um TouchableOpacity:

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

Para garantir que isso funcione corretamente para todos os usuários:

• Defina accessible={true} no TouchableOpacity para que a tecnologia assistiva foque o grupo como um único elemento
• Defina accessibilityLabel para corresponder exatamente ao rótulo de texto visível
• Defina accessibilityRole para checkbox para fornecer o contexto correto aos usuários de tecnologia assistiva
• Defina importantForAccessibility='no-hide-descendants' no CheckBox para que ele não possa ser focado individualmente
• Adicione uma ação onPress ao TouchableOpacity para lidar com a alternância da caixa de seleção

Posso Ignorar Esta Regra?

O Nome da Caixa de Seleção tem um impacto sério para os usuários, e recomendamos solucionar este problema na maioria dos casos. Uma caixa de seleção sem nome acessível não fornece contexto aos usuários de tecnologia assistiva e impede totalmente a interação com o Voice Access. Saiba mais sobre ignorar regras.

Recursos

Páginas do Curso da Deque University

• Veja Android Nativo Móvel sob 4.1.2 Nome, Papel, Valor (A)

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

Outros Recursos

• Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.1, Recomendação W3C
  • Critério de Sucesso 4.1.2 – Nome, Papel, Valor (A)
  • Compreendendo 4.1.2 – Nome, Papel, Valor