Técnicas para as WCAG 2.0

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

-

SCR31: Utilizar script para alterar a cor de fundo ou o limite do elemento que recebe o foco

Aplicabilidade

HTML e XHTML, CSS, Script.

Esta técnica está relacionada com:

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

Esta técnica pode ser utilizada em agentes de utilizador que não suportem a pseudo-classe :focus, mas que suportem o script, incluindo o Microsoft Internet Explorer.

Descrição

A finalidade desta técnica é permitir ao autor utilizar JavaScript para aplicar CSS, de modo a tornar o indicador de foco mais visível do que o normal. Quando um elemento recebe foco, a cor de fundo ou o limite são alterados para o tornar visualmente distinto. Quando o elemento deixa de receber o foco, regressa ao seu estilo normal. Esta técnica pode ser utilizada em qualquer agente de utilizador HTML que suporte Script e CSS, independentemente de suportar ou não a pseudo-classe :focus.

Exemplos

Exemplo 1

Neste exemplo, quando o link recebe o foco, o seu fundo fica amarelo. Quando perde o foco, o amarelo é removido. Tenha em atenção que se o link tiver uma cor de fundo, deverá utilizar essa cor em vez de "" no script.

Código Exemplo:

...
<script>
 function toggleFocus(el)
 {
  el.style.backgroundColor =  el.style.backgroundColor=="yellow" ? "inherit" : "yellow";
 }
</script>

 ...

<a href="example.html" onfocus="toggleFocus(this)" onblur="toggleFocus(this)">focus me</a>
 ...

Testes

Procedimento

  1. Utilize a tecla de tabulação para percorrer cada elemento existente na página.

  2. Verifique se o indicador de foco é visível.

Resultados Esperados