Rótulo na Frente

Descubra como estamos utilizando inteligência artificial para esta regra!

O Que Verificamos

Se um elemento interativo tem um rótulo visível, ele deve aparecer no início do nome anunciado pela tecnologia assistiva (TA), antes de qualquer informação adicional.

Elemento	Falha ❌	Aprovado ✅
Botão com texto	nome = "Entrar na conta"	nome = "Fazer login na conta"
Corresponde	Nome não começa com o texto no rótulo visível	Nome começa com o texto no rótulo visível
VoiceOver	„Entrar na conta, botão“	„Fazer login na conta, botão“
Controle de Voz	Usuário diz em voz alta „Fazer login“ Isso pode não ativar o botão pois o nome é „Entrar na conta“, não „Fazer login“	Usuário diz em voz alta „Fazer login“ Isso deve ativar o botão pois o nome é „Fazer login na conta“

Em Resumo

• Esta regra tem um impacto menor para os usuários, reforçando uma Boa Prática do WCAG
• Texto visível primeiro: Sempre comece o nome de um elemento com exatamente o que os usuários videntes percebem na tela
• Contexto em segundo: Adicione informações úteis ao nome do elemento após o texto visível

Impacto para os Usuários

As pessoas que usam tecnologia assistiva precisam entender rapidamente o que faz um elemento e ser capazes de interagir facilmente com ele. Quando palavras adicionais vêm antes do nome acessível, isso torna a navegação mais lenta e torna seu aplicativo menos eficiente para os usuários de TA.

• VoiceOver - Alguns usuários alternam entre modalidades — usando tanto um leitor de tela quanto entrada de voz. A consistência em colocar o texto visível no início do nome reduz a confusão ao comparar o que um usuário vidente pode perceber versus o que é anunciado pelo VoiceOver.
• Controle de Voz - Os motores de reconhecimento de voz muitas vezes dependem do início de um nome acessível para determinar qual elemento o usuário está direcionando. Colocar o rótulo visível no início do nome acessível torna a correspondência inequívoca e reduz a possibilidade de um usuário não conseguir ativar um elemento. Uma prática recomendada que incentivamos é ter apenas o texto visível do elemento no nome, e colocar informações secundárias dentro do valor acessível, dica ou função.

Nota: Dependendo da linguagem de programação, a propriedade 'nome' de um elemento pode ser chamada de algo diferente. No Swift e React Native, por exemplo, é chamada de rótulo de acessibilidade.

Confirmar Problema de Rótulo na Frente

1. Ative o VoiceOver
2. Foque o elemento
3. Um dos seguintes ocorrerá:
   • Inacessível: O texto anunciado primeiro pelo VoiceOver é diferente do texto visível do elemento
   • Acessível: O VoiceOver anunciará primeiro o texto visível do elemento

Corrigir Problemas

Para resolver problemas de Rótulo na Frente, converse o conteúdo do texto e o nome acessível exatamente quando possível. Evite o uso de palavras supérfluas como „Clique aqui para...“ ou „Toque para...“, e nomeie o elemento de uma maneira que diga explicitamente ao usuário sua função.

Às vezes, é necessário expandir o nome acessível de um elemento para incluir mais contexto. Por exemplo:

• Rótulo Visível: “Caixa de Entrada, 5”, Nome: “Caixa de Entrada, 5 mensagens não lidas”
• Rótulo Visível: “Excluir”, Nome: “Excluir Perfil de Usuário”

Para evitar problemas de Rótulo na Frente em casos como estes, certifique-se de que o texto visível do elemento venha primeiro no seu nome acessível.

UIKit

No storyboard:

1. Selecione o elemento com um LabelAtFront problema
2. Certifique-se de que o Painel de Inspetores esteja visível
3. Selecione o Inspetor de Identidade.
4. Em Acessibilidade, há uma categoria chamada „Etiqueta“. Insira uma etiqueta que corresponda exatamente ou comece com o texto visível.

No código:

Encontre onde a etiqueta de acessibilidade foi definida e verifique se o valor accessibilityLabelcorresponde ou começa com todo o texto visível do elemento.

button.title = "Send"
button.accessibilityLabel = "Send email"

SwiftUI

Certifique-se de definir uma etiqueta de acessibilidade que corresponda ou comece com todo o texto visível do elemento.

Button(action: {
    openMenu()
}) {
    Text("Menu")
}

React Native

A propriedade accessibilityLabel deve começar com o texto visível do elemento.

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

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

Se você optar por personalizar a accessibilityLabel de um botão, certifique-se de que comece com o texto do title.

<Button 
   title={'Log In'}
   mode='contained'
   accessibilityLabel='Log In to Transfer Money'
/>

Para outros elementos sem um título explícito, ou ao definir a accessibilityLabel explicitamente, certifique-se de que a accessibilityLabel comece com o texto visível do elemento.

<View style={styles.container}>
   <Button title='Menu' accessibilityLabel='Menu: Tap to Open'>
</View>

Posso Ignorar Esta Regra?

A regra Etiqueta na Frente reforça uma prática recomendada anotada pelas WCAG como parte de WCAG 2.1 2.5.3 A. Esta regra tem um impacto menor e pode ser ignorada se você quiser priorizar problemas mais sérios. Você pode desativar regras categorizadas como 'Melhor Prática' do Painel de Controle Móvel, ou ignorar a regra em testes escritos para iOS.

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 SC 2.5.3: Etiqueta no Nome