2526UFV2.1.4-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.1_Teclado_Accesible/2.1.4-A
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
No se ha indicado ningún enlace.
2.1.2. Código HTML:
<h2>Bandeja de entrada</h2>
<ul id="listaCorreos">
<li tabindex="0">Factura enero</li>
<li tabindex="0">Reunión mañana</li>
<li tabindex="0">Oferta</li>
</ul>
<p>Atajo: pulsa la letra D para borrar el correo seleccionado.</p>
<script>
let seleccionado = 0;
const items = document.querySelectorAll('#listaCorreos li');
function marcar(i) {
items.forEach((li, idx) => li.style.outline = idx === i ? '2px solid #00f' : 'none');
}
marcar(seleccionado);
// MAL: atajo de una sola tecla activo en toda la página y sin opción de desactivar/reasignar
document.addEventListener('keydown', (e) => {
if (e.key.toLowerCase() === 'd') {
alert('Correo borrado (simulado)');
}
});
</script>
Explicación del problema detectado:
Aquí se implementa un atajo global de una sola tecla (“D”) que se activa en cualquier parte de la página y no ofrece mecanismo para desactivarlo, reasignarlo o limitarlo al foco del componente.
Esto es un fallo típico porque el usuario puede disparar una acción crítica sin querer (por ejemplo, mientras escribe en un campo o al interactuar con otra zona).
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Motriz (barrera grave): personas con temblores, baja precisión o pulsaciones involuntarias pueden activar “D” accidentalmente, causando borrados inesperados y pérdida de control.
Cognitiva (barrera moderada): acciones imprevistas y poco “predecibles” aumentan la confusión (no queda claro qué pasó ni por qué), elevan la carga mental y favorecen errores repetidos.
2.2. Ejemplo Accesible
2.2.1. Evidencia de imagen:
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
No se ha indicado ningún enlace.
2.2.2 Código HTML:
<h2>Bandeja de entrada</h2>
<label>
<input type="checkbox" id="atajos1Tecla" checked>
Permitir atajos de una tecla (por ejemplo, D para borrar)
</label>
<div id="ayudaAtajos">
Atajo: con el foco en la lista, pulsa D para borrar el correo seleccionado.
</div>
<ul id="listaCorreos" tabindex="0" aria-describedby="ayudaAtajos">
<li>Factura enero</li>
<li>Reunión mañana</li>
<li>Oferta</li>
</ul>
<script>
const lista = document.getElementById('listaCorreos');
const toggle = document.getElementById('atajos1Tecla');
// Persistencia opcional (mejora práctica)
toggle.checked = localStorage.getItem('atajos1Tecla') !== 'false';
toggle.addEventListener('change', () => {
localStorage.setItem('atajos1Tecla', String(toggle.checked));
});
// BIEN: el atajo de una sola tecla solo funciona cuando el componente tiene el foco
lista.addEventListener('keydown', (e) => {
if (!toggle.checked) return;
if (e.key.toLowerCase() === 'd') {
e.preventDefault();
alert('Correo borrado (simulado)');
}
});
</script>
Explicación de la solución aplicada:
Se cumple el criterio porque el atajo de una tecla (“D”) solo se activa cuando la lista tiene el foco, en lugar de estar escuchando teclas en toda la página.
Además, se incluye un mecanismo para desactivar ese atajo (checkbox), dando control al usuario y evitando activaciones no deseadas en personas con dificultades motrices o que se desorientan con acciones inesperadas.
