2526UPSA2.5.4-A001
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.4-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 id="start_demo">Start demo</button>
<script>
let is_running = false;
let demo_button = document.getElementById("start_demo");
demo_button.onclick = function(e) {
e.preventDefault();
if (is_running){
window.removeEventListener("devicemotion", handleMotion);
window.removeEventListener("deviceorientation", handleOrientation);
demo_button.innerHTML = "Start demo";
is_running = false;
} else {
window.addEventListener("devicemotion", handleMotion);
window.addEventListener("deviceorientation", handleOrientation);
demo_button.innerHTML = "Stop demo";
is_running = true;
}
};
function handleMotion(event) {
// Aquí va la lógica que se ejecuta al mover el dispositivo
console.log('Moviendo dispositivo...');
}
function handleOrientation(event) {
console.log('Orientación cambiada...');
}
</script>
Explicación del problema detectado:
La funcionalidad se activa mediante el movimiento del dispositivo usando los eventos devicemotion y deviceorientation. Aunque existe un botón para activar o desactivar la escucha de los sensores, no se proporciona un control alternativo que permita realizar la misma acción sin mover el dispositivo,
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Personas con discapacidad motriz
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="toggle-motion">Activar control por movimiento</button>
<button id="accion-alternativa">Ejecutar acción sin movimiento</button>
<p id="estado">Acción no ejecutada</p>
<script>
let motionEnabled = false;
document.getElementById("toggle-motion").onclick = function () {
motionEnabled = !motionEnabled;
this.textContent = motionEnabled
? "Desactivar control por movimiento"
: "Activar control por movimiento";
};
document.getElementById("accion-alternativa").onclick = ejecutarAccion;
function ejecutarAccion() {
document.getElementById("estado").textContent =
"Acción ejecutada sin necesidad de mover el dispositivo";
}
window.addEventListener("devicemotion", function (event) {
if (motionEnabled && event.acceleration.x > 15) {
ejecutarAccion();
}
});
</script>
Explicación de la solución aplicada:
La funcionalidad activada por movimiento dispone de un control alternativo visible que permite ejecutar la misma acción sin necesidad de mover el dispositivo. Además, el usuario puede activar o desactivar la activación por movimiento mediante un control accesible
