Técnica Técnicas generales WCAG 2.2
G13Avisar antes de que un campo de formulario cambie la página
Nombre oficial en el W3C: Describir lo que va a ocurrir antes de realizar un cambio en un control de formulario que provoque un cambio de contexto
En pocas palabras
Lo normal es que elegir una opción o marcar una casilla no haga nada más. Si en una web sí provoca un cambio grande, como cargar otra página o pasar a otra pregunta, hay que avisarlo antes. El aviso va delante del control, para que la persona sepa qué ocurrirá.
Por qué es importante
Un cambio inesperado desorienta. Quien usa un lector de pantalla (programa que lee en voz alta la pantalla) o una lupa puede no notar que está en otra página.
Por ejemplo, alguien recorre con las flechas un desplegable de idiomas. Si la página cambia con la primera opción, nunca llega a la que buscaba.
Cómo se hace
- Lo mejor es evitar estos cambios automáticos y añadir un botón como «Aplicar» o «Ir».
- Si mantiene el cambio automático, escriba una instrucción clara justo antes del control. Por ejemplo: «Al elegir un idioma, la página se recargará en ese idioma».
- Asocie la instrucción al control para que la lea el lector de pantalla, por ejemplo con
aria-describedby. - En procesos de varios pasos, explíquelo al inicio, antes de llegar al paso con ese comportamiento.
- En aplicaciones internas con formación obligatoria, puede incluirse en esa formación.
Cómo comprobarlo
- Localice los desplegables, casillas y botones de opción de la página.
- Cambie su valor y observe si se carga otra página, se abre una ventana o se mueve el foco.
- Si ocurre, compruebe que antes del control hay un texto que avisa de ese cambio.
- Con un lector de pantalla, compruebe que el aviso se oye antes de usar el control.
Ejemplo
Selector de idioma con un aviso previo, asociado al desplegable, de que la página se recargará.
<p id="aviso-idioma">Al elegir un idioma, la página se recargará en ese idioma.</p>
<label for="idioma">Idioma</label>
<select id="idioma" aria-describedby="aviso-idioma">
<option>Español</option>
<option>Català</option>
<option>English</option>
</select>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 G13 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
Se aplica a todas las tecnologías.
Descripción
El objetivo de esta técnica es informar a los usuarios de lo que ocurrirá cuando un cambio en un control de formulario provoque un cambio de contexto. Dado que cambiar el valor de un control de formulario no suele provocar un cambio de contexto, es importante que los autores proporcionen instrucciones que adviertan al usuario de ese comportamiento con antelación. Cuando sea posible, es recomendable asociar por software las instrucciones que describen el cambio con el propio control de formulario.
A continuación se muestran algunos ejemplos de cómo proporcionar las instrucciones en distintas situaciones.
- Proporcionar las instrucciones en la página web, en una posición del orden de lectura anterior al elemento de interfaz de usuario que provoca el cambio de contexto al cambiar su configuración.
- En un proceso de varios pasos en el que los usuarios deben completar determinados pasos para llegar al elemento de interfaz de usuario cuyo cambio de configuración provocaría un cambio de contexto, proporcionar las instrucciones como parte del proceso, antes del paso en el que se encontrarían con el cambio de contexto.
- En el caso de una intranet en la que se exige formar a los usuarios antes de utilizar una aplicación web con elementos de interfaz de usuario que provocan cambios de contexto al cambiar su configuración, las instrucciones se proporcionan como parte de la formación.
Ejemplos
- Una lista desplegable en la parte superior de una página incluye las opciones alemán, francés y español. Unas instrucciones situadas antes de la lista desplegable indican al usuario que el idioma cambiará al seleccionar una opción.
- Una encuesta en línea de 50 preguntas muestra una pregunta a la vez, con cada respuesta marcada como un botón conmutador. Al principio de la encuesta aparecen unas instrucciones que explican que, al seleccionar la respuesta a cada pregunta, se llevará al usuario a la siguiente pregunta de la encuesta.
Pruebas
Procedimiento
- Localizar el contenido en el que cambiar la configuración de un control de formulario provoca un cambio de contexto.
- Comprobar que hay disponible una explicación de lo que ocurrirá al cambiar el control antes de que este se active.
Resultados esperados
- La comprobación n.º 2 es verdadera.
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 G13 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.