Técnica Scripts de cliente WCAG 2.2
SCR19Actualizar una lista desplegable según lo elegido en otra sin cambiar de página
Nombre oficial en el W3C: Usar un evento onchange en un elemento select sin provocar un cambio de contexto
En pocas palabras
Es habitual que al elegir una opción en un desplegable cambien las opciones de otro, como provincia y municipio. Esta técnica lo hace con JavaScript sin cambiar de página ni mover el foco. El desplegable que cambia va siempre después del que provoca el cambio.
Por qué es importante
Quien usa el teclado recorre las opciones de un desplegable con las flechas. En algunos navegadores, cada flecha ya cuenta como un cambio.
Si ese cambio enviara el formulario o abriera otra página, la persona saldría sin querer. Si actualiza un desplegable que ya ha pasado, no se enteraría del cambio.
Cómo se hace
- Use el evento
changedel primer desplegable solo para rellenar el segundo. No envíe el formulario ni cambie de página. - Coloque el desplegable que se actualiza después del primero, en el código y en pantalla.
- Tenga en la página los datos necesarios o cárguelos de forma rápida y sin mover el foco.
- Deje el foco donde está. La persona encontrará las nuevas opciones al avanzar con el tabulador.
- Si hace falta, añada un texto que explique que el segundo campo depende del primero.
Cómo comprobarlo
- Con el teclado, elija una opción en el primer desplegable.
- Avance con el tabulador al segundo y compruebe que muestra las opciones correctas.
- Vuelva al primero y recorra sus opciones con las flechas. No debe cambiar de página ni moverse el foco.
- Pruébelo también con un lector de pantalla.
Ejemplo
Al elegir provincia, se rellena la lista de municipios, que va justo después.
<label for="provincia">Provincia</label>
<select id="provincia">
<option value="murcia">Murcia</option>
<option value="alicante">Alicante</option>
</select>
<label for="municipio">Municipio</label>
<select id="municipio"></select>
<script>
provincia.addEventListener("change", () => rellenarMunicipios(provincia.value));
</script>Ver el texto completo del W3C (traducción al español)
Esta es una traducción no oficial al español de la técnica SCR19 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.
Aplicabilidad
HTML con compatibilidad con scripts.
Descripción
El objetivo de esta técnica es demostrar cómo usar correctamente un evento onchange con un elemento select para actualizar otros elementos de la página web. Esta técnica no provoca un cambio de contexto. Cuando hay uno o más elementos select en la página web, un evento onchange en uno de ellos puede actualizar las opciones de otro elemento select de la página web. Todos los datos que necesitan los elementos select están incluidos dentro de la página web.
Es importante señalar que el elemento select que se modifica está situado después del elemento select desencadenante en el orden de lectura de la página web. Esto garantiza que las tecnologías de asistencia detecten el cambio y que los usuarios encuentren los nuevos datos cuando el elemento modificado reciba el foco. Esta técnica depende de la compatibilidad con JavaScript del agente de usuario.
Ejemplos
Este ejemplo contiene dos elementos select. Cuando se selecciona un elemento en el primer select, las opciones del otro select se actualizan en consecuencia. El primer elemento select contiene una lista de continentes. El segundo elemento select contendrá una lista parcial de países situados en el continente seleccionado. Hay un evento onchange asociado al select de continentes. Cuando cambia la selección de continente, los elementos del select de países se modifican mediante JavaScript a través del Document Object Model (DOM). Todos los datos necesarios, la lista de países y de continentes, están incluidos dentro de la página web.
Resumen del código que figura a continuación
- Variable de tipo array
countryLists, que contiene la lista de países de cada continente del elemento select desencadenante. - Función
countryChange(), a la que llama el evento onchange del elemento select de continentes. - El código HTML para crear los elementos select en el cuerpo de la página web.
<!doctype html>
<html lang="en">
<head>
<meta charset=utf-8">
<title>Dynamic Select Statements</title>
<script>
// 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>
<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>
<div>
<label for="country">Select a country</label>
<select id="country">
<option value="0">Select a country</option>
</select>
</div>
</body>
</html>Aquí hay un ejemplo práctico: Dynamic Select (select dinámico)
Pruebas
Procedimiento
- Navegar hasta el elemento select desencadenante (en este ejemplo, el de selección de continentes) y cambiar el valor del select.
- Navegar hasta el elemento select que actualiza el desencadenante (en este ejemplo, el de selección de países).
- Comprobar que en el otro elemento select se muestran los valores de opción correspondientes.
- Navegar hasta el elemento select desencadenante y recorrer las opciones sin cambiar el valor.
- Comprobar que en el elemento asociado siguen mostrándose los valores de opción correspondientes.
Se recomienda probar los elementos select con una tecnología de asistencia para verificar que se reconocen los cambios en el elemento asociado.
Resultados esperados
- Las comprobaciones n.º 3 y n.º 5 son verdaderas.
Recursos
- Accessible Forms using WCAG 2.0 (formularios accesibles con las WCAG 2.0)
- Definición de cambio de contexto
Cómo lo comprobamos en ADDAW
En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.
Basado en la técnica SCR19 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.