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.

Javascript links: problema do "onclick" e rolagem da página

Uma das formas mais tradicionais de se inserir chamadas de javascript em um site é através do evento de "onclick" dos links (tags <a>). O motivo desse pequeno tutorial sobre o assunto é mostrar como coisas tão simples podem ser feitas de várias formas, e como nem sempre pensamos em usar a melhor forma possível.

Vamos considerar a forma mais usual de links com "onclick" que vemos por aí:

<a href="#" onclick="javascript:alert('Hello world!');">Clique aqui</a>

O que é chamado no "onclick" pode ser qualquer outra função mais complexa, não é isso que estou querendo discutir aqui. O problema está no atrubuto "href" que permanece com o valor "#". Como todos sabem isso fará com que a barra de scroll do browser retorne ao topo da página, caso estejamos clicando em um link somente após descer um pouco nosso scroll.

Isso é um problema irritante para a grande maioria dos usuários. O "problema desse problema" é que ele não impede a navegação nem causa qualquer outro grande dano a funcionalidade do site, ele apenas irrita... E hoje em dia, usuários irritados vão pensar duzentas e uma vezes em retornar ao seu site.

Agora gostaria de mostrar 3 soluções para esse problema, e depois descrever os prós e os contras de cada uma delas:

Solução 1: manter-se no mesmo lugar

Com essa solução inserimos um ID (#stay) em torno do link (também poderia ser <a name="stay"></a>) e apontamos o "href" do link para ele:

<span id="stay"><a href="#stay" onclick="javascript:alert('Hello world!');">Clique aqui</a></span>

Prós
- É a solução mais simples para um único link do tipo na página.

Contras
- Precisamos criar um ID específico para cada link, pois se dois IDs iguais aparecerem na mesma página, o link irá apontar para o primeiro deles (afora isso, obviamnete seu html não irá validar). Dessa forma não é uma boa solução para quando temos diversos links com "onclick" na mesma página.

Solução 2: usar javascript:undefined no "href"

Com essa solução inserimos no "href" um comando de javascript que na verdade não causa efeito algum:

<a href="javascript:undefined;" onclick="javascript:alert('Hello world!');" onmouseover="javascript:window.status='Este link abre um javascript'; return true" onmouseout="javascript:window.status=''; return true">Clique aqui</a>

Prós
- É uma solução que resolve o problema independente do número de links com "onclick" usados na mesma página.
- Parece ser a solução mais usada na web.

Contras
- A mensagem de status do browser vai mostrar exatamente "javascript:underfined;" ao invés de uma url usual. Para sites com público leigo, isso pode assustar potencialmente, levando a crer que existe "alguma coisa estranha ali naquele link" - isto é, se é que os usuários vão se preocupar com a mensagem de status do browser.
- No exemplo temos inclusive uma tentativa de contornar o problema com mais um pouco de javascript, a questão é que a maioria dos browsers modernos vem configurado para não considerar esse tipo de script de alteração da mensagem de status, por óbvias questões de segurança. Portanto, não parece haver solução para isso.

Solução 3: inserir o "onclick" com return false

Com essa solução informamos ao browser para parar de rodar eventos do link no o "onclick", evitando que o valor do "href" nos leve a qualquer lugar:

<a href="#" onclick="javascript:alert('Hello world!'); return false">Clique aqui</a>

Prós
- É uma solução que resolve o problema independente do número de links com "onclick" usados na mesma página.
- Na minha opnião é a melhor solução.

Contras
- Apesar de simples, não podemos esquecer de utilizar o return false.

Ver exemplos

***

É isso, espero que esse pequeno tutorial tenha lhes ajudado a resolver esse problema em específico; e também a sempre considerar que as soluções usuais e mais usadas nem sempre são as melhores soluções...