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!