Diferencia entre revisiones de «Principio 2/2.5 Modalidades de los input/2.5.2-A»

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
 
(No se muestra una edición intermedia del mismo usuario)
Línea 7: Línea 7:
|wcag_principio=2_Operable
|wcag_principio=2_Operable
|wcag_principio_url=Principio_2
|wcag_principio_url=Principio_2
|wcag_pauta=2.5_Modalidades_de_entrada
|wcag_pauta=2.5_Modalidades_de_los_input
|wcag_pauta_url=Principio_2/2.5_Modalidades_de_entrada
|wcag_pauta_url=Principio_2/2.5_Modalidades_de_los_input
|wcag_grupo=Interacción
|wcag_grupo=Interacción
|wcag_subgrupo=Gestos_y_movimiento
|wcag_subgrupo=Gestos_y_movimiento
Línea 30: Línea 30:
   <span class="discapacidad-texto">[[:Categoría:Discapacidad cognitiva|Cognitiva]]</span> –
   <span class="discapacidad-texto">[[:Categoría:Discapacidad cognitiva|Cognitiva]]</span> –
   <span class="gravedad gravedad-leve">Barrera leve</span>
   <span class="gravedad gravedad-leve">Barrera leve</span>
</li>
<li class="discapacidad-item">
  [[Archivo:Sinvision.png|20px|class=icon-discapacidad|alt=Discapacidad visual total]]
  <span class="discapacidad-texto">[[:Categoría:Discapacidad visual total|Visual total]]</span> –
  <span class="gravedad gravedad-grave">Barrera grave</span>
</li>
</li>


Línea 36: Línea 42:
[[Categoría:Discapacidad baja visión]]
[[Categoría:Discapacidad baja visión]]
[[Categoría:Discapacidad cognitiva]]
[[Categoría:Discapacidad cognitiva]]
[[Categoría:Discapacidad visual total]]


|wcag_texto_criterioOAW=
|wcag_texto_criterioOAW=
Toda funcionalidad que se pueda operar mediante un puntero sencillo (single pointer) debe cumplir al menos una de las siguientes condiciones:
Toda funcionalidad que se pueda operar mediante un puntero sencillo (single pointer) debe cumplir al menos una de las siguientes condiciones:
<ul>
* El evento <code>down</code> del puntero no se emplea para ejecutar ninguna parte de la funcionalidad.
<li>El evento <code>pointerdown</code> no activa la acción.</li>
* La función se completa con el evento <code>up</code> del puntero y existe un mecanismo para cancelar la función antes de que se complete o para deshacerla una vez completada.
<li>La acción se completa con <code>pointerup</code> y puede cancelarse o deshacerse.</li>
* El evento <code>up</code> del puntero deshace cualquier consecuencia del evento <code>down</code> previo.
<li>El evento <code>pointerup</code> revierte cualquier efecto del <code>pointerdown</code>.</li>
* Completar la función con el evento <code>down</code> es esencial (p. ej. se considera esencial un emulador de teclado)
<li>La activación en <code>pointerdown</code> es esencial para la funcionalidad.</li>
</ul>


|wcag_descripcion_resumida=
|wcag_descripcion_resumida=
Línea 57: Línea 63:
|wcag_referencias=
|wcag_referencias=
<ul>
<ul>
<li>Understanding Success Criterion 2.5.2: Pointer Cancellation (W3C)</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/general/G210 G210: Ensuring that drag-and-drop actions can be cancelled]</span></li>
<li>WCAG Quick Reference – 2.5.2</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/general/G212 G212: Using native controls to ensure functionality is triggered on the up-event]</span></li>
<li>MDN — Pointer Events API</li>
<li><span lang="en">[https://www.w3.org/WAI/WCAG22/Techniques/failures/F101 F101: Failure due to activating a control on the down-event]</span></li>
</ul>
</ul>


|wcag_recursos=
 
<ul>
|wcag_recursos= No se presentan
<li>Patrones UI seguros: confirmación / deshacer</li>
<li>Buenas prácticas para <code>pointerdown</code> y <code>pointerup</code></li>
</ul>


|wcag_tipo_evaluacion=Manual
|wcag_tipo_evaluacion=Manual
Línea 72: Línea 75:
|wcag_pasos_evaluacion=
|wcag_pasos_evaluacion=
<ol class="paso-list">
<ol class="paso-list">
<li>Identificar componentes que responden a clic/tap.</li>
<li><span class="paso-badge">Paso 1.</span>
<li>Verificar que no ejecutan acciones irreversibles en <code>pointerdown</code>.</li>
Localizar todos los elementos de interacción y acceder a ellos utilizando todos los medios disponibles (p. ej., ratón, pantalla táctil, etc.).
<li>Comprobar que la acción se ejecuta en <code>pointerup</code> y puede cancelarse.</li>
</li>
<li>Confirmar alternativa accesible si <code>pointerdown</code> es esencial.</li>
 
<li>Probar con dispositivos táctiles y sistemas de acceso alternativo.</li>
<li><span class="paso-badge">Paso 2.</span>
Comprobar que al pulsar sobre el elemento de interacción (solo presionar, sin soltar) no se activa ninguna funcionalidad.
</li>
 
<li><span class="paso-badge">Paso 3.</span>
Deslizar y levantar el puntero fuera del área de interacción y comprobar que no se ha activado ninguna funcionalidad.
</li>
</ol>
</ol>


|wcag_resultado_evaluacion=
|wcag_resultado_evaluacion=
Línea 84: Línea 94:
|wcag_ejemplo_evaluacion=
|wcag_ejemplo_evaluacion=
<div class="accessibility-card">
<div class="accessibility-card">
<strong>✅ Accesible: acción segura en pointerup</strong>
No comprar, borrar o enviar nada simplemente por tocar una vez — debe haber confirmación o cancelación
 
HTML:
<pre class="wcag-codigo-html">
<pre class="wcag-codigo-html">
<button id="borrar">Borrar elemento</button>
<button id="comprar-btn">Comprar</button>
<script>
<p id="msg"></p>
document.getElementById('borrar').addEventListener('pointerup', ()=> {
</pre>
   if(confirm('¿Eliminar?')) eliminar();
 
Javascript:
<pre class="wcag-codigo-html">
 
let confirmado = false;
 
const btn = document.getElementById('comprar-btn');
const msg = document.getElementById('msg');
 
btn.addEventListener('pointerup', () => {
   if (!confirmado) {
    confirmado = true;
    msg.textContent = "Compra realizada";
  }
});
 
// Permite cancelar (ej. tecla Escape)
document.addEventListener('keydown', (e) => {
  if (e.key === "Escape") {
    confirmado = false;
    msg.textContent = "Acción cancelada";
  }
});
});
</script>
 
</pre>
</pre>
</div>
 
 


|wcag_otras_herramientas_evaluacion=
|wcag_otras_herramientas_evaluacion=
<ul>
<ul>
<li>Pruebas táctiles</li>
<li>'''Prueba manual con puntero''': usar ratón o un solo dedo para activar controles y confirmar que no se ejecutan acciones irreversibles al hacer <code>pointerdown</code> (clic/tocar); la acción debe ejecutarse en <code>pointerup</code> o permitir cancelación.</li>
<li>Switch Control / Puntero de cabeza</li>
<li>'''Cancelar/Deshacer''': comprobar que, si la acción comienza en <code>pointerdown</code>, existe una forma clara de cancelarla antes de finalizar o de deshacerla después.</li>
<li>VoiceOver / TalkBack</li>
<li>'''Navegación con teclado''': verificar que la funcionalidad también es operable mediante teclado (evitar funciones exclusivas dependientes de presionar y arrastrar).</li>
<li>'''Inspección del código''': revisar eventos (p. ej. <code>mousedown</code>/<code>pointerdown</code>) y confirmar que no se usa el evento de pulsación para completar acciones sin permitir cancelación.</li>
<li>'''Prueba asistiva''': usar lectores de pantalla o dispositivos alternativos para confirmar que la acción se activa de forma previsible sin activación accidental.</li>
</ul>
</ul>
}}
}}

Revisión actual - 12:53 6 nov 2025

2.5.2-A. Cancelación del puntero

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)

  • Toda funcionalidad que se pueda operar mediante un puntero sencillo (single pointer) debe cumplir al menos una de las siguientes condiciones:
    • El evento down del puntero no se emplea para ejecutar ninguna parte de la funcionalidad.
    • La función se completa con el evento up del puntero y existe un mecanismo para cancelar la función antes de que se complete o para deshacerla una vez completada.
    • El evento up del puntero deshace cualquier consecuencia del evento down previo.
    • Completar la función con el evento down es esencial (p. ej. se considera esencial un emulador de teclado)

Comprensión del criterio

Descripción resumida

Las funciones activadas por clic o toque no deben ejecutarse de forma irreversible al pulsar el elemento. El usuario debe poder cancelar o revertir la acción.

Objetivo

Evitar activaciones accidentales y permitir cancelar acciones iniciadas involuntariamente.

Importancia de cumplir el criterio

Es esencial para personas con temblores, movimientos involuntarios, dificultades de precisión o que usan dispositivos alternativos como punteros de cabeza.

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 todos los elementos de interacción y acceder a ellos utilizando todos los medios disponibles (p. ej., ratón, pantalla táctil, etc.).
  2. Paso 2. Comprobar que al pulsar sobre el elemento de interacción (solo presionar, sin soltar) no se activa ninguna funcionalidad.
  3. Paso 3. Deslizar y levantar el puntero fuera del área de interacción y comprobar que no se ha activado ninguna funcionalidad.

Resultado esperado

El usuario puede cancelar o deshacer acciones activadas por puntero, evitando activaciones accidentales.

Ejemplo

No comprar, borrar o enviar nada simplemente por tocar una vez — debe haber confirmación o cancelación

HTML: 

<button id="comprar-btn">Comprar</button>
<p id="msg"></p>

Javascript: 


let confirmado = false;

const btn = document.getElementById('comprar-btn');
const msg = document.getElementById('msg');

btn.addEventListener('pointerup', () => {
  if (!confirmado) {
    confirmado = true;
    msg.textContent = "Compra realizada";
  }
});

// Permite cancelar (ej. tecla Escape)
document.addEventListener('keydown', (e) => {
  if (e.key === "Escape") {
    confirmado = false;
    msg.textContent = "Acción cancelada";
  }
});

Otras herramientas de evaluación

  • Prueba manual con puntero: usar ratón o un solo dedo para activar controles y confirmar que no se ejecutan acciones irreversibles al hacer pointerdown (clic/tocar); la acción debe ejecutarse en pointerup o permitir cancelación.
  • Cancelar/Deshacer: comprobar que, si la acción comienza en pointerdown, existe una forma clara de cancelarla antes de finalizar o de deshacerla después.
  • Navegación con teclado: verificar que la funcionalidad también es operable mediante teclado (evitar funciones exclusivas dependientes de presionar y arrastrar).
  • Inspección del código: revisar eventos (p. ej. mousedown/pointerdown) y confirmar que no se usa el evento de pulsación para completar acciones sin permitir cancelación.
  • Prueba asistiva: usar lectores de pantalla o dispositivos alternativos para confirmar que la acción se activa de forma previsible sin activación accidental.










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

A continuación se muestran comentarios sobre el criterio 2.5.2-A. Cancelación del puntero

Loading comments...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_2/2.5_Modalidades_de_los_input/2.5.2-A&oldid=3747»