Principio 2/2.5 Modalidades de los input/2.5.2-A

De WCAG Wiki

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 pointerdown no activa la acción.
    • La acción se completa con pointerup y puede cancelarse o deshacerse.
    • El evento pointerup revierte cualquier efecto del pointerdown.
    • La activación en pointerdown es esencial para la funcionalidad.

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

  • Understanding Success Criterion 2.5.2: Pointer Cancellation (W3C)
  • WCAG Quick Reference – 2.5.2
  • MDN — Pointer Events API

Recursos de apoyo

  • Patrones UI seguros: confirmación / deshacer
  • Buenas prácticas para pointerdown y pointerup

Evaluación del criterio

Tipo de evaluación

Evaluación Manual

Procedimiento de evaluación

  1. Identificar componentes que responden a clic/tap.
  2. Verificar que no ejecutan acciones irreversibles en pointerdown.
  3. Comprobar que la acción se ejecuta en pointerup y puede cancelarse.
  4. Confirmar alternativa accesible si pointerdown es esencial.
  5. Probar con dispositivos táctiles y sistemas de acceso alternativo.

Resultado esperado

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

Ejemplo ilustrativo

✅ Accesible: acción segura en pointerup 

<button id="borrar">Borrar elemento</button>
<script>
document.getElementById('borrar').addEventListener('pointerup', ()=> {
  if(confirm('¿Eliminar?')) eliminar();
});
</script>


Otras herramientas de evaluación

  • Pruebas táctiles
  • Switch Control / Puntero de cabeza
  • VoiceOver / TalkBack










Ejemplos accesibles y no accesibles creados por alumnos

<!DOCTYPE html> Formulario de Reserva - NO Accesible 3.3.2-C

⚠️ PROBLEMA 3.3.2-C: Este formulario NO tiene etiquetas ni instrucciones claras

Reserva de Hotel

⚠️ Problemas de este formulario:
  • No hay etiquetas <label> para ningún campo
  • Algunos placeholders son ambiguos ("Código" - ¿qué código?)
  • No se indica qué campos son obligatorios
  • No hay instrucciones sobre el formato esperado
  • El select dice "Selecciona" pero ¿seleccionar qué?
  • Un campo no tiene ni placeholder ni etiqueta (campo de email)
  • No hay indicación de formato de fecha específico
  • No se explica para qué sirve cada campo

<!DOCTYPE html> Formulario de Reserva - ACCESIBLE 3.3.2-C

✅ ACCESIBLE 3.3.2-C: Este formulario tiene etiquetas e instrucciones claras

Reserva de Hotel

Complete el siguiente formulario para reservar su estadía

Nota: Los campos marcados con * son obligatorios

Ingrese su nombre tal como aparece en su documento de identidad

Enviaremos la confirmación de reserva a este correo

Incluya el código de país (Ej: +34 para España)

¿Cuántas personas se alojarán?

Formato: DD/MM/AAAA (Ej: 15/02/2025)

Formato: DD/MM/AAAA (Ej: 20/02/2025)

Seleccione el tipo de habitación que prefiere

Si tiene un código promocional, ingréselo aquí

Indique cualquier necesidad especial o preferencia (cama extra, piso bajo, accesibilidad, etc.)

✅ Implementación correcta:
  • Cada campo tiene una etiqueta <label> clara asociada
  • Los campos obligatorios están claramente marcados con *
  • Hay instrucciones específicas sobre formato y contenido esperado
  • Los selectores tienen opciones descriptivas, no ambiguas
  • Se explica el propósito de cada campo cuando no es obvio
  • Se proporcionan ejemplos en los placeholders
  • Hay una nota inicial explicando la convención de campos obligatorios
  • Se usan atributos ARIA apropiados (aria-required, aria-describedby)

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=3478»