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.

Elemento	Falha ❌	Funcionando ✅
Botão com texto	nome = "Entrar"	nome = "Iniciar sessão"
Corresponde	Nome não corresponde etiqueta visível	Nome corresponde etiqueta visível
TalkBack	„Entrar, botão“	„Iniciar sessão, botão“
Acesso por Voz	Usuário diz em voz alta „Iniciar sessão“ Isso não ativará o botão porque o nome é "Entrar", não "Iniciar sessão"	Usuário diz em voz alta „Iniciar sessão“ Isso deve ativar o botão porque o nome é „Iniciar sessão“

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.

Consulte a tabela acima. Se um botão tem um texto visível dizendo „Iniciar sessão“, o TalkBack também deve anunciar „Iniciar sessão“ - e não algo diferente, como „Entrar“.

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 TextViewclicá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 corresponde exatamente ou contém 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 sua accessibilityLabel, e portanto 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 um view tocável que contenha o elemento e componentes de texto. Desta maneira, o texto fornecido torna-se a etiqueta visível para o elemento. Defina o accessibilityLabel do elemento conteiner para que corresponda ou contenha 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?

Etiqueta No Nome tem um Impacto sério para os usuários, e recomendamos tomar medidas para remediar este problema, exceto em casos raros. Por exemplo, se você tiver um botão com texto visível que diga "Cartão Visa xxxx-xxxx-xxxx-1234" você pode querer configurar 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 Etiqueta 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 Etiqueta no Nome (A)
• Critério de Sucesso 2.5.3 - Etiqueta no Nome
• Requisitos - 2.5.3.a Etiqueta 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 - Etiqueta no Nome
• Documentos de Compreensão WCAG 2.1
  • Compreendendo 2.5.3 A - Etiqueta no Nome