Etiqueta no Nome

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

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

Voice Control - Usuário diz "Sign In"
Isso não irá ativar o botão porque seu nome é "Log in", não "Sign In"

Exemplo de Sucesso ✅

O botão name é "Sign In"

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

Voice Control - Usuário diz "Sign In"
Isso ativa o botão porque o nome corresponde ao rótulo visível

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.

Se um botão tem um texto visível dizendo "Sign In", o VoiceOver 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 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
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á seu título como seu accessibilityLabel, e, portanto, passará nesta regra.

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

Para elementos interativos sem título, use uma visão tocável que contenha o controle e os componentes de texto. Desta forma, o elemento de texto se torna o rótulo visível para o controle. Defina o accessibilityLabel do elemento que contém 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?

Label In Name 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ê tem um botão com texto visível que diz "Visa Card xxxx-xxxx-xxxx-1234" talvez queira definir o texto anunciado pelo VoiceOver para dizer "Visa Card terminando em 1-2-3-4". Como o texto no botão não corresponde ao nome anunciado pelo VoiceOver, isso causaria uma falha para Label in Name. 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 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 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 - Rótulo no Nome
• Documentos de Compreensão WCAG 2.1
  • Compreendendo 2.5.3 A - Rótulo no Nome