Técnicas para as WCAG 2.0

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

-

SCR21: Utilizar funções do Modelo de Objecto de Documento (DOM) para adicionar conteúdo a uma página

Aplicabilidade

ECMAScript utilizado em HTML e XHTML.

Esta técnica está relacionada com:

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

Este exemplo foi testado com êxito no Windows XP com IE 6 e Firefox 1.5.0.1, utilizando JAWS 7 e WindowEyes 5.5. Note que, ao adicionar novos conteúdos a uma página, os leitores de ecrã podem não ler automaticamente o novo conteúdo. Para garantir que o novo conteúdo é lido, coloque o foco no novo elemento, ou certifique-se de que o foco é colocado sob o local actual e de que será encontrado quando o utilizador continuar a percorrer a página.

Descrição

O objectivo desta técnica é demonstrar como utilizar as funções do Modelo de Objecto de Documento (DOM) para adicionar conteúdos a uma página, em vez de utilizar document.write ou object.innerHTML. O método document.write() não funciona com XHTML quando é fornecido com o tipo de MIME correcto (application/xhtml+xml) e a propriedade innerHTML não fizer parte da especificação do DOM. Por isso, deve ser evitado. Se as funções do DOM forem utilizadas para adicionar o conteúdo, os agentes de utilizador podem aceder ao DOM para recuperar o conteúdo. A função createElement() pode ser utilizada para criar elementos no DOM. A função createTextNode() é utilizada para criar texto associado aos elementos. As funções appendChild(), removeChild(), insertBefore() e replaceChild() são utilizadas para adicionar e remover elementos e nós. As outras funções do DOM são utilizadas para atribuir atributos aos elementos criados.

Nota: Ao adicionar elementos que podem receber o foco no documento, não adicione atributos tabindex para definir, de forma explícita, a ordem de tabulação, visto que isto pode causar problemas quando se adiciona elementos que podem receber o foco no meio de um documento. Permita que a ordem de tabulação predefinida seja atribuída ao novo elemento, não definindo um atributo tabindex de forma explícita.

Exemplos

Exemplo 1

Este exemplo demonstra a utilização de scripting do lado do cliente para validar um formulário. Se forem encontrados erros, as mensagens de erro apropriadas são apresentadas. O exemplo utiliza as funções do DOM para adicionar a notificação de erro, que consiste num título, num parágrafo curto a explicar que ocorreu um erro e numa lista de erros ordenada. O conteúdo do título apresenta-se como um link, para que possa ser utilizado para chamar a atenção do utilizador para o erro, utilizando o método do foco. Cada item na lista está escrito também como um link que coloca o foco no campo do formulário com erro quando se segue um link.

Por uma questão de simplicidade, o exemplo valida apenas dois campos de texto, mas pode facilmente ser alargado para se tornar num processsador de formulário genérico. A validação do lado do cliente não deve ser o único meio de validação, e deve ser apoiada pela validação do lado do servidor. As vantagens da validação do lado do cliente são que pode fornecer feedback imediato ao utilizador para que este não tenha de esperar que os erros sejam devolvidos pelo servidor, ajudando a reduzir tráfego desnecessário no servidor.

Este é o script que adiciona os processadores de eventos ao formulário. Se o scripting estiver desactivado, a função validateNumbers() é invocada para executar a validação do lado do cliente antes de o formulário ser submetido ao servidor. Se o não estiver desactivado, o formulário é submetido de imediato ao servidor e a validação também deve ser implementada no servidor.

Código Exemplo:

window.onload = initialise;
function initialise()
{
  // Ensure we're working with a relatively standards compliant user agent
  if (!document.getElementById || !document.createElement || !document.createTextNode)
    return;

  // Add an event handler for the number form
  var objForm = document.getElementById('numberform');
  objForm.onsubmit= function(){return validateNumbers(this);};
}

Esta é a função de validação. Note a utilização das funções do DOM createElement(), createTextNode() e appendChild() para criar os elementos de mensagem de erro.

Código Exemplo:

function validateNumbers(objForm)
{
  // Test whether fields are valid
  var bFirst = isNumber(document.getElementById('num1').value);
  var bSecond = isNumber(document.getElementById('num2').value);
  // If not valid, display errors
  if (!bFirst || !bSecond)
  {
    var objExisting = document.getElementById('validationerrors');
    var objNew = document.createElement('div');
    var objTitle = document.createElement('h2');
    var objParagraph = document.createElement('p');
    var objList = document.createElement('ol');
    var objAnchor = document.createElement('a');
    var strID = 'firsterror';
    var strError;
    // The heading element will contain a link so that screen readers
    // can use it to place focus - the destination for the link is 
    // the first error contained in a list
    objAnchor.appendChild(document.createTextNode('Errors in Submission'));
    objAnchor.setAttribute('href', '#firsterror');
    objTitle.appendChild(objAnchor);
    objParagraph.appendChild(document.createTextNode('Please review the following'));
    objNew.setAttribute('id', 'validationerrors');
    objNew.appendChild(objTitle);
    objNew.appendChild(objParagraph);
    // Add each error found to the list of errors
    if (!bFirst)
    {
      strError = 'Please provide a numeric value for the first number';
      objList.appendChild(addError(strError, '#num1', objForm, strID));
      strID = '';
    }
    if (!bSecond)
    {
      strError = 'Please provide a numeric value for the second number';
      objList.appendChild(addError(strError, '#num2', objForm, strID));
      strID = '';
    }
    // Add the list to the error information
    objNew.appendChild(objList);
    // If there were existing errors, replace them with the new lot,
    // otherwise add the new errors to the start of the form
    if (objExisting)
      objExisting.parentNode.replaceChild(objNew, objExisting);
    else
    {
      var objPosition = objForm.firstChild;
      objForm.insertBefore(objNew, objPosition);
    }
    // Place focus on the anchor in the heading to alert
    // screen readers that the submission is in error
    objAnchor.focus();
    // Do not submit the form
    objForm.submitAllowed = false;
    return false;
  }
  return true;
}

// Function to validate a number
function isNumber(strValue)
{
  return (!isNaN(strValue) && strValue.replace(/^\s+|\s+$/, '') !== '');
} 

Em seguida, estão as funções de ajuda para criar a mensagem de erro e para colocar o foco no campo de formulário associado.

Código Exemplo:

// Function to create a list item containing a link describing the error
// that points to the appropriate form field
function addError(strError, strFragment, objForm, strID)
{
  var objAnchor = document.createElement('a');
  var objListItem = document.createElement('li');
  objAnchor.appendChild(document.createTextNode(strError));
  objAnchor.setAttribute('href', strFragment);
  objAnchor.onclick = function(event){return focusFormField(this, event, objForm);};
  objAnchor.onkeypress = function(event){return focusFormField(this, event, objForm);};
  // If strID has a value, this is the first error in the list
  if (strID.length > 0)
    objAnchor.setAttribute('id', strID);
  objListItem.appendChild(objAnchor);
  return objListItem;
}

// Function to place focus to the form field in error
function focusFormField(objAnchor, objEvent, objForm)
{
  // Allow keyboard navigation over links
  if (objEvent && objEvent.type == 'keypress')
    if (objEvent.keyCode != 13 && objEvent.keyCode != 32)
      return true;
  // set focus to the form control
  var strFormField = objAnchor.href.match(/[^#]\w*$/);
  objForm[strFormField].focus();
  return false;
}

Este é o HTML para o formulário de exemplo.

Código Exemplo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
        <title>ECMAScript Form Validation</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script type="text/javascript" src="validate.js"></script>
</head>
<body>
<h1>Form Validation</h1>
<form id="numberform" method="post" action="form.php">
<fieldset>
<legend>Numeric Fields</legend>
<p>
<label for="num1">Enter first number</label>
<input type="text" size="20" name="num1" id="num1">
</p>
<p>
<label for="num2">Enter second number</label>
<input type="text" size="20" name="num2" id="num2">
</p>
</fieldset>
<p>
<input type="submit" name="submit" value="Submit Form">
</p>
</form>
</body>
</html>

Este exemplo limita-se ao scripting do lado do cliente e deve ser suportado através da validação do lado do cliente. Este exemplo limita-se à criação de mensagens de erro quando o scripting do lado do cliente está disponível.

Este é um link para um exemplo prático: Validação de Formulário

Recursos

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

(actualmente, não existe nenhuma indicada)

Testes

Procedimento

Para as páginas que criam um novo conteúdo de forma dinâmica:

  1. Verifique o código fonte e se o novo conteúdo não foi criado utilizando document.write(), innerHTML, outerHTML, innerText ou outerText.

Resultados Esperados