20th
Acessibilidades: Mensagem de Erro em Formulários
Várias são as recomendações de como apresentar as mensagens de erro em formulários. A nível de acessibilidades a mais recomendada é a mensagem de erro no topo do grupo de formulários, com link para o campo com erro. Algo do tipo:
Foram encontrado x erros
. (link) insira o seu nome
. (link) insira o seu email
. etc
Ver exemplo em juicystudio.
Só que sinceramente isto não me agrada a nível de usabilidade.
Suponhamos o caso em que temos um grande grupo de formulários em que temos scroll. O user tem de estar constantemente a fazer scroll up para ver os erros.
Algumas soluções para este problema:
- alterar a cor do elemento com erro. Não me agrada pois a nivel de acessibilidades estamos a transmitir uma informação que so depende de cor, o que é incorrecto
- colocar a mensagem de erro ao pé do elemento. Já me agrada mais, mas creio que estamos a ser redundantes pois estamso 2x a repetir a mensagem.
Optei então pelo seguinte:
- no topo dos formularios colocar so uma mensagem a dizer: Foram encontrados x erros.
- Colocar a mensagem de erro ao pé do elemento do form correspondente
Onde colocar a mensagem a nivel de html markup? Os vários exemplos que encontrei, recorrem ao uso de um div ou p ou algo no genero, mas surgiu-me uma duvida: porque não colocar a mensagem de erro no label associado ao campo com erro?
Parece-me a forma mais logica e correcta a nível de acessibilidades, pois os leitores de ecra não têm problemas a ler label e o campo a que está associado. A verdade é que me foi dificil saber se alguem usa/recomenda este método, e não queria implementar sem saber se poderia ter problemas. Finalmente encontrei uma artigo de Cameron Adams onde recomenda isso mesmo.
Esta será, por agora, a linha que vou optar nas mensagens de erro (o futuro dirá a qualidade desta abordagem).
De momento não tenho exemplo practicos online, mas se tudo correr bem (:S) irei usar isto em: portal da juventude e Work Value.
Se entretanto tiver uma nova abordagem irei colocar aqui, se tiverem sugestões o mail é: we@burocratik.com
Alex
