Técnicas para as WCAG 2.0

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

-

SCR20: Utilizar o teclado e outras funções específicas do dispositivo

Aplicabilidade

Aplica-se a todos os conteúdos que utilizem Script para implementar funcionalidades.

Esta técnica está relacionada com:

Descrição

O objectivo desta técnica é ilustrar a utilização de eventos específicos de teclado e de rato com um código que tenha uma função de scripting associada a um evento. Utilizar os eventos específicos de teclado e de rato em conjunto garante que o conteúdo pode ser utilizado por vários dispositivos. Por exemplo, um script pode desempenhar a mesma acção quando é detectado um "keypress" ao clicar num botão do rato. Esta técnica excede os requisitos do Critério de Sucesso em relação ao acesso por teclado ao incluir não só o acesso por teclado como através de outros dispositivos.

Em JavaScript, os processadores de eventos mais utilizados são o onblur, onchange, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreset, onselect, onsubmit, onunload. Algumas funções específicas do rato têm uma função específica do teclado correspondente lógica (tais como 'onmouseover' e 'onfocus'). O processador de eventos do teclado tem de ser fornecido para executar a mesma função que o processador de eventos do rato.

A tabela seguinte sugere processadores de eventos do teclado para fazer corresponder aos processadores de eventos do rato.

Correspondências de Processadores de Dispositivos
Utilize... ...com
mousedown keydown
mouseup keyup
click [1] keypress [2]
mouseover focus
mouseout blur

1 Embora click seja, em princípio, um processador de eventos do rato, a maioria dos agentes de utilizador HTML e XHTML processam este evento quando o controlo é activado, independentemente de este ter sido activado pelo rato ou pelo teclado. Na prática, não é necessário duplicar este evento. É incluído aqui por uma questão de organização, visto que os agentes de utilizador que não são em HTML apresentam esta função.

2 Visto que o processador de eventos keypress reage a qualquer tecla, deve primeiro efectuar uma verificação para garantir que a tecla Enter foi pressionada antes de processar o evento. Caso contrário, o processador de eventos é executado sempre que o utilizador pressiona qualquer tecla, até mesmo a tecla de tabulação, para sair do controlo, e isto não é normalmente desejável.

Algumas funções específicas do rato (tais como dblclick e mousemove) não têm uma função específica do teclado correspondente. Isto significa que algumas funções podem ter de ser implementadas de modo diferente para cada dispositivo (por exemplo, incluir vários botões para executar, através do teclado, as funções específicas do rato equivalentes implementadas).

Exemplos

Exemplo 1

Neste exemplo de um link de imagem, a imagem é alterada quando o utilizador coloca o ponteiro sobre a imagem. Para fornecer aos utilizadores de teclado uma experiência semelhante, a imagem é também alterada quando o utilizador utiliza a tabulação para aceder à imagem.

Código Exemplo:

<a href="menu.php" onmouseover="swapImageOn('menu')" onfocus="swapImageOn('menu')" 
onmouseout="swapImageOff('menu')" onblur="swapImageOff('menu')"> 
<img id="menu" src="menu_off.gif" alt="Menu" /> 
</a>

Exemplo 2

Este exemplo apresenta uma imagem para a qual o teclado pode ser utilizado para activar a função. O evento do rato onclick é duplicado por um evento do teclado onkeypressapropriado. O atributo tabindex garante que o teclado tem uma paragem de tabulação na imagem. Note que, neste exemplo, a função nextPage() deve verificar se a tecla pressionada foi a tecla Enter, caso contrário responde a todas as acções do teclado enquanto a imagem receber o foco, o que não é o comportamento pretendido.

Código Exemplo:

<img onclick="nextPage();" onkeypress="nextPage();" tabindex="0" src="arrow.gif" 
alt="Go to next page"> 

Nota: Este exemplo utiliza tabindex num elemento img . Apesar de isto ser actualmente inválido, é fornecido como técnica de transição para fazer com esta funcionalidade fique operacional.

Recursos

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

Testes

Procedimento

  1. Localize todas as funcionalidades interactivas.

  2. Verifique se todas as funcionalidades interactivas podem ser acedidas utilizando apenas o teclado.

Resultados Esperados