Los cambios inesperados en una página web pueden ser confusos o desorientadores para muchos usuarios, especialmente aquellos que dependen de tecnologías de asistencia o tienen discapacidades cognitivas. Un problema común ocurre cuando interactuar con un control de formulario provoca un cambio de contexto sin previo aviso, como redireccionamientos automáticos o la recarga de una página.
La Técnica G13 de WCAG 2.1 busca evitar estas situaciones al informar al usuario antes de que ocurra un cambio de contexto, asegurando una experiencia predecible e inclusiva. Esta técnica ayuda a cumplir con el criterio de éxito 3.2.2 (Al recibir entrada) y el criterio 3.3.2 (Etiquetas o instrucciones).
Acerca de esta técnica
El objetivo de esta técnica es proporcionar a los usuarios información anticipada sobre lo que sucederá cuando interactúen con un control de formulario que provoque un cambio de contexto. Esto es especialmente relevante cuando:
- Seleccionar una opción en un formulario cambia automáticamente la página o el contenido mostrado.
- Un formulario navega automáticamente a una nueva sección o página tras elegir una opción.
- Se activa una recarga o actualización sin intervención del usuario.
Casos donde esta técnica es fundamental
- Selección de idioma: Al elegir un idioma en un formulario de selección, la página se recarga automáticamente.
- Encuestas en línea: Un cuestionario donde seleccionar una respuesta lleva automáticamente a la siguiente pregunta.
- Sistemas de filtrado de productos: Cambiar un filtro en un menú de selección actualiza los resultados sin previo aviso.
Ejemplos
Ejemplo incorrecto 1: Cambio de idioma sin advertencia
<label for="idioma">Selecciona tu idioma:</label>
<select id="idioma" onchange="cambiarIdioma(this.value)">
<option value="es">Español</option>
<option value="en">Inglés</option>
<option value="fr">Francés</option>
</select>
<script>
function cambiarIdioma(idioma) {
window.location.href = 'index_' + idioma + '.html';
}
</script>🔴 Problema:
- El usuario no es informado de que la página cambiará automáticamente al seleccionar un idioma.
- Puede ser confuso para usuarios con discapacidad visual o cognitiva.
Solución correcta: Informar al usuario antes del cambio
<p>Seleccionar un idioma actualizará la página automáticamente.</p>
<label for="idioma">Selecciona tu idioma:</label>
<select id="idioma" onchange="cambiarIdioma(this.value)">
<option value="es">Español</option>
<option value="en">Inglés</option>
<option value="fr">Francés</option>
</select>
<script>
function cambiarIdioma(idioma) {
alert("La página se actualizará para mostrar el contenido en " + idioma);
window.location.href = 'index_' + idioma + '.html';
}
</script>✅ ¿Qué mejora?:
- Se proporciona un mensaje previo que informa al usuario del comportamiento del formulario.
- Se reduce la sorpresa y se da tiempo para procesar la acción.
Ejemplo incorrecto 2: Encuesta en línea sin indicaciones
<p>Pregunta 1: ¿Te gusta viajar?</p>
<input type="radio" name="viajar" value="si"> Sí
<input type="radio" name="viajar" value="no"> No
<script>
document.querySelectorAll('input[name="viajar"]').forEach((el) => {
el.addEventListener('change', function () {
window.location.href = 'pregunta2.html';
});
});
</script>🔴 Problema:
- El usuario no sabe que al seleccionar una opción será llevado a la siguiente pregunta.
- Las personas con lectores de pantalla podrían perder el contexto.
Solución correcta: Proporcionar una advertencia clara
<p>Selecciona una opción para avanzar a la siguiente pregunta.</p>
<p>Pregunta 1: ¿Te gusta viajar?</p>
<input type="radio" name="viajar" value="si"> Sí
<input type="radio" name="viajar" value="no"> No
<script>
document.querySelectorAll('input[name="viajar"]').forEach((el) => {
el.addEventListener('change', function () {
alert("Serás dirigido a la siguiente pregunta.");
window.location.href = 'pregunta2.html';
});
});
</script>
✅ ¿Qué mejora?:
- Se añade un mensaje informativo antes de realizar la acción.
- Evita cambios inesperados de contexto.
Errores comunes y cómo evitarlos
Errores frecuentes:
- No informar al usuario sobre cambios de contexto automáticos.
- No proporcionar una advertencia visual o auditiva antes de la acción.
- No utilizar instrucciones programáticamente asociadas a los controles del formulario.
Cómo evitar estos errores:
- Agregar instrucciones antes del control de formulario.
- Probar la accesibilidad con lectores de pantalla y navegación por teclado.
- Utilizar etiquetas
aria-liveo alertas para notificar cambios.
Preguntas frecuentes sobre la técnica general G13
¿Es obligatorio advertir sobre todos los cambios en formularios?
Solo si provocan un cambio de contexto automático, como una recarga de página o navegación.
¿Cómo afecta esto a los usuarios con discapacidades?
Evita confusión y mejora la experiencia de personas con discapacidades cognitivas o que usan lectores de pantalla.
¿Qué pasa si quiero que el usuario inicie manualmente el cambio de contexto?
Puedes usar la Técnica G80, que recomienda agregar un botón de envío en lugar de cambiar automáticamente.
Recursos relacionados
- Guía oficial WCAG 2.1 para la Técnica General G13: Describir lo que sucederá antes de que se realice un cambio en un control de formulario que provoque un cambio de contexto.
- Comprender el criterio de éxito 3.2.2: En la entrada
- Comprender el criterio de éxito 3.3.2: Etiquetas o instrucciones
- G80: Proporcionar un botón de envío para iniciar un cambio de contexto
Pruebas y validación de la técnica
Procedimiento
- Identificar controles de formulario que cambian el contexto automáticamente.
- Verificar que haya una explicación antes del control.
Resultados esperados
- ✅ Si el usuario es informado antes del cambio, la implementación es correcta.
- ❌ Si no hay advertencias previas, la técnica no está correctamente aplicada.
Aplicar la Técnica G13 mejora la accesibilidad y evita experiencias confusas para los usuarios. Implementar descripciones claras antes de cambios de contexto es una práctica clave en el desarrollo web accesible.
📢 ¡Si necesitas ayuda con la accesibilidad de tu web, contáctanos!