Etiqueta na Frente

Saiba como estamos usando inteligência artificial para esta regra!

O Que Verificamos

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

Elemento	Falha ❌	Sucesso ✅
Botão com texto	nome = "Entrar na conta"	nome = "Entrar na conta"
Corresponder	Nome não começa com o texto no rótulo visível	Nome começa com o texto no rótulo visível
TalkBack	„Entrar na conta, botão“	„Entrar na conta, botão“
Acesso por Voz	Usuário diz em voz alta „Entrar“ Isso pode não ativar o botão, pois o nome é „Entrar na conta“, não „Entrar“	Usuário diz em voz alta „Entrar“ Isso deve ativar o botão porque o nome é „Entrar na conta“

Visão Geral

• Esta regra tem impacto menor para os usuários, reforçando uma Melhor Prática da WCAG
• Texto visível primeiro: Sempre comece o nome de um elemento exatamente com o que os usuários visuais 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

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

• Talkback - Alguns usuários alternam entre modalidades — usando tanto um leitor de tela quanto entrada por voz. A consistência ao colocar o texto visível no início do nome reduz a confusão ao comparar o que um usuário visual pode perceber versus o que é anunciado pelo Talkback.
• Acesso por 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á apontando. 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 melhor prática que recomendamos é ter apenas o texto visível do elemento dentro do nome e colocar informações secundárias no valor acessível, dica, ou função.

Nota: Dependendo da linguagem de programação, a propriedade 'nome' para um elemento pode ser chamada de algo diferente. Para XML ou Compose, é chamada de descrição de conteúdo. Para React Native, é chamada de rótulo de acessibilidade.

Confirmar Problema da Etiqueta na Frente

1. Ative o TalkBack
2. Foque no elemento
3. Uma das seguintes coisas acontecerá:
   • Inacessível: O texto anunciado primeiro pelo TalkBack é diferente do texto visível do elemento
   • Acessível: O TalkBack anunciará o texto visível do elemento primeiro

Corrigir Problemas

Para resolver problemas de Etiqueta na Frente, corresponda o conteúdo do texto e o nome acessível exatamente quando possível. Evite o uso de palavras desnecessárias como „Clique aqui para...“ ou „Toque para...“, e nomeie o elemento de uma forma que indique claramente ao usuário sua açã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 Etiqueta na Frente em casos como estes, certifique-se de que o texto visível do elemento venha primeiro em seu nome acessível.

XML

Para um botão com texto visível que diz “Enviar”:

<Button
   android:id="@+id/email_button"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_marginTop="@dimen/xlg"
   android:text="Send"
   app:layout_constraintStart_toStartOf="parent"
   app:layout_constraintEnd_toEndOf="parent"
   app:layout_constraintTop_toBottomOf="@id/divider2" />

O texto visível do botão vem primeiro na sua descrição de conteúdo, e informações adicionais seguem.

val button = findViewById<Button>(R.id.email_button)
button.contentDescription = "Send Email"

Compor

Para um elemento de texto clicável com texto visível que diz “Enviar”, o texto visível do botão vem primeiro no seu contentDescription, e informações adicionais seguem.

Text(modifier = Modifier.semantics { contentDescription = "Send Email" }, text = "Send")

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={'Menu'}
   mode='contained'
   accessibilityLabel='Menu'
/>

Se você optar por personalizar o 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'
/>

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 expand/collapse'>
</View>

Posso Ignorar Esta Regra?

A regra Rótulo na Frente reforça uma prática recomendada observada pelo 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 questões mais sérias. Você pode desativar regras categorizadas como 'Melhores Práticas' a partir do Painel de Controle Móvel, ou ignorando a regra em testes escritos para Android.

Recursos

• Diretrizes de Acessibilidade para Conteúdo na Web (WCAG) 2.1, Recomendação do W3C
  • Critério de Sucesso 2.5.3 - Rótulo no Nome
• Documentos de Compreensão WCAG 2.1
  • Compreendendo o SC 2.5.3: Rótulo no Nome