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:
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.
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.
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>
Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.
(actualmente, não existe nenhuma indicada)
Carregue a página utilizando um agente de utilizador e/ou tecnologia de apoio que suportem Accessible Rich Internet Applications.
Navegue até cada elemento de formulário obrigatório e verifique se é lido "obrigatório".
O passo 2 é verdadeiro.