Etiqueta no Nome

Descubra 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 ❌	Sucesso ✅
Botão com texto	nome = "Entrar"	nome = "Iniciar sessão"
Corresponde	Nome não corresponde etiqueta visível	Nome corresponde etiqueta visível
VoiceOver	„Entrar, botão“	„Iniciar sessão, botão“
Acesso por Voz	Usuário fala em voz alta „Iniciar sessão“ Isso não ativará o botão porque o nome é "Entrar", não "Iniciar sessão"	Usuário fala em voz alta „Iniciar sessão“ Isso deve ativar o botão porque o nome é "Iniciar sessão"

Em Resumo

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

Impacto para os Usuários

Pessoas que usam tecnologia assistiva, como o VoiceOver, e/ou apresentam 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 VoiceOver e o conteúdo na tela.

Consulte a tabela acima. Se um botão tiver texto visível dizendo "Iniciar sessão", o VoiceOver também deve anunciar "Iniciar sessão" — não algo diferente, como "Login".

Nota: Dependendo da linguagem de programação, a propriedade 'name' para um elemento pode ser chamada de outra coisa. Em Swift e React Native, por exemplo, é chamada de etiqueta de acessibilidade.

Confirmar Problema de Etiqueta no Nome

1. Ligue o VoiceOver
2. Tente focar no elemento
3. Uma das seguintes situações ocorrerá:

• Inacessível: O texto anunciado pelo VoiceOver é diferente do texto visível do elemento
  • Acessível: O texto anunciado pelo VoiceOver é igual ou inclui o texto visível do elemento
• Acessível: O VoiceOver anunciará 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, então é recomendado que o nome corresponda exatamente ao texto.

Quando o texto visível por si só não informa claramente aos usuários de TA (por exemplo, leitor 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“

UIKit

No storyboard:

1. Selecione o elemento com um problema de LabelInName Etiqueta na Frente
2. Certifique-se de que o Painel de Inspetor esteja visível
3. Selecione o Inspetor de Identidade
4. Em Acessibilidade, há uma categoria chamada "Etiqueta". Insira uma etiqueta que corresponda exatamente ou inclua todo o texto visível.

No código:

Encontre onde a etiqueta de acessibilidade foi definida e certifique-se de que o valor da etiqueta de acessibilidade corresponda ou contenha todo o texto visível do elemento.

button.title = "Search"
button.accessibilityLabel = "Search the store"
// Not an exact match, but the accessibilityLabel includes all the visible text

SwiftUI

Defina uma etiqueta de acessibilidade que corresponda ou contenha o texto visível.

Button(action: {
    openMenu()
}) {
    Text("Sign in")
}.accessibility(label: Text("Sign in"))
// The visible text and accessibility label match exactly

React Native

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

Por padrão, um botão usará o seu título como sua accessibilityLabel, e assim, cumprirá com essa regra.

<Button 
   title={'Menu'}
   mode='contained'
   accessibilityLabel='Menu'
/>

Para elementos interativos sem título, use uma visualização que possa ser tocada e que contenha os componentes de controle e texto. Dessa forma, o elemento de texto se torna a etiqueta visível para o controle. Defina a propriedade do elemento que contém accessibilityLabel 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' }}
        ios_backgroundColor={'lightgray'}
        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 esse problema, exceto em casos raros. Por exemplo, se você tem um botão com texto visível que diz "Cartão Visa xxxx-xxxx-xxxx-1234", pode querer definir o texto anunciado pelo VoiceOver para dizer "Cartão Visa terminando em 1-2-3-4". Como o texto no botão não corresponde ao nome anunciado pelo VoiceOver, isso causaria uma falha na regra Etiqueta no Nome. Mas em um caso como este, faria sentido ignorar a regra. Saiba mais sobre ignorar regras.

Recursos

Páginas do Curso 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 exige uma assinatura.

Outros Recursos

• Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.1, Recomendação 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