La navegación por teclado es un requisito fundamental de accesibilidad web. Permite a usuarios con movilidad reducida, personas que utilizan lectores de pantalla y quienes prefieren no usar el ratón interactuar con todos los elementos de un sitio. Las pautas WCAG 2.1 definen criterios concretos para garantizar que ningún elemento interactivo quede inaccesible sin dispositivo apuntador.
Principio de operabilidad en WCAG
El segundo principio de WCAG —Operable— establece que los componentes de la interfaz y la navegación deben ser operables. Dentro de este principio, la pauta 2.1 se centra específicamente en el acceso mediante teclado.
Criterio 2.1.1 — Teclado — Nivel A
Toda la funcionalidad del contenido debe poder manejarse mediante una interfaz de teclado sin necesidad de hacer coincidir movimientos específicos del teclado (pulsaciones con tiempo o presión determinada), excepto si la función subyacente requiere una entrada que depende del movimiento del usuario.
Criterio 2.1.2 — Sin trampa de teclado — Nivel A
Si el foco del teclado puede moverse a un componente de la página mediante el teclado, el foco también puede alejarse de ese componente usando solo el teclado. Si para lograrlo se necesita más que las teclas de flecha o tabulador, se informa al usuario sobre el método apropiado.
Criterio 2.4.3 — Orden del foco — Nivel A
Si se puede navegar por una página web de forma secuencial y las secuencias de navegación afectan al significado u operatividad, los componentes que reciben el foco lo hacen en un orden que preserva el significado y la operatividad.
Criterio 2.4.7 — Foco visible — Nivel AA
Cualquier interfaz de usuario operable mediante teclado tiene un modo de operación en el que el indicador de foco del teclado es visible.
El indicador de foco: qué es y por qué eliminarlo es un problema
El indicador de foco es el contorno visual (borde, sombra o cambio de color) que rodea el elemento actualmente seleccionado al navegar con teclado. En la mayoría de los navegadores modernos aparece como un borde de color azul o negro alrededor del elemento.
Es habitual en el desarrollo web eliminar este indicador mediante outline: none en CSS, con el argumento de que resulta visualmente menos atractivo. Esta práctica incumple el criterio 2.4.7 de WCAG y hace que los usuarios de teclado pierdan la referencia de dónde se encuentra el foco en la página.
La alternativa correcta no es eliminar el foco, sino diseñarlo para que sea coherente con la identidad visual del sitio. Desde CSS se puede personalizar el indicador con :focus-visible, que solo muestra el contorno cuando el usuario navega con teclado, no cuando hace clic con el ratón.
Orden de tabulación lógico
La tecla Tab avanza el foco entre elementos interactivos siguiendo el orden del DOM (Document Object Model). Un orden de tabulación lógico sigue la lectura natural del contenido, generalmente de izquierda a derecha y de arriba abajo en diseños en español.
Problemas comunes que alteran el orden de tabulación:
- Uso del atributo
tabindexcon valores positivos (1, 2, 3...), que fuerza un orden artificial y dificulta el mantenimiento. - Contenido posicionado con CSS que visualmente aparece en un orden diferente al del DOM.
- Elementos interactivos creados con
<div>o<span>sintabindex="0"y sin rol ARIA adecuado, que quedan fuera del orden de tabulación.
Teclas de acceso rápido y atajos de teclado
El criterio 2.1.4 de WCAG 2.1 (nivel A) regula los atajos de teclado de una sola tecla. Si un sitio implementa atajos que se activan con una sola tecla de carácter (letra, número o puntuación), el usuario debe poder desactivarlos, reasignarlos o hacer que solo funcionen cuando el foco esté en el componente correspondiente. Esto evita interferencias con los atajos del sistema operativo o del lector de pantalla del usuario.
Trampas de teclado: el error más grave
Una trampa de teclado ocurre cuando el foco entra en una zona de la página —normalmente un componente JavaScript como un modal, un menú desplegable o un carrusel— y no puede salir de ella usando el teclado. El criterio 2.1.2 de WCAG lo prohíbe expresamente.
En implementaciones de modales accesibles, al abrir el modal el foco debe desplazarse al interior del modal, y el usuario debe poder cerrarlo con la tecla Escape y recuperar el foco en el elemento que lo abrió.
Cómo probar la accesibilidad de teclado
La prueba básica no requiere herramientas adicionales:
- Desconectar el ratón o el touchpad.
- Cargar la página en el navegador.
- Navegar con Tab (avanzar) y Shift+Tab (retroceder).
- Activar elementos con Enter o Espacio.
- Comprobar que el indicador de foco es siempre visible y el orden es lógico.
- Verificar que no hay ningún elemento al que no se pueda llegar o del que no se pueda salir.
Para una evaluación más completa, herramientas como el aXe DevTools (extensión de navegador) o el módulo de accesibilidad de Firefox DevTools pueden detectar automáticamente parte de los problemas de navegación por teclado.
Aplicación en sitios informativos
Para un sitio informativo típico en España —con menú de navegación, artículos con imágenes y un formulario de contacto— los puntos críticos de accesibilidad por teclado son:
- El menú de navegación debe ser completamente operable con Tab y Enter, incluyendo los submenús desplegables.
- Los enlaces del contenido deben recibir foco con Tab y activarse con Enter.
- El formulario de contacto debe poder cumplimentarse y enviarse completamente con teclado.
- El banner de cookies debe ofrecer la opción de aceptar o rechazar mediante teclado.
La accesibilidad por teclado no es una característica optativa: es el mecanismo de acceso principal para millones de usuarios que no pueden o no desean utilizar un ratón.