Principio 3/3.2 Predecible/3.2.2-A
De WCAG Wiki
3.2.2-A. Al recibir entradas
- Nivel: A
- Versión: 2.0
- Principio: 3_Comprensible
- Pauta: 3.2_Predecible
- Grupo: Comportamiento
- Subgrupo: Cambios_de_contexto
Discapacidades afectadas
Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.
Enunciado del criterio (Observatorio de Accesibilidad Web)
- No se debe provocar ningún cambio de contexto cuando se cambia el estado, configuración o valor de cualquier elemento de interacción, a menos que se haya avisado previamente a los usuarios.
{{{wcag_lista_discapacidades}}}
Comprensión del criterio
Descripción resumida
Modificar un campo o activar un control no debe desencadenar automáticamente cambios importantes —como enviar formularios, redirigir o abrir paneles— sin aviso previo.
Objetivo
Garantizar interacciones predecibles, evitando que usuarios pierdan el contexto o interrumpan tareas al introducir información o cambiar un control.
Importancia de cumplir el criterio
Evita desorientación, pérdida de progreso y errores de navegación, especialmente en usuarios de teclado, lectores de pantalla o con dificultades cognitivas.
Referencias WCAG
Recursos de apoyo
- Evitar auto-submit sin confirmación
- Diseño de formularios accesibles y predecibles
Evaluación del criterio
Tipo de evaluación
Evaluación Manual
Procedimiento de evaluación
- Paso 1. Modificar valores en controles (select, radio, checkbox, sliders, inputs).
- Paso 2. Confirmar que no ocurre envío automático, redirección o apertura inesperada.
- Paso 3. Revisar código en busca de
onchange,oninput, auto-submit o navegación automática. - Paso 4. Si existe acción automática, comprobar aviso claro previo.
Resultado esperado
Los cambios en controles no provocan cambios inesperados; si los hay, existe aviso previo.
Ejemplo
✅ Interacción predecible sin auto-cambio
<label for="country">País</label> <select id="country" name="country"> <option>España</option> <option>México</option> <option>Argentina</option> </select> <button type="submit">Continuar</button>
✅ Auto-acción avisada previamente
<p>Al seleccionar un idioma, la página se actualizará automáticamente.</p> <label for="lang">Idioma</label> <select id="lang" name="lang" onchange="location=this.value;"> <option value="/es">Español</option> <option value="/en">Inglés</option> </select>
Otras herramientas de evaluación
- Pruebas manuales en formularios
- Inspección de eventos en DevTools
- Lectores de pantalla: NVDA, JAWS, VoiceOver
Ejemplos accesibles y no accesibles creados por alumnos
Comentarios
A continuación se muestran comentarios sobre el criterio 3.2.2-A. Al recibir entradas
Loading comments...
