Técnicas para as WCAG 2.0

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

-

ARIA1: Utilizar a propriedade describedby da Accessible Rich Internet Application para fornecer uma etiqueta descritiva e determinada de forma programática

Aplicabilidade

HTML e XHTML com scripting e Accessible Rich Internet Applications.

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 Outubro de 2006, as técnicas Accessible Rich Internet Application começaram a ser suportadas no Firefox 1.5 ou posterior no Windows e no Window-Eyes versão 5.5 ou posterior. O suporte noutros agentes de utilizador e tecnologias de apoio está em curso. Esta técnica específica depende das actualizações efectuadas ao Firefox 2.0 para permitir a utilização do atributo describedby por si só sem ter de definir igualmente uma função para o elemento.

Descrição

A finalidade desta técnica é demonstrar como utilizar a propriedade descibedby de Accessible Rich Internet Application (ARIA) para fornecer informações descritivas sobre um controlo da interface de utilizador que possa ser determinado de forma programática pelos agentes de utilizador. As técnicas ARIA fornecem a capacidade de adicionar informações determinadas de forma programática a um elemento que possa fornecer informações adicionais sobre o elemento. O agente de utilizador pode fornecer informações adicionais à tecnologia de apoio para apresentação ao utilizador. Por exemplo, a propriedade describedby pode ser utilizada para fornecer informações que estão disponíveis no conteúdo circundante do controlo da interface de utilizador, que normalmente não estão disponíveis quando o utilizador navega de controlo para controlo utilizando uma tecnologia de apoio.

Exemplos

Exemplo 1: HTML

Este exemplo utiliza scripting para adicionar a propriedade describedby aos controlos da interface de utilizador existentes na página. A utilização de scripting é necessária, uma vez que o atributo "describedby" não se encontra na especificação HTML e adicioná-lo directamente à marcação iria impedir que a marcação efectuasse a validação. Nos agentes de utilizador que suportam espaços de nomes, o estado obrigatório é atribuído utilizando a interface de programação de aplicações (API) setAttributeNS() . Para outros 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 describedby .

No exemplo abaixo, são criadas duas variáveis de matriz, buttonIds e linkIds. Cada matriz tem os ids dos elementos que contêm o texto da descrição. Cada matriz é classificada através do id dos elementos que necessitam de uma propriedade describedby . A função setDescribedBy() é invocada a partir do evento onload do objecto da janela.

A função setDescribedBy() encontra todos os elementos do botão existentes na página. Percorre todos os elementos do botão encontrados e, utilizando o id do botão como índice, procura um valor id associado na matriz buttonIds . Este id é o atributo id do elemento que contém o texto da descrição associado ao botão. Se for encontrado um id associado, o script atribui a propriedade describedby ao botão utilizando a função setAttrNS() .

A função setDescribedBy() também encontra todos os elementos anchor existentes na página e executa um processo semelhante. Procura ids associados na matriz linksId e atribui a propriedade describedby a cada link utilizando a função setAttrNS() .

A função setAttrNS() irá invocar a API setAttributeNS() quando estiver disponível para definir o atributo obrigatório. Utiliza o URI de espaço de nome apropriado, "http://www.w3.org/2005/07/aaa", para Módulo de Estados e Propriedades para Accessible Rich Internet Applications (Propriedades e Estados ARIA) (página em inglês). 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() .

Utilizando um agente de utilizador e/ou tecnologia de apoio que suportem ARIA, a descrição adicional será fornecida quando os controlos da interface de utilizador receberem foco.

Código Exemplo:

               <head>
 <meta http-equiv="content-type" content="text/xhtml; charset=utf-8" />
 <title>Demonstration of describedby property</title>
 <style type="text/css">
 div.form p { clear:left; margin: 0.3em 0;}
 .left {
  float:left;
  width:400px;
}
 .right {
        width:100px;
        text-align:right;
}
 </style>
 <script type="text/javascript">
 //<![CDATA[

 // array entries for each button on the page that associates the button id 
 // with the id of the element containing the text which describes the button
 var buttonIds = new Array();
 buttonIds["fontB"]= "fontDesc";
 buttonIds["colorB"] = "colorDesc";
 buttonIds["customB"] = "customDesc";
 // array entries for each link on the page that associates the link id with
 // the id of the element containing the text which describes the link
 var linkIds = new Array();
 linkIds["iceberg"] = "icebergInfo";

 // function that is run after the page has loaded to set the describedBy
 // property on each of the elements referenced by the array of id values
 function setDescribedBy(){
        if (buttonIds){
                var buttons = document.getElementsByTagName("button");
                if (buttons){
                        var buttonId;
                        for(var i=0; i<buttons.length; i++){
                                buttonId = buttons[i].id;
                                if (buttonId && buttonIds[buttonId]){
                                        setAttrNS(buttons[i], "describedby", buttonIds[buttonId]);
                                }
                        }
                }
        }
        if (linkIds){
                var links = document.getElementsByTagName("a");
                if (links){
                        var linkId;
                        for(var k=0; k<links.length; k++){
                                linkId = links[k].id;
                                if (linkId && linkIds[linkId]){
                                        setAttrNS(links[k], "describedby", linkIds[linkId]);
                                }
                        }
                }
        }
 }

 // 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){
         elemObj.setAttribute("aria-" + theAttr, theValue);
 }

 // simulated action function - currently just displays an alert
 function doAction(theAction){
        alert("Perform the " + theAction + " action");
 }

 window.onload=setDescribedBy;

//>>
 </script>
 </head>
 <body>
 <p>The buttons on this page use the Accessible Rich Internet Applications 
 describedby property to provide more detailed information 
 about the button action
 </p>
 <div class="form">
 <p><span class="left" id="fontDesc" >Select the font faces and sizes to be used on this page</span>
    <span class="right"><button id="fontB" onclick="doAction('Fonts');"> Fonts </button></span>
 </p>
 <p><span class="left" id="colorDesc" >Select the colors to be used on this page</span>
    <span class="right"><button id="colorB" onclick="doAction('Colors');"> Colors </button></span>
 </p>
 <p><span class="left" id="customDesc" >Customize the layout and styles used on this page</span>
    <span class="right"><button id="customB" onclick="doAction('Customize');"> Customize </button></span>
 </p>
 </div>
 <p>The link in this paragraph has been updated with the Accessible Rich 
 Internet Applications describedby property to provide more information
 about the link</p>
 <p> <span id="icebergInfo">Alaskan storm cracks iceberg in Antarctica. </span> 
 A bad storm in Alaska last October generated an ocean swell that broke apart 
 a giant iceberg near Antarctica six days later, U.S. researchers reported on Monday. 
 <a href="http://www.sciencemag.com/iceberg.html" id="iceberg">More Info...</a>.
 </p>
 </body> 

Exemplo HTML prático da utilização da propriedade describedy

Exemplo 2: XHTML

Este é o mesmo exemplo codificado em XHTML com um tipo MIME de aplicação:xhtml+xml. Este tipo MIME não é suportado em todos os agentes de utilizador. Declara um espaço de nome xml para aceder à propriedade describedby . As informações describedby são adicionadas directamente na marcação XHTML e não é necessário nenhum scripting adicional.

Código Exemplo:

<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
 xmlns:waistate="http://www.w3.org/2005/07/aaa" >
 <head>
 <meta http-equiv="content-type" content="application:xhtml+xml; charset=utf-8" />
 <title>Demonstration of describedby property</title>
 <style type="text/css">
 div.form p { clear:left; margin: 0.3em 0;}
 .left {
   float:left;
   width:400px;
 }
 .right {
   width:100px;
   text-align:right;
 }
 </style>
 </head>
 <body>
 <p>The buttons on this page use the Accessible Rich Internet Applications describedby property 
 to provide more detailed information about the button action</p>
 <div class="form">
 <p><span class="left" id="fontDesc" >Select the font faces and sizes to be used on this page</span>
 <span class="right"><button id="fontB" onclick="doAction('Fonts');" waistate:describedby="fontDesc">
 Fonts </button></span></p>
 <p><span class="left" id="colorDesc" >Select the colors to be used on this page</span>
 <span class="right"><button id="colorB" onclick="doAction('Colors');" waistate:describedby="colorDesc">
 Colors </button></span></p>
 <p><span class="left" id="customDesc" >Customize the layout and styles used on this page</span>
 <span class="right"><button id="customB" onclick="doAction('Customize');" 
 waistate:describedby="customDesc"> Customize </button></span></p>
 </div>
 <p>The link in the next paragraph has been updated with the Accessible Rich Internet Applications 
 describedby property to provide more information about the link</p>
 <p> <span id="icebergInfo">Alaskan storm cracks iceberg in Antarctica. </span> 
 A bad storm in Alaska last October generated an ocean swell that broke apart a giant 
 iceberg near Antarctica six days later, U.S. researchers reported on Monday. 
 <a href="http://www.sciencemag.com/iceberg.html" id="iceberg" waistate:describedby="icebergInfo">More Info...</a>.
 </p>
 </body>
 </html> 

Recursos

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

Testes

Procedimento

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

  2. Utilizando um agente de utilizador que suporte ARIA, navegue até cada controlo da interface de utilizador modificado com uma propriedade describedby e verifique se a descrição é disponibilizada ao utilizador.

Resultados Esperados