Criterios de Operable
OperablePauta 2.1 Accesible por teclado
2.1.2Sin trampas para el foco del teclado
Nivel ALo exige la normativa (EN 301 549).
Qué pide
Si el foco entra en un componente, también puede salir con el teclado.
A quién ayuda: Usuarios de teclado.
Un caso real
Un reproductor de vídeo incrustado en una noticia.
BienTab sale del reproductor y continúa por la página.
MalEl foco queda atrapado en el reproductor y no hay forma de salir.
Cómo aplicarlo en código
Ventana modal que se puede cerrar con el teclado
El dialog nativo abierto con showModal() mantiene el foco dentro, se cierra con Esc y devuelve el foco al botón que lo abrió.
<button type="button" id="abrir-boletin">Suscribirme al boletín</button>
<dialog id="boletin" aria-labelledby="boletin-titulo">
<h2 id="boletin-titulo">Suscríbete</h2>
<!-- … formulario … -->
<form method="dialog">
<button>Cerrar</button>
</form>
</dialog>
<script>
document.getElementById("abrir-boletin").addEventListener("click", () => {
document.getElementById("boletin").showModal();
});
</script><script>
// El foco entra en el mapa y ya no puede salir
mapa.addEventListener("keydown", (e) => {
if (e.key === "Tab") e.preventDefault();
});
</script>Cómo comprobarlo
Recorre la página con Tab y comprueba que puedes avanzar y retroceder siempre.