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.