Etiqueta no Nome

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

O Que Verificamos

Se um elemento interativo tem uma etiqueta visível, o nome anunciado pela tecnologia assistiva (TA) deve ser o mesmo.

Exemplo de Falha ❌

O botão name é "Log in"

TalkBack anuncia "Log in, botão" - não correspondendo ao rótulo visível "Sign In"

Voice Access - O usuário fala "Sign In"
Isso não ativará o botão porque seu nome é "Log in", e não "Sign In"

Exemplo de Sucesso ✅

O botão name é "Sign In"

TalkBack anuncia "Sign In, botão" - correspondendo ao rótulo visível

Voice Access - O usuário fala "Sign In"
Isso ativa o botão porque o nome corresponde ao rótulo visível

Resumo

• Esta regra tem um impacto sério para os usuários
• Corresponda o texto visível: Se os usuários videntes podem ver um botão „Iniciar sessão“, certifique-se de que os leitores de tela também anunciem „Iniciar sessão“
• Está tudo bem adicionar contexto extra: „Salvar“ pode se tornar „Salvar documento“
• Nunca omita palavras visíveis: Os leitores de tela devem anunciar um botão „Pesquisar catálogo“, não apenas „Pesquisar“

Impacto aos Usuários

Pessoas usando tecnologia assistiva como o TalkBack e/ou com baixa visão são as mais impactadas por problemas detectados. Problemas de Etiqueta no Nome podem contribuir para uma experiência confusa ou conflitante entre o anúncio do TalkBack e o conteúdo na tela.

Se um botão tem texto visível dizendo "Sign In", TalkBack também deve anunciar "Sign In" — não algo diferente, como "Log in".

Nota: Dependendo da linguagem de programação, a propriedade 'name' para um elemento pode ser chamada de algo diferente. Para XML ou Compose, é chamado de descrição de conteúdo. Para React Native, é chamado de rótulo de acessibilidade.

Confirme o Problema de Etiqueta no Nome

1. Ative o TalkBack
2. Tente focar no elemento
3. Uma das seguintes coisas acontecerá:
   • Inacessível: Texto anunciado pelo TalkBack é diferente do texto visível do elemento
   • Acessível: Texto anunciado pelo TalkBack é o mesmo ou inclui o texto visível do elemento

Corrigir Problemas

Para resolver problemas de Etiqueta no Nome, defina um nome para o elemento que corresponda ou contenha o texto visível do elemento.

Quando o texto visível é descritivo e único, é recomendado que o nome corresponda exatamente ao texto.

Quando o texto visível por si só não indica explicitamente aos usuários de TA (por exemplo, leitores de tela) a ação do elemento, então seria uma boa ideia expandir o nome acessível para incluir mais contexto. Por exemplo:

• Etiqueta Visível: „Caixa de entrada, 5“, Nome: „Caixa de entrada, 5 mensagens não lidas“
• Etiqueta Visível: „Excluir“, Nome: „Excluir Perfil de Usuário“

XML

Defina uma descrição de conteúdo que corresponda exatamente ou contenha o texto visível. Se o elemento for um Button ou um TextView clicável:

Button button = .......
button.setText("Search");
button.setContentDescription("Search the store");

TextView textView = .......
textView.setText("Book Title");
textView.setContentDescription("Book title to search for");
// Not an exact match, but the accessibilityLabel includes all the visible text

Se o elemento for um CheckBox, por favor veja Nome de CheckBox.

Compor

Certifique-se de que o contentDescription do elemento corresponda exatamente ou contenha o texto visível.

@Composable
fun EmailButton() {
    Button(
        modifier = Modifier.semantics { this.contentDescription = “Send an Email” }
        onClick = { … },
    ) { 
        Text(
            text = “Send”
        )
    }
}

React Native

A propriedade accessibilityLabel deve corresponder ou conter o texto visível do elemento.

Por padrão, um botão usará seu título como seu accessibilityLabel, e por isso ele passará nesta regra.

<Button 
   title={'Menu'}
   mode='contained'
   accessibilityLabel='Menu'
/>
// The visible text and accessibility label match exactly

Para elementos interativos sem título, use uma visualização tocável que contenha o elemento e componentes de texto. Dessa forma, o texto fornecido se torna o rótulo visível do elemento. Defina o accessibilityLabel do elemento contêiner para corresponder ou conter o texto visível.

<TouchableOpacity
   style={styles.switchRow}
   importantForAccessibility='no-hide-descendants'
   accessible={true}
   accessibilityElementsHidden={false}
   accessibilityLabel='Subscribe to notifications'
   accessibilityValue={{ text: "" + isEnabled }}
   accessibilityRole='switch'
   onPress={() => { 
     setIsEnabled(!isEnabled)
   }}> 
     <Text style={{ fontSize: 22 }}> 
        Subscribe
     </Text>
     <Switch
        trackColor={{ false: 'lightgray', true: 'dimgray' }}
        thumbColor={'white'}
        accessibilityElementsHidden={true}
        importantForAccessibility='no-hide-descendants'
        value={isEnabled}

         onValueChange={() => {
           setIsEnabled(!isEnabled);
         }}
     />
</TouchableOpacity>

Posso Ignorar Esta Regra?

Label In Name tem uma Impacto sério para os usuários, e recomendamos tomar medidas para remediar essa questão, exceto em casos raros. Por exemplo, se você tiver um botão com texto visível que diz "Cartão Visa xxxx-xxxx-xxxx-1234", você pode querer definir o texto anunciado pelo TalkBack para dizer "Cartão Visa terminando em 1-2-3-4". Como o texto no botão não corresponde ao nome anunciado pelo TalkBack, isso causaria uma falha para Rótulo no Nome. Mas em um caso como este, faria sentido ignorar a regra. Saiba mais sobre ignorando regras.

Recursos

Páginas do Curso da Deque University

• 2.5.3 Rótulo no Nome (A)
• Critério de Sucesso 2.5.3 - Rótulo no Nome
• Requisitos - 2.5.3.a Rótulo no Nome

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ções do W3C
  • Critério de Sucesso 2.5.3 - Rótulo no Nome
• Documentos de Compreensão WCAG 2.1
  • Compreendendo 2.5.3 A - Rótulo no Nome