2526UdL2.5.2-A-001
Edición de la página como formulario
1. Información básica
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
a) Imagen
No se ha subido ninguna imagen.
b) Enlace de donde se ha obtenido la imagen:
No se ha indicado ningún enlace.
2.1.2. Código HTML:
<button onclick="borrar()">Borrar mensaje</button>
<p id="estado"></p>
<script>
function borrar() {
document.getElementById("estado").textContent = "Mensaje borrado";
}
</script>
Explicación del problema detectado:
Este botón ejecuta la acción en el evento down (clic inmediato).
El usuario no tiene oportunidad de cancelar la acción antes de que se complete.
Un toque accidental activa una acción irreversible sin confirmación.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Personas con discapacidad motriz (temblores, movimientos involuntarios) pueden activar el botón sin querer.
Personas con baja visión pueden pulsar por error debido a falta de precisión.
Usuarios con discapacidad cognitiva pueden confundirse si la acción ocurre sin aviso.
Usuarios con lectores de pantalla pueden activar el botón sin intención al navegar.
El resultado es una barrera grave, porque no existe forma de cancelar o deshacer la acción.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
No se ha subido ninguna imagen.
b) Enlace de donde se ha obtenido la imagen:
No se ha indicado ningún enlace.
2.2.2 Código HTML:
<button id="borrar-btn">Borrar mensaje</button>
<p id="estado"></p>
<script>
let confirmado = false;
const btn = document.getElementById('borrar-btn');
const estado = document.getElementById('estado');
// La acción solo se ejecuta en pointerup
btn.addEventListener('pointerup', () => {
if (!confirmado) {
confirmado = true;
estado.textContent = "Mensaje borrado";
}
});
// Permite cancelar antes de completar la acción
btn.addEventListener('pointerdown', () => {
estado.textContent = "Suelta para confirmar o mueve el dedo fuera para cancelar";
});
// Cancelación si el usuario se desplaza fuera del botón
btn.addEventListener('pointerleave', () => {
confirmado = false;
estado.textContent = "Acción cancelada";
});
</script>
Explicación de la solución aplicada:
Este ejemplo cumple el criterio porque:
La acción no se ejecuta en pointerdown, evitando activaciones accidentales.
La acción solo se completa en pointerup, cuando el usuario confirma la intención.
Si el usuario mueve el puntero fuera del botón antes de soltar, la acción se cancela automáticamente.
Se proporciona un mensaje informativo que ayuda a comprender el proceso.
El usuario tiene control total y puede cancelar la acción fácilmente.
