Editar Nome do Texto

O Que Verificamos

Os elementos de entrada de texto devem ter um nome acessível disponível para tecnologias assistivas, como TalkBack e Voice Access.

Exemplo de Falha ❌

A entrada de texto não tem nome acessível.

TalkBack lê "Edit text."

Voice Access — o usuário não tem um rótulo para falar para ativar o campo.

Exemplo Aprovado ✅

A entrada de texto está associada a um rótulo visível via labelFor.

TalkBack lê "Email address, Edit text."

Voice Access — o usuário fala "Endereço de email" para ativar o campo.

Visão Geral

• Esta regra tem um impacto sério para os usuários
• Todo campo de entrada de texto deve ter um rótulo que a tecnologia assistiva possa anunciar
• Texto de espaço reservado (placeholder) sozinho não é um substituto para um rótulo
• Entradas apenas com ícones devem ter uma descrição do conteúdo
• Campos não rotulados deixam os usuários de leitores de tela sem contexto sobre o que digitar

Impacto para os Usuários

Pessoas cegas que usam TalkBack para navegar em seu app são diretamente impactadas pelos problemas encontrados por esta regra. Quando uma entrada de texto não tem nome acessível, o TalkBack anuncia apenas "Editar texto" — não fornecendo ao usuário informações sobre o que deve digitar. Isso é especialmente desorientador em formulários com múltiplos campos.

Use rótulos visíveis e persistentes para todos os campos de formulário. Texto de espaço reservado sozinho não é um substituto para um rótulo porque ele desaparece quando o usuário começa a digitar.

EditText e TextField elementos devem fornecer informações de etiqueta onde o sistema operacional Android as espera, para que as tecnologias assistivas possam comunicar o propósito do elemento de entrada de forma previsível.

Confirme a Questão do Nome do Texto Editável

1. Ative o TalkBack
2. Foque no elemento de entrada de texto
3. Uma das seguintes situações acontecerá:
   • Inacessível: TalkBack anuncia apenas "Editar texto" sem etiqueta, ou anuncia informações em uma ordem inesperada
   • Acessível (valor padrão, campo está vazio): TalkBack anuncia a etiqueta do campo seguida de "Editar texto" (por exemplo, "Nome de usuário, Editar texto")
   • Acessível (usuário inseriu um valor no campo): TalkBack anuncia o valor inserido pelo usuário + "Editar texto para" + Text da etiqueta associada (por exemplo, "'help@deque.com', Editar texto para 'Endereço de e-mail'")

Corrija os Problemas

Para resolver problemas de Nome do Texto Editável, associe um rótulo visível ao campo de entrada. Forneça uma descrição do conteúdo quando não houver um rótulo visível presente ou quando usar ícones.

XML

Associe uma etiqueta TextView visível com o EditText usando setLabelFor.

EditText editText = .......; // Role: EditText
TextView label = .......; // Role: Label
label.setLabelFor(editText.getId()); // Associate the label with the field

Compose

Use o parâmetro label embutido em OutlinedTextField ou TextField para fornecer um nome acessível. Forneça uma descrição de conteúdo para entradas apenas com ícones.

@Composable
private fun LabeledTextField(modifier: Modifier = Modifier) {
    val textInput = remember { mutableStateOf("") }
    OutlinedTextField(
        modifier = modifier,
        value = textInput.value,
        onValueChange = { textInput.value = it },
        visualTransformation = VisualTransformation.None,
        label = { Text(stringResource(R.string.address_label)) }
    )
}

@Composable
private fun IconsWithDescriptionTextField(modifier: Modifier = Modifier) {
    val textInput = remember { mutableStateOf("") }
    OutlinedTextField(
        modifier = modifier,
        value = textInput.value,
        onValueChange = { textInput.value = it },
        label = {
            Icon(
                painter = painterResource(id = R.drawable.ic_location),
                contentDescription = stringResource(id = R.string.address_content_description)
            )
        }
    )
}

React Native

Associe o elemento de texto ao campo de texto correspondente usando a propriedade aria-labelledby, referenciando o nativeID da etiqueta.

<Text
  style={{height: 70, width: 150, fontSize: 20, marginTop: 10}} 
  aria-label="Username"
  nativeID="labelUsername">
  Username
</Text>

<TextInput
  style={{height: 50, width: 200, backgroundColor: 'azure', fontSize: 20}} 
  aria-label="input"
  aria-labelledby="labelUsername"
  placeholder='John'
 />

Posso Ignorar Esta Regra?

Nome de Texto Editável tem um impacto sério para os usuários, e recomendamos corrigir esse problema na maioria dos casos. Um campo de texto sem etiqueta é inutilizável para usuários de leitores de tela. Em situações raras — como um campo de pesquisa cujo propósito é inconfundivelmente claro pelo contexto ao redor — você pode considerar suprimir a regra, mas isso deve ser uma exceção, não a norma. Saiba mais sobre ignorar regras.

Recursos

Páginas do Curso Deque University

• 4.1.2 Nome, Função, Valor (A)
• Critério de Sucesso 4.1.2 - Nome, Função, Valor

Nota: O acesso completo aos recursos da Deque University requer uma assinatura.

Outros Recursos

• Diretrizes de Acessibilidade para o Conteúdo da Web (WCAG) 2.0, Recomendação do W3C
  • Critério de Sucesso 4.1.2 - Nome, Função, Valor
• Documentos de Compreensão da WCAG 2.0
  • Compreensão 4.1.2 A - Nome, Função, Valor