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.