Técnicas para as WCAG 2.0

Ir para o conteúdo (Pressione a tecla Enter)

-

SCR35: Tornar as acções acessíveis por teclado utilizando o evento onclick de âncoras e botões

Aplicabilidade

Scripts utilizados com HTML ou XHTML.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é demonstrar como invocar uma função de scripting de modo a ser acessível por teclado, associando-a a um controlo acessível por teclado. Para garantir que as acções de script podem ser invocadas a partir do teclado, estão associadas a elementos HTML "accionáveis de forma nativa" (links e botões). O evento onclick destes elementos é independente do dispositivo. Apesar de "onclick" parecer estar associado ao rato, o evento onclick está, na realidade, associado à acção predefinida de um link ou botão. A acção predefinida ocorre quando o utilizador clica no elemento com um rato, mas também ocorre quando o utilizador coloca o foco sobre o elemento e pressiona a tecla Enter ou Space, e quando o elemento é accionado através da API de acessibilidade.

Embora esta técnica dependa do scripting do lado do cliente, é aconselhável fornecer uma explicação ou implementação alternativas para ambientes nos quais o scripting não esteja disponível. Ao utilizar elementos anchor para invocar uma acção JavaScript, é fornecida uma explicação ou implementação alternativas através do atributo href . Ao utilizar botões, é fornecida através de um formulário.

Exemplos

Exemplo 1

Link que executa um script e não tem qualquer alternativa para browsers que não suportam scripts. Esta abordagem só deve ser utilizada quando o script for dependente de uma Tecnologia Suportada por Acessibilidade.

Apesar de não pretender navegar a partir deste link, tem de utilizar o atributo href no elemento a, de modo a torná-lo num link verdadeiro e a obter os eventos correctos. Neste caso, é utilizado "#" como o destino do link, mas pode utilizar o que quiser. Este link nunca será navegado.

A expressão "return false;" no fim da função de processamento de eventos doStuff() indica ao browser para não navegar até ao URI. Sem ela, a página seria actualizada após a execução do script.

Código Exemplo:

<script> 
function doStuff()
 {
  //do stuff
    return false;
  }
</script>
<a href="#" onclick="return doStuff();">do stuff</a>

Exemplo 2

Link que executa um script, mas navega até outra página quando o script não está disponível. Esta abordagem só pode ser utilizada por sítios da Web que não dependam de scripts se o destino de navegação fornecer a mesma funcionalidade do script. Este exemplo é idêntico ao exemplo 1, com a excepção de que o respectivo href está agora definido para uma página real, dostuff.htm. Dostuff.htm tem de fornecer a mesma funcionalidade do script. A expressão "return false;" no fim da função de processamento de eventos doStuff() indica ao browser para não navegar até ao URI. Sem ela, o browser iria navegar até dostuff.htm após a execução do script.

Código Exemplo:

<script> 
function doStuff() 
 {  
  //do stuff  
  return false; 
 }
</script>
<a href="dostuff.htm" onclick="return doStuff();">do stuff</a>

Está disponível um exemplo prático deste código. Consulte Criar Links de Acção utilizando JavaScript.

Exemplo 3

Botão que executa um script e encaminha para um formulário para os utilizadores sem scripts. Esta abordagem só pode ser utilizada por sítios da Web que não dependam de scripts se o formulário fornecer a mesma funcionalidade do script. A expressão onsubmit="return false;" impede a submissão do formulário.

Código Exemplo:

<script>
  function doStuff()
 {
     //do stuff
 }
</script>
<form action="doStuff.aspx" onsubmit="return false;">
 <input type="submit" value="Do Stuff" onclick="doStuff();" />
</form>

Está disponível um exemplo prático deste código. Consulte Criar Botões de Acção utilizando JavaScript.

Exemplo 4

Botão que executa um script, implementado com input type="image". Tenha em atenção que tem de adicionar um atributo title ao input para fornecer um equivalente de texto para a imagem. Esta abordagem só deve ser utilizada quando o script for dependente.

Código Exemplo:

<script>
  function doStuff()
  {
     //do stuff
   return false;
  }
</script>
<input  type="image"  src="stuff.gif"  title="Do stuff"  onclick="return doStuff();" />

Exemplo 5

Botão que executa um script, implementado com input type="submit", input type="reset" ou input type="button". Esta abordagem só deve ser utilizada quando o script for dependente.

Código Exemplo:

<input type="submit" onclick="return doStuff();" value=”Do Stuff” />

Exemplo 6

Botão que executa um script, implementado com button/button. Isto é útil quando pretende mais controlo sobre o aspecto do botão. Neste exemplo em particular, o botão contém um ícone e algum texto. Esta abordagem só deve ser utilizada quando o script for dependente.

Código Exemplo:

<button onclick="return doStuff();">
 <img src="stuff.gif" alt="stuff icon">
 Do Stuff
</button>

Recursos

Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.

Testes

Procedimento

Para todas as acções de script associadas a elementos a, button ou input :

  1. Num agente de utilizador que suporte Scripting

    • Clique no controlo com o rato.

    • Verifique se a acção de scripting é executada correctamente.

    • Se o controlo for um elemento anchor, verifique se o URI existente no atributo href do elemento anchor não é invocado.

    • Verifique se é possível navegar até ao controlo e fornecer foco ao mesmo através do teclado.

    • Coloque o foco do teclado sobre o controlo.

    • Verifique se pressionar ENTER invoca a acção de scripting.

    • Se o controlo for um elemento anchor, verifique se o URI existente no atributo href do elemento anchor não é invocado.

  2. Num agente de utilizador que não suporte Scripting

    • Clique no controlo com o rato.

    • Se o controlo for um elemento anchor, verifique se o URI existente no atributo href do elemento anchor é invocado.

    • Verifique se é possível navegar até ao controlo e fornecer foco ao mesmo através do teclado.

    • Coloque o foco do teclado sobre o controlo.

    • Se o controlo for um elemento anchor, verifique se pressionar ENTER invoca o URI do atributo href do elemento anchor.

Resultados Esperados