Técnicas para as WCAG 2.0

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

-

ARIA4: Utilizar Accessible Rich Internet Applications para identificar de forma programática campos de formulário conforme necessário

Aplicabilidade

HTML e XHTML com scripting e suporte de Accessible Rich Internet Application.

Nota Editorial: Esta técnica será aplicável quando as especificações Accessible Rich Internet Application atingirem o estado da recomendação W3C.

Esta técnica está relacionada com:

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

A partir de Janeiro de 2007, a versão actual da especificação ARIA (Accessible Rich Internet Application) começou a ser suportada no Firefox 1.5 ou posterior no Windows utilizando o Window-Eyes versão 5.5 ou posterior e a ser parcialmente suportada utilizando o JAWS 8.0 ou posterior. O suporte noutros agentes de utilizador e tecnologias de apoio está em curso. Uma vez que ARIA ainda não é suportada em todas as tecnologias, é importante utilizar também outras técnicas de tipo suficiente para assinalar um campo como obrigatório. Esta técnica específica depende das actualizações efectuadas ao Firefox 2.0 para permitir a utilização do atributo obrigatório por si só, sem ter de definir igualmente uma função para o elemento.

Descrição

A finalidade desta técnica é demonstrar como utilizar Accessible Rich Internet Applications para identificar componentes de formulário de forma programática para os quais é necessário selecção ou entrada de dados por parte do utilizador. As técnicas Accessible Rich Internet Applications fornecem a capacidade de adicionar informações sobre elementos que podem ser determinados de forma programática. O agente de utilizador pode fornecer estas informações adicionais à tecnologia de apoio para apresentação ao utilizador.

Exemplos

Exemplo 1

Este exemplo utiliza scripting para adicionar o estado obrigatório a um elemento de formulário. Nos agentes de utilizador que suportam os espaços de nomes, o estado obrigatório é atribuído utilizando a interface de programação de aplicações (API) setAttributeNS() . Para os restantes agentes de utilizador o estado obrigatório é atribuído utilizando a API setAttribute() e o espaço de nome é simulado adicionando uma cadeia de texto estático à frente do atributo obrigatório.

No exemplo abaixo, é criada uma variável de matriz, requiredIds, com os ids dos elementos que necessitam de ser assinalados como obrigatórios. A função setRequired() é invocada a partir do evento onload do objecto da janela.

A função setRequired() percorre todos os ids fornecidos, obtém o elemento e atribui o estado obrigatório de verdadeiro utilizando a função setAttrNS() .

A função setAttrNS() irá invocar a API setAttributeNS() quando estiver disponível para definir o atributo obrigatório. Utilize o URI de espaço de nome apropriado, "http://www.w3.org/2005/07/aaa", para o Módulo de Estados e Propriedades para Accessible Rich Internet Applications. Se a API setAttributeNS() não estiver disponível no agente de utilizador, é adicionado um espaço de nome estático e simulado de "aaa:" ao nome de atributo obrigatório e é definido utilizando a API setAttribute().

Quando esta página for acedida utilizando o Firefox 2.0 ou posterior ou o Window-Eyes 5.5 ou posterior, o Window-Eyes irá ler "obrigatório" quando estiver a ler a etiqueta para os campos de entrada de dados.

Código Exemplo:

<head>
 <script type="text/javascript">
 //<![CDATA[
 
 // array or ids on the required fields on this page
 var requiredIds = new Array( "firstName", "lastName");
 
 // function that is run after the page has loaded to set the required role on each of the 
 //elements in requiredIds array of id values
 function setRequired(){
        if (requiredIds){
                var field;
                for (var i = 0; i< requiredIds.length; i++){
                        field = document.getElementById(requiredIds[i]);
                        setAttrNS(field, "required", "true");
                }
        }
 }
 
 // method to set the attribute values based on the capability of the browser.  
 // Use setAttributeNS if it is available,
 // otherwise append a namespace indicator string to the attribute and set its value.
 function setAttrNS(elemObj, theAttr, theValue){
        if (typeof document.documentElement.setAttributeNS != 'undefined') {
                elemObj.setAttributeNS("http://www.w3.org/2005/07/aaa", theAttr, theValue);
        }else{
                elemObj.setAttribute("aaa:" + theAttr, theValue);
        }
 }
 window.onload=setRequired;
//>>
 </script>
 </head>
 <body>
 <p>Please enter the following data.  Required fields have been programmatically identified 
 as required and  marked with an asterisk (*) following the field label.</p>
 <form action="submit.php">
 <p>
 <label for="firstName">First Name *: </label><input type="text" name="firstName" 
    id="firstName" value="" />
 <label for="lastName">Last Name *: </label><input type="text" name="lastName" 
    id="lastName"  value="" />
 </p>
 </form>
 </body>

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

  1. Carregue a página utilizando um agente de utilizador e/ou tecnologia de apoio que suportem Accessible Rich Internet Applications.

  2. Navegue até cada elemento de formulário obrigatório e verifique se é lido "obrigatório".

Resultados Esperados