Sobre a Marca de Obrigatório em Formulários de Entrada

Mon, 14 Jul 2025 13:47:51 +0900

Organizamos informações sobre a marca de “obrigatório” na interface do usuário (formulários) no exterior, juntamente com materiais de diretrizes de UI.

📌 Principais Marcas de Obrigatório e Melhores Práticas

Uso do Asterisco (*)
- Geralmente o mais difundido, adiciona-se “*” aos campos obrigatórios.
- No entanto, uma explicação como " * é um campo obrigatório" no início do formulário é obrigatória (Nielsen Norman Group, California State University, Northridge).
- Também existem exemplos que usam cor para dar ênfase (como texto em vermelho).
Especificar “Required” ou “(required)” no rótulo
- Ao incluir a palavra “Required” no rótulo, pode-se indicá-lo claramente para leitores de tela, melhorando a acessibilidade (Deque).
Uso combinado de atributos ARIA e do atributo required do HTML5
- Além da exibição visual, usando aria-required="true" e <input required>, o campo também é comunicado como obrigatório de forma programática (Deque).
Especificar campos opcionais usando “(optional)”
- Há também a abordagem de especificar os campos opcionais como “(optional)” em vez dos campos obrigatórios, o que é eficaz quando ambos estão misturados.
- No entanto, a Nielsen-Norman aponta que “é mais fácil de avaliar se os campos obrigatórios também forem especificados de forma clara” (TPGi).

✅ Resumo de Materiais de Diretrizes de UI

Fonte	Conteúdo
NN/g: Marking Required Fields in Forms	A combinação de um asterisco com um texto explicativo é recomendada; exibir apenas os opcionais é considerado pouco amigável (Nielsen Norman Group).
Deque (Anatomy of Accessible Forms)	・A palavra “Required” ou uma imagem é usada em combinação dentro do rótulo. ・Afirma claramente que a indicação apenas com cores é insuficiente.
W3C Techniques (H90)	Há exemplos de inclusão de um asterisco ou “(required)” no rótulo e definição do seu significado no início do formulário.
TPGi (Doing what’s required)	Considerando a acessibilidade, a combinação de asterisco + atributos ARIA + inserção de texto no rótulo é avaliada como a melhor.
Guia de UX de Formulários Contensis	Organizado de forma concisa: uma marcação consistente (* ou (optional)) é importante.

✅ Abordagens Recomendadas para Implementação

Adicionar um texto explicativo no início do formulário :

Fields marked with * are required. (Ou “All fields are required” para todos de uma vez, ou “unless marked optional” se houver campos opcionais)
Atribuição de Rótulo :
- Escrito como First Name * ou Email (required).

Atributos ARIA e Atributos HTML5 :

1
2


<label for="email">Email <abbr title="required">*</abbr></label>
<input id="email" required aria-required="true">

Não confie apenas na cor : Suporte tanto visual quanto programaticamente.

🔗 Links de Referência (Materiais de Diretrizes de UI)

NN/g: Marking Required Fields in Forms (California State University, Northridge, Nielsen Norman Group, Deque)
Deque: Anatomy of Accessible Forms (Deque)
W3C Techniques: H90 Indicating required form controls (W3C)
TPGi: Indicating mandatory fields accessibly (TPGi)
Contensis: UX Forms Guidelines (Contensis)

Se necessário, também posso fornecer exemplos específicos de código HTML/CSS, ou templates de design de componentes de UI para Sketch e Figma. Sinta-se à vontade para perguntar!

UX on kenji.blog

Sobre a Marca de Obrigatório em Formulários de Entrada

📌 Principais Marcas de Obrigatório e Melhores Práticas

✅ Resumo de Materiais de Diretrizes de UI

✅ Abordagens Recomendadas para Implementação

🔗 Links de Referência (Materiais de Diretrizes de UI)