2526MicroUdL2.5.2-A-001

Edición de la página como formulario

Editar con formulario

1. Información básica

Id del criterio: 2.5.2 - Cancelación del puntero (Nivel: A)

Título del subcriterio: 2.5.2-A

Universidad participante: MicroUdL

Curso académico: 2025-26

2.5.2-A

Enlace directo a la página del subcriterio en la wiki https://wikiwcag.udl.cat/Principio_2/2.5_Modalidades_de_los_input/2.5.2-A

---

2. Ejemplos prácticos

2.1. Ejemplo NO accesible

2.1.1. Evidencia en imagen y enlace:
a) Imagen

b) Enlace de donde se ha obtenido la imagen:
https://create.kahoot.it/auth/register?next=%2Fcreator%3Ftemplate%3D20517497-6809-49c5-88c9-a104af2bcb0e

2.1.2. Código HTML:

<div> <button type="button" aria-label="Registrarse como Profesor"> <span aria-hidden="true"> <svg viewBox="0 0 32 32" focusable="false"> <path d="M27,24.56 L5,24.56 L16,7 Z"></path> </svg> </span> <span>Profesor</span> </button> <button type="button" aria-label="Registrarse como Profesional"> <span aria-hidden="true"> <svg viewBox="0 0 32 32" focusable="false"> <path d="M7,7 L25,7 L25,25 L7,25 Z"></path> </svg> </span> <span>Profesional</span> </button> <button type="button" aria-label="Registrarse como Estudiante"> <span aria-hidden="true"> <svg viewBox="0 0 32 32" focusable="false"> <path d="M4,16 L16,4 L28,16 L16,28 Z"></path> </svg> </span> <span>Estudiante</span> </button> <button type="button" aria-label="Registrarse como Familia y amigos"> <span aria-hidden="true"> <svg viewBox="0 0 32 32" focusable="false"> <path d="M16,27 C9.9,27 5,22.1 5,16 C5,9.9 9.9,5 16,5 C22.1,5 27,9.9 27,16 C27,22.1 22.1,27 16,27 Z"></path> </svg> </span> <span>Familia y amigos</span> </button> </div>

Explicación del problema detectado:
Aquí vemos dos maneras de no cumplir:

• Al acceder al proceso de registro de la página de Kahoot!, se muestra una pantalla en la que se solicita seleccionar el perfil de uso (Profesor, Profesional, Estudiante o Familia y amigos). Al pulsar directamente sobre cualquiera de las opciones, la acción se ejecuta inmediatamente y se avanza automáticamente al siguiente paso del proceso, sin posibilidad de cancelar la acción del puntero.
• Por otro lado, el menú de idiomas que aparece en la esquina superior derecha, se dispara durante el evento "down" del mouse, y no al soltar, es decir, con el evento "up".

Indica a que personas con discapacidad afecta y explicación de las barreras que causa

• Personas con discapacidad motora: Temblor, espasticidad, parálisis cerebral, distonías, artritis, Parkinson, lesiones medulares, etc. Pueden pulsar un control sin querer o no ser capaces de mantener el puntero estable. Necesitan poder cancelar la acción desplazando el puntero fuera del elemento antes de soltar.
• Personas que usan dispositivos de entrada alternativos: Trackballs, joysticks, pulsadores, emuladores de ratón, dispositivos de acceso adaptado. Estos dispositivos suelen generar eventos de puntero menos precisos, aumentando el riesgo de activaciones accidentales.
• Personas con discapacidad visual o baja visión: Dificultad para localizar exactamente el área interactiva. Pueden pulsar un elemento equivocado y necesitan margen para rectificar antes de que la acción se ejecute.
• Personas con discapacidad cognitiva: Dificultades para procesar rápidamente cambios de contexto inesperados. Si una acción se ejecuta inmediatamente al tocar o pulsar, puede generar confusión, desorientación o pérdida del control de la interacción.
• Impedimentos temporales o situacionales: Pantallas táctiles pequeñas, uso con una sola mano, movimiento (transporte), fatiga. Aunque no tengan una discapacidad permanente, se ven afectados de forma situacional.

---

2.2. Ejemplo Accesible

2.2.1. Evidencia de imagen:
a) Imagen

b) Enlace de donde se ha obtenido la imagen:
https://www.menti.com/al31znzzz7e2

2.2.2 Código HTML:

<div> <h1 id="slide-title"> ¿Cuántas patas tiene un gato? </h1> <form> <fieldset> <legend class="sr-only"> ¿Cuántas patas tiene un gato? </legend> <label> <input type="radio" name="choices" value="2-patas" /> 2 patas </label> <label> <input type="radio" name="choices" value="3-patas" /> 3 patas </label> <label> <input type="radio" name="choices" value="4-patas" /> 4 patas </label> </fieldset> <button type="submit"> Submit </button> </form> </div>

Explicación de la solución aplicada:
Seleccionar una opción no ejecuta la acción final. Al pulsar una respuesta (por ejemplo, “2 patas”), solo se marca la opción, no se produce ningún cambio de contexto ni avance automático, es decir, existe un paso explícito de confirmación. La acción principal (enviar la respuesta) solo se ejecuta al activar el botón “Submit”, y el evento de puntero se ejecuta en “up" click, no en “down”, es decir el comportamiento sigue el patrón esperado de controles de formulario accesibles.

---