Lightbox (colorbox) acessível com HTML e jQuery usando WAI-ARIA

Postado em 31/01/2017 por Luiz Volso

A acessibilidade digital vem se tornando mais importante a cada dia, novas leis exigem que os sites brasileiros sejam acessíveis, garantindo assim participação de toda a população no processo de inclusão digital.

Um lightbox, ou simplesmente uma ferramenta de ampliação de imagens, é uma ferramenta essencial na web de hoje, infelizmente grande parte desses plugins não são acessíveis. Nesse artigo mostro uma forma de implementar o Colorbox de forma acessível.

Download e instalação do plugin

O Colorbox é baseado em JQuery portanto esse é um requisito para os próximos passos. Inclua o jQuery no documento antes de continuar.

Faça o download do Colorbox modificado em: https://github.com/lhvolso/lightbox-acessivel

Plugin original: http://www.jacklmoore.com/colorbox/

Adicione tanto o arquivo .JS quanto o arquivo .CSS no seu documento. O arquivo .JS deve ser adicionado obrigatoriamente após o jQuery.

Marcação HTML

Abaixo segue um exemplo da marcação semântica e correta para a galeria de imagens:

<h2>Galeria de Fotos</h2>
<p>Clique sobre as imagens para ampliá-las.</p>
<ul class="lightbox">
  <li>
    <a rel="gal" href="(img maior)"><img src="(thumb)" alt=" "></a>
  </li>
  <li>
    <a rel="gal" href="(img maior)"><img src="(thumb)" alt=" "></a>
  </li>
</ul>

Obs.: Para um conteúdo realmente acessível é imprescindível que o atributo ALT seja preenchido de forma correta!

O título e o parágrafo também são muito importantes, o primeiro para o usuário navegar com facilidade até a galeria e o segundo para indicar que as imagens possuem zoom no clique.

Ativando o Ligthbox

Para ativar o plugin só precisamos instanciar o métododo colorbox(); com o seletor correto por jQuery, no caso do exemplo ficaria assim:

$(function(){
  $('.lightbox a').colorbox();
});

Os testes foram feitos utilizando o NVDA no Windows tanto no Google Chrome quanto no Firefox.

Alguns bugs acontecem no Chrome: O conteúdo do primeiro ítem da galeria não é lido corretamente e nos demais ítens o título e a descrição são lidos duas vezes.

Qualquer dúvida ou sugestão de melhoria, não exite em entrar em contato. Um grande abraço.