Diferencia entre revisiones de «Principio 3/3.2 Predecible/3.2.2-A»

De WCAG Wiki
Sin resumen de edición
Sin resumen de edición
 
Línea 14: Línea 14:


|wcag_texto_criterioOAW=
|wcag_texto_criterioOAW=
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.
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_descripcion_resumida=
|wcag_descripcion_resumida=
Línea 27: Línea 27:
|wcag_referencias=
|wcag_referencias=
<ul>
<ul>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Understanding/on-input.html Understanding Success Criterion 3.2.2: On Input]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G80 G80: Providing a submit button to initiate a change of context]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/quickref/#on-input WCAG Quick Reference – 3.2.2]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H32 H32: Providing submit buttons]</span></li>
<li>[https://webaim.org/techniques/forms/ WebAIM — Predictable Forms]</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/html/H84 H84: Using a button with a select element to perform an action]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G13 G13: Describing what will happen before a change to a form control that causes a change of context to occur is made]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/failures/F36 F36: Failure due to automatically submitting a form and giving a value]</span></li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/failures/F37 F37: Failure due to launching a new window without prior warning when the selection of a radio button, check box, or select list is changed]</span></li>
</ul>
</ul>


|wcag_recursos=
 
<ul>
|wcag_recursos= No se presentan
<li>Evitar auto-submit sin confirmación</li>
<li>Diseño de formularios accesibles y predecibles</li>
</ul>


|wcag_tipo_evaluacion=Manual
|wcag_tipo_evaluacion=Manual
Línea 42: Línea 42:
|wcag_pasos_evaluacion=
|wcag_pasos_evaluacion=
<ol class="paso-list">
<ol class="paso-list">
<li><span class="paso-badge">Paso 1.</span> Modificar valores en controles (select, radio, checkbox, sliders, inputs).</li>
<li><span class="paso-badge">Paso 1.</span>
<li><span class="paso-badge">Paso 2.</span> Confirmar que no ocurre envío automático, redirección o apertura inesperada.</li>
Localizar los elementos de interacción de la página (p. ej., casilla de verificación, <code>&lt;select&gt;</code>, campo de texto…).
<li><span class="paso-badge">Paso 3.</span> Revisar código en busca de <code>onchange</code>, <code>oninput</code>, auto-submit o navegación automática.</li>
</li>
<li><span class="paso-badge">Paso 4.</span> Si existe acción automática, comprobar aviso claro previo.</li>
 
<li><span class="paso-badge">Paso 2.</span>
Cambiar el valor de dicho elemento.
</li>
 
<li><span class="paso-badge">Paso 3.</span>
Verificar que no se produce ningún cambio de contexto, a menos que se avise previamente a los usuarios.
</li>
</ol>
</ol>


Línea 53: Línea 60:
|wcag_ejemplo_evaluacion=
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
<div class="accessibility-card">
<strong>✅ Interacción predecible sin auto-cambio</strong>
Interacción predecible sin auto-cambio
<pre class="wcag-codigo-html">
<pre class="wcag-codigo-html">
<label for="country">País</label>
<label for="country">País</label>
Línea 65: Línea 72:
</div>
</div>


<div class="accessibility-card">
 
<strong>✅ Auto-acción avisada previamente</strong>
<pre class="wcag-codigo-html">
<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>
</pre>
</div>


|wcag_otras_herramientas_evaluacion=
|wcag_otras_herramientas_evaluacion=
<ul>
<ul>
<li>Pruebas manuales en formularios</li>
<li>'''Prueba con teclado y ratón''': interactuar con controles (selectores, checkboxes, radio buttons, sliders, campos de formulario) y comprobar que al cambiar su valor no se produce navegación, envío de formulario, apertura de ventanas, recarga o movimiento de foco sin aviso previo.</li>
<li>Inspección de eventos en DevTools</li>
<li>'''Inspección del código''': revisar eventos como <code>onchange</code>, <code>input</code>, <code>click</code> o <code>keyup</code> y confirmar que no desencadenan cambios de contexto automáticos sin confirmación explícita del usuario.</li>
<li>Lectores de pantalla: NVDA, JAWS, VoiceOver</li>
<li>'''Lectores de pantalla''': (NVDA, JAWS, VoiceOver) modificar valores y verificar que la interacción no provoca saltos inesperados, recargas automáticas ni pérdida de foco.</li>
<li>'''Validadores y herramientas de inspección''': usar DevTools y herramientas de análisis de accesibilidad para detectar scripts que reaccionan a cambios de valor sin proporcionar mecanismos de confirmación o aviso visible/sonoro previo.</li>
</ul>
</ul>
}}
}}

Revisión actual - 06:18 6 nov 2025

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

No se presentan

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

  1. Paso 1. Localizar los elementos de interacción de la página (p. ej., casilla de verificación, <select>, campo de texto…).
  2. Paso 2. Cambiar el valor de dicho elemento.
  3. Paso 3. Verificar que no se produce ningún cambio de contexto, a menos que se avise previamente a los usuarios.

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>

Otras herramientas de evaluación

  • Prueba con teclado y ratón: interactuar con controles (selectores, checkboxes, radio buttons, sliders, campos de formulario) y comprobar que al cambiar su valor no se produce navegación, envío de formulario, apertura de ventanas, recarga o movimiento de foco sin aviso previo.
  • Inspección del código: revisar eventos como onchange, input, click o keyup y confirmar que no desencadenan cambios de contexto automáticos sin confirmación explícita del usuario.
  • Lectores de pantalla: (NVDA, JAWS, VoiceOver) modificar valores y verificar que la interacción no provoca saltos inesperados, recargas automáticas ni pérdida de foco.
  • Validadores y herramientas de inspección: usar DevTools y herramientas de análisis de accesibilidad para detectar scripts que reaccionan a cambios de valor sin proporcionar mecanismos de confirmación o aviso visible/sonoro previo.










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...