Técnicas para as WCAG 2.0

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

-

SCR2: Utilizar processadores de eventos redundantes de teclado e rato

Aplicabilidade

HTML e XHTML com suporte de scripting.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é demonstrar, utilizando eventos independentes de dispositivos, como alterar uma imagem decorativa em resposta a um evento do rato ou do foco. Utilize os eventos onmouseover e onmouseout para alterar uma imagem decorativa quando o cursor do rato se move sobre um elemento, ou se afasta dele, na página. Além disso, utilize os eventos onfocus e onblur para alterar uma imagem decorativa quando o elemento recebe e perde o foco.

O exemplo seguinte tem uma imagem decorativa à frente de um elemento anchor. Quando o utilizador move o cursor do rato sobre a etiqueta anchor, a imagem decorativa à frente do “anchor” é alterada. Quando o cursor do rato se afasta do elemento anchor, a imagem volta à sua versão original. O mesmo efeito de alteração de imagem ocorre quando o utilizador fornece o foco do teclado ao elemento anchor. Ao receber o foco, a imagem altera-se, quando o foco é perdido a imagem volta à versão original. Isto é conseguido anexando processadores de evento onmouseover, onmouseout, onfocus e onblur ao elemento anchor. O processador de evento é uma função JavaScript designada por updateImage(), que altera o atributo src da imagem. O updateImage() é chamado em resposta aos eventos onmouseover, onmouseout, onfocus e onblur.

Cada imagem recebe um id exclusivo. Este id exclusivo é transmitido ao updateImage() juntamente com um valor booleano, que indica qual a imagem que vai ser utilizada: updateImage(imgId, isOver);. O valor booleano verdadeiro é transmitido quando o cursor do rato se encontra sobre o elemento anchor, ou quando este recebe o foco. Um valor falso é transmitido quando o cursor do rato é removido do elemento anchor, ou quando este perde o foco. A função updateImage() utiliza o id da imagem para carregar a imagem e, em seguida, altera o atributo src com base no valor booleano. É de salientar que, visto que a imagem tem uma finalidade decorativa, tem um atributo alt nulo.

Nota: Recomenda-se que utilize imagens que sejam semelhantes em tamanho e especifique os atributos height e width no elemento image. Isto impede quaisquer alterações ao esquema da página quando a imagem é actualizada. Este exemplo utiliza imagens que são idênticas em tamanho.

Exemplos

Exemplo 1

Código Exemplo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
 <html lang="en">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 <title>Changing Image Source in a Device Independent Manner</title>
 <script type="text/javascript">
 /* This function will change the image src of an image element.
  * param imgId - the id of the image object to change
  * param isOver - true when mouse is over or object has focus,
  *                false when mouse move out or focus is lost
 */
 function updateImage(imgId, isOver) {
   var theImage = document.getElementById(imgId);
   if (theImage != null) { //could use a try/catch block for user agents supporting at least JavaScript 1.4
                           // These browsers support try/catch - NetScape 6, IE 5, Mozilla, Firefox
      if (isOver) {
        theImage.setAttribute("src","yellowplus.gif");
      }
      else {
        theImage.setAttribute("src","greyplus.gif");
      }
   }
 }
 </script>
 </head>
 <body>
 <p>Mouse over or tab to the links below and see the image change.</p>
 <a href="http://www.w3.org/wai" onmouseover="updateImage('wai', true);" onfocus="updateImage('wai', true);"
   onmouseout="updateImage('wai',false);" onblur="updateImage('wai',false);">
 <img src="greyplus.gif" border="0" alt="" id="wai">
   W3C Web Accessibility Initiative</a> &
 <a href="http://www.w3.org/International/" onmouseover="updateImage('i18n', true);" 
   onfocus="updateImage('i18n',true);" onmouseout="updateImage('i18n',false);"
   onblur="updateImage('i18n',false);">
   <img src="greyplus.gif" border="0" alt="" id="i18n">
   W3C Internationalization</a>
 </body>
 </html>

Testes

Procedimento

Carregue a página Web e teste os eventos utilizando o rato e o teclado.

  1. Verifique se a imagem "padrão" é apresentada como esperado quando a página Web é carregada.

  2. Utilizando o Rato

    1. Desloque o cursor do rato sobre o elemento que contém os processadores de eventos (neste exemplo, é um elemento anchor). Verifique se a imagem altera para a imagem esperada.

    2. Afaste o cursor do rato do elemento. Verifique se a imagem altera de novo para a imagem "padrão".

  3. Utilizando o Teclado

    1. Utilize o teclado para colocar o foco no elemento que contém os processadores de eventos. Verifique se a imagem altera para a imagem esperada.

    2. Utilize o teclado para remover o foco do elemento (normalmente, deslocando o foco para outro elemento). Verifique se a imagem altera para a imagem “padrão”.

  4. Verifique se a disposição dos outros elementos na página não é afectada quando a imagem é alterada.

Resultados Esperados