Validação Acessível em Formulários HTML com WAI-ARIA

Postado em 20/06/2017 por Luiz Volso

Os formulários sempre foram uma grande barreira de acessibilidade, principalmente para quem utiliza leitores de telas como por exemplo, pessoas cegas.

Nesse artigo proponho uma opção, dentre outras várias, de um formulário em HTML que seja acessível à leitores de tela.

Primeiramente colocamos container que exibirá as mensagens de erro de validação do formulário:

<ul id="erros" aria-hidden="true"></ul>

A marcação básica do formulário será a seguinte:

<form action="#">
  <div>
    <label for="nome"><span>Nome</span> (obrigatório):</label>
    <input type="text" name="nome" id="nome" aria-required="true">
  </div>
  <div>
    <label for="email"><span>E-Mail</span> (obrigatório):</label>
    <input type="text" name="email" id="email" aria-required="true">
  </div>
  <div>
    <label for="opcoes"><span>Opções</span> (obrigatório):</label>
    <select name="opcoes" id="opcoes" aria-required="true">
      <option value="">Escolha...</option>
      <option value="teste1">Teste 1</option>
      <option value="teste2">Teste 2</option>
    </select>
  </div>
  <div>
    <label for="mensagem"><span>Mensagem</span> (obrigatório):</label>
    <textarea name="mensagem" id="mensagem"></textarea>
  </div>
  <button type="submit">ENVIAR FORMULÁRIO</button>
</form>

Utilizamos o atributo for do elemento label, com o mesmo id dos respectivos campos, para identificar qual rótulo pertence a qual controle de formulário, dessa forma o leitor de telas vai dizar ao usuário que campo contém o foco de teclado.

O atributo aria-required="true" informa ao leitor de telas que um determinado campo é obrigatório. Recomendo mesmo assim indicar textualmente no rótulo para não haver problemas em navegadores que não suportam ARIA. Os elementos div foram colocados como containers dos controles de formulário para facilitar a validação por jQuery que faremos em seguida.

Adicionamos também um pouco de CSS para melhorar um pouco o visual e esconder inicialmente o container das mensagens de erro:

form > div{
  margin: 0 0 24px 0;
}
#erros{
  display: none;
}
#erros a{
  color: #F00;
}

Vamos incluir o jQuery no documento e depois veremos a programação que vai validar o formulário.

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<script>
$(function(){
  // No clique do botão do form
  $("button").click(function(e){
    
    // Esvaziamos o container de erros
    $("#erros").html('');
    // Criamos a variável de validação
    var isValid = 1;
    // Iteramos cada container de campos de formulário
    $("form").children("div").each(function(){
      // Encontramos todos os campos que queremos validar
      var formControl = $(this).find("input, select, textarea");
      // Se o campo estiver vazio:
      if(!formControl.val()){
         // Pegamos o texto do rótulo
        var rotulo = $(this).find("label > span").html();
        // Pegamos o id do campo
        var idCampo = formControl.attr("id");
        // Adicionamos a mensagem de erro no container
        $("#erros").append('<li><a href="#' + idCampo + '">O campo ' + rotulo + ' é obrigatório</a></li>');
        // Atualizamos a variável de validação como 0 (inválido)
        isValid = 0;
      }
    });
    // Se o form não é válido
    // Setamos o container de erro com aria-hidden="false",
    // mostramos ele no documento
    // e damos foco no primeiro erro
    // dessa forma o leitor de tela vai começar ler esse bloco
    if (!isValid) {
      $("#erros").attr("aria-hidden", false).show().children("li").first().children("a").focus();
    }else{
      // Se for válido, envia
      $("form").submit();
    }
  });
});
</script>

Caso fique alguma dúvida, entre em contato através do formulário abaixo. Um abraço!