Principio 3/3.2 Predecible/3.2.2-A

De WCAG Wiki

3.2.2-A. Al recibir entradas

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

  1. Paso 1. Modificar valores en controles (select, radio, checkbox, sliders, inputs).
  2. Paso 2. Confirmar que no ocurre envío automático, redirección o apertura inesperada.
  3. Paso 3. Revisar código en busca de onchange, oninput, auto-submit o navegación automática.
  4. 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...