Técnicas para as WCAG 2.0

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

-

SCR19: Utilizar um evento onchange num elemento select sem provocar uma alteração de contexto

Aplicabilidade

HTML e XHTML com suporte para scripting. Esta técnica utiliza a estrutura try/catch do JavaScript 1.4.

Esta técnica está relacionada com:

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

Esta técnica foi testada no Windows XP utilizando JAWS 7.0 e WindowEyes 5.5, tanto com Firefox 1.5 como IE 6. Note que o JavaScript tem de estar activado no browser.

Descrição

O objectivo desta técnica é demonstrar como utilizar correctamente um evento onchange com um elemento select para actualizar outros elementos na página Web. Esta técnica não provoca uma alteração de contexto. Quando existe um ou mais elementos select na página Web, um evento onchange numa das páginas pode actualizar as opções noutro elemento select na página Web. Todos os dados requeridos pelos elementos select são incluídos na página Web.

É importante salientar que o item de selecção que é modificado surge após o elemento select accionador na ordem de leitura da página Web. Isto garante que as tecnologias de apoio reconhecem a alteração e os utilizadores encontram os novos dados quando o elemento modificado recebe o foco. Esta técnica depende do suporte JavaScript no agente de utilizador.

Exemplos

Exemplo 1

Este exemplo contém dois elementos select. Quando um item é seleccionado no primeiro elemento select, as escolhas no outro elemento select são actualizadas apropriadamente. O primeiro elemento select contém uma lista de continentes. O segundo elemento select contém uma lista parcial de países localizados no continente seleccionado. Existe um evento onchange associado ao elemento select do continente. Quando a selecção de continente é alterada, os itens no elemento select do país são modificados utilizando JavaScript através do Modelo de Objecto de Documento (DOM). Todos os dados necessários, a lista de países e de continentes, são incluídos na página Web.

Desrição geral do código:

Código Exemplo:

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
  <head> 
    <meta http-equiv="content-type" content="text/xhtml; charset=utf-8" /> 
    <title>Dynamic Select Statements</title> 
<script type="text/javascript">
 //<![CDATA[ 
 // array of possible countries in the same order as they appear in the country selection list 
 var countryLists = new Array(4) 
 countryLists["empty"] = ["Select a Country"]; 
 countryLists["North America"] = ["Canada", "United States", "Mexico"]; 
 countryLists["South America"] = ["Brazil", "Argentina", "Chile", "Ecuador"]; 
 countryLists["Asia"] = ["Russia", "China", "Japan"]; 
 countryLists["Europe"]= ["Britain", "France", "Spain", "Germany"]; 
 /* CountryChange() is called from the onchange event of a select element. 
 * param selectObj - the select object which fired the on change event. 
 */ 
 function countryChange(selectObj) { 
 // get the index of the selected option 
 var idx = selectObj.selectedIndex; 
 // get the value of the selected option 
 var which = selectObj.options[idx].value; 
 // use the selected option value to retrieve the list of items from the countryLists array 
 cList = countryLists[which]; 
 // get the country select element via its known id 
 var cSelect = document.getElementById("country"); 
 // remove the current options from the country select 
 var len=cSelect.options.length; 
 while (cSelect.options.length > 0) { 
 cSelect.remove(0); 
 } 
 var newOption; 
 // create new options 
 for (var i=0; i<cList.length; i++) { 
 newOption = document.createElement("option"); 
 newOption.value = cList[i];  // assumes option string and value are the same 
 newOption.text=cList[i]; 
 // add the new option 
 try { 
 cSelect.add(newOption);  // this will fail in DOM browsers but is needed for IE 
 } 
 catch (e) { 
 cSelect.appendChild(newOption); 
 } 
 } 
 } 
//>>
</script>
</head>
<body>
  <noscript>This page requires JavaScript be available and enabled to function properly</noscript>
  <h1>Dynamic Select Statements</h1>
  <label for="continent">Select Continent</label>
  <select id="continent" onchange="countryChange(this);">
    <option value="empty">Select a Continent</option>
    <option value="North America">North America</option>
    <option value="South America">South America</option>
    <option value="Asia">Asia</option>
    <option value="Europe">Europe</option>
  </select>
  <br/>
  <label for="country">Select a country</label>
  <select id="country">
    <option value="0">Select a country</option>
  </select>
</body>
 </html>

Este é um exemplo prático: Selecção Dinâmica

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. Navegue até ao elemento trigger accionador (neste exemplo, é o utilizado para seleccionar os continentes) e altere o valor do elemento select.

  2. Navegue até ao elemento select que é actualizado pelo accionador (neste exemplo, é o utilizado para seleccionar os países).

  3. Verifique se os valores de opção equivalentes são apresentados no outro elemento select.

  4. Navegue até ao o elemento select accionador, navegue nas opções, mas não altere o valor.

  5. Verifique se os valores de opção equivalentes ainda são apresentados no elemento associado.

Recomendamos que os elementos select sejam testados com uma tecnologia de apoio para verificar se as alterações ao elemento associado são reconhecidas.

Resultados Esperados