Modal Acessível com HTML, jQuery e WAI-ARIA
Postado em 09/10/2017 por Luiz Volso
Nesse artigo vamos desenvolver um exemplo de modal acessível utilizando WAI-ARIA, lembrando que, essa não é a única forma de se fazer, existem vários modelos de implementação dessa tecnologia.
Vejo em muitos sites por aí o uso de janelas modais para os mais diversos fins, confirmarção de envio de formulários, cadastro de e-mail para newsletter, visualização de conteúdos relacionados, etc.
A janela modal é uma solução elegante para diversas aplicações, o problema é que nem sempre ela é acessível para usuários cegos utilizando leitores de telas.
Como sempre, primeiro vamos à marcação HTML.
A parte fácil, marcação com o link que ao ser clicado, abre o modal:
<h1>Exemplo de Modal Acessível</h1>
<p><a id="abrirmodal" href="#">Abrir Janela Modal</a></p>
Agora a marcação do modal em si:
<div id="modal" role="dialog" aria-hidden="true" aria-labelledby="titulo" aria-describedby="descricao">
<div class="centro">
<a class="fechar">Fechar Modal</a>
<p id="titulo">Cadastro de Usuário</p>
<p id="descricao">Preencha seus dados abaixo:</p>
<form action="#">
<label for="campo1">Nome:</label>
<input type="text" id="campo1" name="nome" required>
<label for="campo2">E-Mail:</label>
<input type="email" id="campo2" name="email" required>
<button>Enviar</button>
</form>
</div>
</div>
Precisamos também incluir a biblioteca jQuery, e a seguir segue o código que controla o comportamento do modal acessível, o código já está comentado explicando o funcionamento:
$(function(){
// Variável para guardar o elemento que foi clicado
var clicado;
// Função que abre o modal clicando em um link da lista
$("#abrirmodal").click(function(){
// Armazenamos o elemento que foi clicado para abrir o modal
clicado = $(this);
// Mostra o modal e seta aria-hidden="false"
$("#modal").fadeIn(200).attr("aria-hidden", false);
// Da o foco no primeiro elemento de formulário
// Poderia ser qualquer outro elemento, isso é necessário para que o leitor de telas "perceba" que o modal abriu
// Precisa-se colocar o foco no primeiro elemento de conteúdo após os elementos aria-labelledby e aria-describedby
$("#campo1").focus();
});
// Função que fecha o modal clicando no link fechar
$("a.fechar").click(function(){
// Esconde o modal e seta aria-hidden="true"
$("#modal").fadeOut(200).attr("aria-hidden", true);
// Devolvemos o foco de teclado no elemento clicado pelo usuário para abrir o modal
clicado.focus();
});
// Função que fecha o modal pressionando ESC
$(document).keyup(function(e) {
if (e.keyCode == 27) {
// Esconde o modal e seta aria-hidden="true"
$("#modal").fadeOut(200).attr("aria-hidden", true);
// Devolvemos o foco de teclado no elemento clicado pelo usuário para abrir o modal
clicado.focus();
}
});
});
Quando o modal acessível é aberto e o foco cai no primeiro elemento de formulário, o leitor de telas faz a leitura
do título setado em aria-labelledby
e a descrição setada em aria-describedby.
Nesses dois atributos colocamos os IDs dos respectivos conteúdos que estão nos elementos <p>
dentro do modal.
Caso o modal não tenha um elemento que possa receber foco (links e controles de formulários), podemos colocar o foco em qualquer outro elemento contanto que este tenha o atributo tabindex=”0″.
Nesse caso podemos jogar o foco no título do modal, ficando assim:
<p id="titulo" tabindex="0">Cadastro de Usuário</p>
Devemos fazer as devidas alterações no código jQuery que abre o modal:
$("#titulo").focus();
Vamos adicionar um pouco de CSS para que o modal fique com a “cara” de modal mesmo:
<style>
#modal{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.8);
}
#modal .centro{
width: 600px;
height: 400px;
background-color: #FFF;
position: absolute;
top: 50%;
left: 50%;
margin: -216px 0 0 -316px;
padding: 16px;
border-radius: 5px;
}
#modal .centro a.fechar{
float: right;
}
#titulo{
font-size: 1.8em;
font-weight: bold;
}
#modal{
display: none;
}
</style>
Faça o teste usando o mouse, somente o teclado e também com o leitor de telas NVDA ativado. Qualquer dúvida, utiliza o formulário de comentário no final da página!
Grande abraço.