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
requireddo 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).
- Além da exibição visual, usando
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 *ouEmail (required).
- Escrito como
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!