Se você desenvolve aplicativos, sites ou mesmo sistemas, sabe o quanto não é nada divertido criar, validar e salvar formulários. No entanto, eles são fundamentais e precisam funcionar corretamente para que o fluxo da navegação atinja seu objetivo. E se o usuário estiver sem o mouse, ou utilizando algum leitor de tela? Será que essa validação realmente funciona?

O trabalho do desenvolvedor web nada mais é do que criar interfaces navegáveis, funcionais e principalmente usáveis. E como se aplica esse conceito aos formulários? Utilizando WAI-ARIA e jQuery Validate, podemos criar formulários acessíveis, ou melhor, incríveis.

O que é WAI-ARIA?

Define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com deficiências. Ele contribui especialmente com conteúdo dinâmico e interface de controles de usuário avançadas, desenvolvidos com Ajax, HTML, JavaScript e tecnologias relacionadas. Resumidamente, ele serve para estender o significado das interações da sua aplicação.

O que é jQuery Validate?

É um plugin jquery utilizado para criar validações front-end em formulários. A grande vantagem está na facilidade em implementá-lo e personalizá-lo, de acordo com seu projeto.

O que é  acessibilidade Web?

Significa que pessoas portadoras de necessidades especiais sejam capazes de usar a Web, mais concretamente, significa uma Web projetada de modo que essas pessoas possam perceber, entender, navegar e interagir de uma maneira efetiva com ela, bem como criar e contribuir com conteúdos (W3C).

Sobre leitores de tela

É um programa que interage com o sistema operacional do computador, captura toda e qualquer informação apresentada na forma de texto e a transforma em uma resposta falada, utilizando um sintetizador de voz.

Hoje existem excelentes leitores de tela que podem atender às mais diversas necessidades dos deficientes visuais, alguns são pagos e outros gratuitos. Os mais utilizados são:

• NVDA (Windows) – gratuito
• JAWS (Windows) – pago
• Voice Over (Mac) – gratuito
• DosVox (Windows) – gratuito
• Virtual Vision (Windows) – pago

Iniciando o formulário

Após escrever todo seu HTML, criar seu estilo via CSS e implementar, via JavaScript, toda a sua regra aos campos de formulário, vamos personalizar o plugin para deixá-lo acessível. Existem alguns métodos do plugin – neste exemplo usaremos errorPlacement, highlight e unhighlight.

$('form').validate({
    errorClass: 'help-block',
    errorElement: 'p',
    errorPlacement: function(error, element) {
      element.parents('.form-group').append(error);
      var msg = $(element).next('.help-block').text();
      $(element).attr('aria-label', msg );
    },
    highlight: function(element, errorClass){
      $(element)
      .attr('aria-invalid', true)
      .parents('.form-group')
      .addClass('has-error');
    },
    unhighlight: function(element, errorClass){
      $(element).removeAttr('aria-invalid')
      .removeAttr('aria-label')
      .parents('.form-group').removeClass('has-error');
    }
  });

• errorPlacement: É adicionado no elemento (campo de input), no valor do atributo aria-label, a mesma mensagem de erro. Assim, quando o leitor dá um foco no campo, ele lê a informação para o usuário.
• highlight: É adicionado no elemento (campo de input) o atributo aria-invalid=”true”, informando ao leitor que há erro no campo.
• unhighlight: São removidos os atributos aria-invalid e aria-label, já que na função unhightlight, acontece quando não existe mais erro nos campos.

<div role="alert" class="alert alert-success">
	Cadastro feito com sucesso! Verifique seu e-mail.
</div>

Conclusão

Criar formulários é um pouco chato, mas deve ser pensado e desenvolvido de uma forma simples, pra que ele tenha um fluxo de fácil entendimento e compreensão por parte do usuário. As mensagens de erro precisam ser bem descritivas, com visual de destaque e acessível aos leitores de tela. Dessa forma, todos ganham: quem vende, quem compra, quem cadastra, quem reclama, ou mesmo aqueles que querem apenas fazer um elogio, crítica ou sugestão.

Façam testes usando somente o teclado, e apenas depois com os leitores de tela.

O grande lance de trabalhar com web é que podemos melhorar diretamente a vida das pessoas, sendo quando elas compram produtos, viagens, roupas, objetos etc. E pra tudo isso precisamos de um formulário.

Façam sites acessíveis, consequentemente formulários acessíveis. Esse pensamento deve fazer parte de todas as áreas: Vendas, Gerência, UX, Designer, Front-end, Back-end, Redatores, Social Mídia e QA.

Acessibilidade não é caridade, e sim uma questão de consciência. Se a Web é conteúdo, então que esse conteúdo chegue a todos!

Veja um exemplo online de um formulário com JQuery Validate http://ow.ly/OsGSp

Finalizando o formulário

Quando o usuário preenche todos os campos obrigatórios e não há mais a necessidade de exibição da validação, chegamos à última fase do formulário, que é a de exibir uma mensagem de feedback, ou seja, do que aconteceu depois da ação desse usuário. Um exemplo fácil será uma mensagem escrita: Formulário enviado com sucesso!

No entanto, essa mensagem precisa receber o foco na hora da exibição. Assim, tanto o usuário vidente quanto aquele que utiliza o leitor de tela consegue receber claramente a mensagem final.

Dica final: utilize a role=”alert” conforme no exemplo, assim o leitor entenderá que é um elemento de alerta.

***

Artigo publicado originalmente na Revista iMasters #15: http://issuu.com/imasters/docs/revista_imasters_15_agosto2015