Todo operable con teclado (2.1.1), sin trampas (2.1.2) y atajos (2.1.4)

El teclado es la interfaz universal. Las personas ciegas no usan ratón porque no ven el puntero; muchas personas con discapacidad motriz usan solo teclado, un conmutador que emula pulsaciones, o un programa de control por voz que, por debajo, envía eventos de teclado; y bastantes usuarios expertos simplemente prefieren no soltar las manos del teclado. Por eso la pauta 2.1 de las WCAG se titula «Accesible por teclado» y su primer criterio es de nivel A: si algo no se puede hacer con teclado, no se puede hacer.

2.1.1 Teclado

El criterio exige que toda la funcionalidad del contenido sea operable mediante una interfaz de teclado, sin requerir tiempos específicos para cada pulsación. La única excepción son las funciones que dependen intrínsecamente del trazado del movimiento, como el dibujo a mano alzada, y aun así el resto de la aplicación (guardar, borrar, cambiar de color) tiene que funcionar con teclado.

En la práctica, un elemento es operable con teclado cuando cumple tres condiciones:

1. Es alcanzable: recibe el foco al pulsar Tab (o con las flechas dentro de un componente compuesto).
2. Es activable: responde a Intro y, en el caso de los botones, también a Espacio.
3. Es completable: todas sus funciones internas (abrir, cerrar, elegir una opción, mover un deslizador) tienen una tecla asignada.

Los elementos nativos (a con href, button, input, select, textarea, summary) cumplen las tres por defecto. Los problemas aparecen cuando se usan div o span con eventos de ratón, cuando una funcionalidad solo responde a mouseover o hover, o cuando un componente personalizado solo implementa el clic.

<div class="tarjeta" onclick="toggle(this)">
  <span class="titulo">Requisitos</span>
  <div class="detalle" hidden>…</div>
</div>

<div class="tarjeta">
  <h3><button type="button" aria-expanded="false" aria-controls="req-detalle">Requisitos</button></h3>
  <div id="req-detalle" hidden>…</div>
</div>

Cuando no haya más remedio que hacer interactivo un elemento genérico, hay que reconstruir todo lo que el navegador daría gratis: tabindex="0" para que sea alcanzable, un rol adecuado, un manejador de keydown que responda a Intro y Espacio, y evitar el desplazamiento de página que provoca Espacio por defecto:

elemento.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' || e.key === ' ') {
    e.preventDefault();
    elemento.click();
  }
});

Un detalle que se olvida: las funciones que aparecen al pasar el ratón (hover) también deben aparecer con el foco. Un menú desplegable que se abre con :hover debe abrirse también con :focus-within o con un botón; un botón «Eliminar» que solo se muestra al pasar el ratón por una fila debe ser alcanzable con Tab y hacerse visible al recibir el foco.

2.1.2 Sin trampas para el foco del teclado

Una trampa de teclado se produce cuando el foco entra en un componente y no puede salir con las teclas habituales. La persona queda bloqueada y solo puede cerrar la pestaña. Los culpables típicos son reproductores embebidos, widgets de terceros, editores de texto enriquecido que capturan Tab para insertar tabulaciones, y modales mal implementados que atrapan el foco pero no ofrecen forma de cerrarse.

El criterio permite que el foco se mantenga dentro de un componente (de hecho, un diálogo modal debe hacerlo), pero exige que se pueda salir con Tab, Mayús+Tab, Escape u otra tecla estándar y que, si la forma de salir no es la habitual, se informe de ella. Un editor que usa Tab para tabular debe indicar «Pulsa Escape y luego Tab para salir del editor».

campo.addEventListener('keydown', (e) => {
  if (e.key === 'Tab') {
    e.preventDefault(); // inserta un tabulador y bloquea la salida
    insertarTab();
  }
});

2.1.4 Atajos de teclado

Añadido en WCAG 2.1, este criterio de nivel A regula los atajos formados por una sola tecla (letras, números, signos de puntuación) sin modificadores. El problema: una persona que usa control por voz o que escribe con dificultad puede dictar o pulsar una letra sin querer y disparar una acción. Un ejemplo típico: una persona que usa control por voz en un cliente de correo con atajo «R» para responder y «E» para archivar puede ver cómo su dictado archiva y responde mensajes al azar.

Si tu aplicación implementa atajos de una sola tecla, debe cumplir al menos una de estas condiciones:

• Hay un mecanismo para desactivarlos.
• Hay un mecanismo para reasignarlos a una combinación con modificador (Ctrl, Alt…).
• El atajo solo está activo cuando un componente concreto tiene el foco (por ejemplo, las flechas dentro de un deslizador o las letras dentro de un listado para saltar a un elemento).

Los atajos con modificador (Ctrl+S) no entran en este criterio, pero conviene no pisar los del navegador ni los del lector de pantalla. El atributo accesskey de HTML se activa con combinaciones distintas en cada navegador y choca a menudo con las de NVDA y JAWS; su utilidad real es escasa y la mayoría de las guías recomiendan no usarlo. En la lección «Eventos de teclado y atajos propios» verás cómo implementar atajos que cumplan este criterio sin chocar con el navegador, el lector de pantalla ni el teclado español.

Cómo comprobarlo

• Desconecta el ratón (o no lo toques) y completa las tareas principales de la página solo con Tab, Mayús+Tab, Intro, Espacio, flechas y Escape.
• Busca en el código manejadores onclick, onmouseover y onmouseenter en elementos que no sean nativamente interactivos.
• Entra en cada componente embebido (vídeo, mapa, chat) y comprueba que puedes salir.
• Pulsa letras sueltas en distintas zonas de la página y observa si ocurre algo inesperado.

Resumen

• 2.1.1: toda funcionalidad debe ser alcanzable, activable y completable con teclado; la única excepción es la entrada que depende del trazado.
• Usa elementos nativos; si no, reconstruye foco (tabindex="0"), rol y manejo de Intro y Espacio.
• Lo que aparece con el ratón debe aparecer con el foco.
• 2.1.2: el foco siempre debe poder salir de un componente con teclas estándar, o se debe explicar cómo hacerlo.
• 2.1.4: los atajos de una sola tecla deben poder desactivarse, reasignarse o limitarse al componente con foco.