Javascript links: pop-ups acessíveis

Vocês viram como resolvemos o problema de links com evento de onlick que precisam manter a barra de rolagem do browser no mesmo lugar. Pois bem, utilizando uma solução bem parecida, podemos agora montar um link que abre uma pop-up centralizada na tela e com dimensões definidas através do window.open() do javascript, e que ainda assim permanecerá funcional - abrindo uma nova janela com target="_blank" - para quem estiver usando um browser sem javascript habilitado. Ou seja, teremos um link para abrir pop-ups perfeitamente acessível!

Vejamos como é simples. Primeiro precisamos do script com a função para abrir nossa pop-up centraliada na tela dos usuários que tem javascript habilitado:

<script type="text/javascript">
function PopUpCentralizado(nomepagina, titulopagina, w, h, scroll) {
 var winl = (screen.width - w) / 2;
 var wint = (screen.height - h) / 2;
 winprops = 'height=' + h + ', width = ' + w + ', top = ' + wint + ', left = ' + winl + ', scrollbars = ' + scroll + ', location=no, status=no';
 win = window.open(nomepagina, titulopagina, winprops);
 if (parseInt(navigator.appVersion)  >= 4) {
  win.window.focus();
 }
} 
</script>

Agora vejamos como esse tipo de link é usualmente montado em sites que não tem preocupação com acessibilidade:

<a href="http://www.google.com" onclick="javascript:PopUpCentralizado(this.href, 'pop', '800', '600', 'yes');">Link com pop-up</a>

Rapare que o script pega o atributo href da tag <a> com "this.href". Com alguns pequenos ajustes conseguimos transformar esse link em um link acessível:

<a onclick="javascript:PopUpCentralizado(this.href, 'pop', '800', '600', 'yes'); return false" href="http://www.google.com" target="_blank">Link com pop-up acessível</a>

Utilizando a mesma solução para links com onclick, invertemos a ordem dos atributos na tag <a>, de modo que o onclick venha antes do href, e inserimos o "return false" para o script parar após o evento de clique e o browser não considerar o target="_blank". Dessa forma, quando o usuário tiver javascript habilitado, abrirá a pop-up normalmente, sem uma segunda janela ser chamada. Já quando o usuário por alguma razão não dispor de javascript no browser (seja um browser antigo, um leitor de tela ou browsers de mobiles, etc.) ele continuará abrindo uma nova janela - ou seja, o link continuará funcional e, portanto, acessível.

Ver exemplo

***

Muitas vezes o esforço requerido para esse tipo de ajuste é mínimo, e como o link servirá para browsers com ou sem javascript, esse tipo de "boa prática" deveria ser encorajado em qualquer projeto web, particularmente quando focado em acessibilidade.