É muito comum em formulários Web utilizarmos o caracter “*” para designar que um determinado campo é de preenchimento obrigatório ou  não.

Apesar de não existir uma regra formal os desenvolvedores colocam o “*” após o campo (objeto input) de preenchimento obrigatório, conforme abaixo, e no final do formulário o comentário “* preenchimento obrigatório”.

Exemplo: <label for=”nome”>Nome</label><input name=”nome” size=”35″ type=”text”> *

* Preenchimento obrigatório

Isto causa um sério problema de acessibilidade para usuários que utilizam programas leitores de tela para conseguir ter acesso a informação do que é obrigatório.

Durante a navegação pelo formulário, quando o cursor foca no campo, o programa leitor de telas identifica o tipo de objeto como sendo um campo editável e lê (opcionalmente) a característica do campo, algo tipo “campo editável” e lê também a etiqueta do campo, referenciado pelo objeto label, no exemplo acima  “Nome”, assim, o deficiente visual sabe que está no campo e está apto a digitar um dado.

Como o “*” foi colocado após o objeto ‘ input  type=”text”‘ o mesmo não será lido durante a navegação pelos campos do formulário, já que o “*” é um texto avulso fora do objeto label e fora do objeto input e não receberá foco.  Somente após sair do formulário é que o deficiente visual tomará conhecimento da informação “* preenchimento obrigatório”, mas esta informação estará totalmente fora do contexto, mesmo que volte ao formulário e navegue (usando a tecla TAB) entre os campos.

Uma forma muito simples de resolver este problema é colocar o “*” junto a etiqueta do campo, assim, todas vezes que o objeto input receber o foco, após ler a etiqueta (o nome do campo) será lido também o caracter “*”, facilitando assim saber que aquele é um dos campos de preenchimento obrigatório.

Coloque também a informação sobre a obrigatoriedade antes do formulário, assim o leitor de telas irá ler sobre a obrigatoriedade dos campos com * antes de acessar os campos.

No exemplo abaixo o leitor de telas irá ler “Nome *” ou seja irá ler “*” após cada campo de preenchimento obrigatório e ao sair do formulário ouvirá “* preenchimento obrigatório”. Assim o “*” estará totalmente acessível dentro do formulário.

Exemplo:

Campos com * são de preenchimento obrigatório

<label for=”nome”>Nome *</label><input name=”nome” size=”35″ type=”text”>