Rótulo na Frente
Saiba como estamos usando 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.
Exemplo de Falha ❌
O botão name é "Entrar na conta"
VoiceOver anuncia "Entrar na conta, botão" - o rótulo visível "Entrar" não está na frente
Voice Control - Usuário fala "Entrar"
Isso pode não ativar o botão, pois o nome começa com "Conta", não "Entrar"
Exemplo de Sucesso ✅
O botão name é "Entrar na conta"
VoiceOver anuncia "Entrar na conta, botão" - o rótulo visível "Entrar" vem em primeiro lugar
Voice Control - Usuário fala "Entrar"
Isso ativa o botão porque o nome começa com o rótulo visível
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 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 - Motores de reconhecimento de fala muitas vezes dependem do início de um nome acessível para resolver 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 sugerimos é ter apenas o texto visível de um elemento dentro do nome, colocando informações secundárias no valor acessível, dica ou papel.
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
- Ative o VoiceOver
- Foque o elemento
- 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 esses, certifique-se de que o texto visível do elemento venha primeiro em seu nome acessível.
UIKit
No storyboard:
- Selecione o elemento com um problema de
LabelAtFront - Certifique-se de que o Painel de Inspetores esteja visível
- Selecione o Inspetor de Identidade.
- 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 o rótulo de acessibilidade foi definido e verifique se o valor do accessibilityLabel corresponde 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 seu accessibilityLabel e, portanto, passará por esta regra.
<Button
title={'Delete'}
mode='contained'
accessibilityLabel='Delete'
/>Se você optar por personalizar o accessibilityLabel para um botão, certifique-se de que ele 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 o accessibilityLabel explicitamente, certifique-se de que o 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 Rótulo na Frente reforça uma prática recomendada notada pelas WCAG como parte do WCAG 2.1 2.5.3 A. Esta regra tem um impacto menor e pode ser ignorada se você quiser priorizar questões mais sérias. Você pode desativar regras categorizadas como 'Melhor Prática' do Painel de Controle Móvel, ou por ignorar a regra em testes escritos para iOS.
Recursos
- Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.1, Recomendação W3C
- Documentos de Compreensão WCAG 2.1