Técnicas para as WCAG 2.0

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

-

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

Aplicabilidade

HTML e XHTML com scripting.

Esta falha está relacionada com:

Descrição

Esta falha demonstra como a utilização de elementos HTML genéricos para criar controlos da interface de utilizador pode tornar os controlos inacessíveis à tecnologia de apoio. As tecnologias de apoio dependem do conhecimento da função e do estado actual de um componente para fornecer essa informação ao utilizador. Muitos elementos HTML têm funções bem definidas, tais como links, botões, campos de texto, etc. Os elementos genéricos, tais como div e span não têm funções predefinidas. Quando estes elementos genéricos são utilizados para criar controlos da interface de utilizador em HTML, a tecnologia de apoio poderá não ter as informações necessárias para descrever e interagir com o controlo.

Para obter links para especificações que descrevem mecanismos para fornecer as informações necessárias sobre a função e o estado para criar controlos da interface de utilizador totalmente acessíveis, consulte a secção Recursos abaixo.

Exemplos

Exemplo 1

O exemplo seguinte falha, uma vez que cria uma caixa de verificação utilizando um span e uma imagem.

Código Exemplo:

                          <p> 
  <span  onclick="toggleCheckbox('chkbox')"> 
  <img src="unchecked.gif"  id="chkbox" alt=""> Include Signature 
  </span> 
  </p>

Exemplo 2

Este é o código de script que altera a origem da imagem quando o utilizador clica no span com o rato.

Código Exemplo:

                         
  var CHECKED = "check.gif"; 
  var UNCHECKED = "unchecked.gif"; 
  function toggleCheckbox(imgId) { 
  var theImg = document.getElementById(imgId); 
  if ( theImg.src.lastIndexOf(CHECKED)!= -1 ) { 
  theImg.src = UNCHECKED; 
  // additional code to implement unchecked action 
  } 
  else { 
  theImg.src = CHECKED; 
  // additional code to implement checked action 
  } 
  } 

Uma caixa de verificação criada desta forma não irá funcionar com a tecnologia de apoio, uma vez que não existe nenhuma informação que a identifique como uma caixa de verificação. Além disso, este exemplo também não é operável a partir do teclado e não irá cumprir a directriz 2.1.

Recursos

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

Testes

Procedimento

  1. Verifique o código fonte dos elementos que têm processadores de evento na marcação ou através de scripting.

  2. Se esses elementos estiverem a funcionar como controlos da interface de utilizador, verifique se a função do controlo está definida.

Resultados Esperados

Se o passo 2 for falso e o controlo da interface de utilizador criado não tiver informações sobre a função, aplica-se esta condição de falha.