Asterisco alternativo

Apresente os campos obrigatórios em um fieldset e os opcionais depois dele em um fieldset separado.

Você pode adicionar a palavra Obrigatório ao lado do campo.

Você pode remover quaisquer campos do formulário que NÃO sejam obrigatórios e declarar no texto de instrução que todos os campos são obrigatórios.

Basta colocar 'Opcional' após o nome do campo e não usar a técnica de asterisco antigo. No teste, isso funciona muito melhor. As pessoas presumem que um campo é obrigatório em um formulário se não estiver marcado.

Seguindo as linhas da resposta do usuário 12031954690297267040, existe a possibilidade de combinar o texto apropriado (como 'Obrigatório') com o estilo visual dos campos obrigatórios de uma maneira única (como uma cor de fundo diferente). Uma coisa a ter em mente é evitar interferir nos estilos de fundo usados ​​por sistemas de mensagens de erro típicos (eu nunca estilizaria campos obrigatórios com um fundo vermelho / rosa, eu os utilizo exclusivamente para mensagens de erro).

Em formulários, acho que não é necessário ter um obrigatório ao lado dos campos obrigatórios. Suponha que o usuário preencherá o campo e, quando tentar enviar, adicione instruções na tela para qualquer coisa que tenha perdido.

Aqui está um design em que usamos o elemento de espaço reservado e, em seguida, temos uma dica de ferramenta que aparece quando um campo é realçado (dessa forma, mesmo que o texto do espaço reservado tenha desaparecido, eles ainda saberão o que é o campo). Então, se eles se afastarem do campo sem preenchê-lo, a dica de ferramenta se tornará vermelha. As mesmas dicas de ferramentas aparecem se o usuário tentar enviar o formulário.

Fui informado de que alguns aplicativos usam uma barra vermelha na frente do campo (veja o exemplo em linkhttp: //490178178124943030-a-1802744773732722657-s-sites.googlegroups.com/site/pulsesalesforce/using-pulse/creating -a-pulso-projecto / wiki_create_pulse_project_3.png? attachauth = ANoY7cq-K3fwNAkccA6qnVqemQMP621p8Mtp6nOZQsi0pEMJBBEqWeMnmmoo2y2PqNiw8cFVhs9fCaSM1OEyfjAiu0Pd2JKvQjWLELm0LjJJ0DHPNL5X8sbz4VvXIYoBM2Vk3mcYKjqFFt5xRoNj8N1tLDXByKKoM5TzxL2h46qHitxP2_nOP4XQdVRrMaIZHzpt9oyq2mrlBa3HBaI0Hb9Slfx_UdR0WzXmNFOZFXP973fBWhh179KbBZVr_U2w1EYDhZlFkZO3zMUQH13UtG8gDLuTRGNW_A% 3D% 3D & attredirects = 0). Parece que deve atender ao requisito porque a barra funciona da mesma maneira que o asterisco. Algum comentário sobre isso?

Um símbolo parece funcionar melhor em todas as deficiências e um asterisco também melhora a usabilidade, pois muitos usuários de sites saberão o que significa. (Evite em todas as circunstâncias "os campos marcados com * são opcionais", pois isso deixará as pessoas assustadas.)

Um asterisco não é lido pelos leitores de tela, então você quer ter algum tipo de fallback ali, muitos usam uma imagem com um asterisco e um texto alternativo obrigatório, mas eles não escalam bem com o tamanho do texto. Outra solução é um elemento abbr ao redor do asterisco e um título de obrigatório. Todas essas coisas devem estar no rótulo do respectivo elemento de formulário, para que os leitores de tela possam conectar campos de texto e formulário.

O que funciona apenas nos leitores de tela modernos são as técnicas WAI-ARIA bastante novas: use aria-required = "true" no campo do formulário e os leitores de tela lerão que o campo é obrigatório.

O W3C tem mais algumas técnicas aqui: http://www.w3.org/WAI/WCAG20/quickref/Overview.php#qr-minimize-error-cues (para se livrar do flash e outras técnicas não necessárias no momento , role até o topo e escolha as caixas de seleção HTML e WAI-ARIA e clique em "Personalizar com as configurações acima" e recarregue o url)