Técnicas para as WCAG 2.0

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

-

SCR29: Adicionar acções acessíveis por teclado a elementos HTML estáticos

Aplicabilidade

HTML e XHTML, Script.

Esta técnica está relacionada com:

Notas de Apoio para o Agente de Utilizador e para a Tecnologia de Apoio

HTML 4.01 apenas define o atributo tabindex para a, area, button, input, object, select e textarea, e limita o respectivo valor para o intervalo entre 0 e 32767. A utilização de tabindex com outros tipos de elemento e o valor tabindex -1 são suportados no Internet Explorer 5.01 e posterior, no Firefox 1.5 e posterior, no Opera 9.5 e posterior e no Camino. Tenha em atenção que modificar o foco através do script pode originar um comportamento imprevisível nos leitores de ecrã que utilizam um cursor virtual.

Descrição

O objectivo desta técnica é demonstrar como fornecer acesso por teclado, para um controlo da interface de utilizador que seja implementado por acções, a elementos HTML estáticos, tais como div ou span. Esta técnica garante que o elemento pode receber foco, definindo o atributo tabindex, e garante que a acção pode ser accionada a partir do teclado, fornecendo um processador onkeyup ou onkeypress além de um processador onclick .

Quando o atributo tabindex tem o valor 0, o elemento pode receber foco através do teclado e é incluído na ordem de tabulação do documento. Quando o atributo tabindex tem o valor -1, não é possível utilizar a tecla de tabulação para percorrer até ao elemento, mas o foco pode ser definido de forma programática, utilizando element.focus().

Como os elementos HTML estáticos não têm acções associadas, não é possível fornecer uma explicação ou implementação alternativas em ambientes nos quais o scripting não está disponível. Esta técnica só deve ser utilizada em ambientes que suportem o scripting do lado do cliente.

Nota: Estes controlos da interface de utilizador têm de continuar a cumprir o Critério de Sucesso 4.1.2. A aplicação desta técnica sem fornecer igualmente a função, o nome e o estado do controlo da interface de utilizador irá resultar na Falha F59: Falha do Critério de Sucesso 4.1.2 devido à utilização de script para tornar div ou span num controlo da interface de utilizador em HTML.

Exemplos

Exemplo 1: Adicionar uma acção JavaScript a um elemento div

São atribuídos ao elemento div existente na página um atributo id exclusivo e um atributo tabindex com o valor 0. Um script utiliza o Modelo de Objecto de Documento (DOM) para localizar o elemento div através do respectivo id e adiciona os processadores onclick e onkeyup . O processador onkeyup irá invocar a acção quando a tecla Enter for pressionada. Tenha em atenção que o elemento div tem de ser carregado no DOM antes de poder ser localizado e modificado. Normalmente, isto é efectuado invocando o script a partir do evento onload do elemento body . O script para adicionar os processadores de evento só é executado se o agente de utilizador suportar JavaScript e o tiver activado.

Código Exemplo:

...
<script type="text/javascript">
 // this is the function to perform the action. This simple example toggles a message.
 function doSomething(event) {
   var msg=document.getElementById("message");
   msg.style.display = msg.style.display=="none" ? "" : "none";
   //return false from the function to make certain that the href of the link does not get invoked
   return false;
 }
 // this is the function to perform the action when the Enter key has been pressed.  
 function doSomethingOnEnter(event) {
   var key = 0;
   // Determine the key pressed, depending on whether window.event or the event object is in use
   if (window.event) {
     key = window.event.keyCode;
   } else if (event) {
     key = event.keyCode;
   }
   // Was the Enter key pressed?
   if (key == 13) {
     return doSomething(event);
   } 
   // The event has not been handled, so return true
   return true;
 }
 // This setUpActions() function must be called to set the onclick and onkeyup event handlers onto the existing 
 // div element. This function must be called after the div element with id="active" has been loaded into the DOM.
 // In this example the setUpActions() function is called from the onload event for the body element.
 function setUpActions() {
   // get the div object
   var active=document.getElementById("active");
   // assign the onclick handler to the object.
   // It is important to return false from the onclick handler to prevent the href attribute
   // from being followed after the function returns.
   active.onclick=doSomething;
   // assign the onkeyup handler to the object.
   active.onkeyup=doSomethingOnEnter;
 }
 </script>

 <body onload="setUpActions();">
 <p>Here is the link to modify with a javascript action:</p>
 <div>
  <span id="active" tabindex="0">Do Something</span>
 </div>
 <div id="message">Hello, world!</div>
 ...

Este é um exemplo prático deste código: Criar Divs com Acções utilizando JavaScript.

Recursos

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

Testes

Procedimento

Num agente de utilizador que suporte Scripting:

  1. Clique no controlo com o rato.

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

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

  4. Coloque o foco do teclado sobre o controlo.

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

Resultados Esperados