Navegación por teclado

La navegación por teclado permite llegar a cada elemento interactivo —enlaces, botones, formularios y menús— y usarlo sin ratón. Igual que puedes usar Tab para moverte entre los campos de un formulario y Enter para enviarlo, los sitios web bien diseñados siguen patrones predecibles para que puedas recorrerlos con el teclado de forma eficiente. Esto es esencial para las personas con discapacidad motora que dependen de alternativas basadas en el teclado, y a menudo también resulta más rápido para usuarios avanzados con distintas capacidades.

Prueba esto: pulsa Tab en cualquier página web y busca un contorno visible que indique qué elemento tiene el foco en ese momento.

Cómo funciona la navegación por teclado

La base de la navegación por teclado es el orden de tabulación: la secuencia en la que los elementos interactivos reciben el foco cuando pulsas Tab. Este orden debe seguir el recorrido lógico del contenido, normalmente de arriba abajo y de izquierda a derecha. Cuando un elemento tiene el foco, puedes activarlo, por lo general con Enter o la barra espaciadora. Un indicador de foco visible, como un contorno o un resaltado, te permite saber dónde estás al navegar con el teclado.

Patrones básicos de navegación

Tab y Mayús+Tab permiten avanzar y retroceder entre los elementos que pueden recibir el foco. Enter activa enlaces y botones, mientras que la barra espaciadora marca o desmarca casillas de verificación y selecciona botones de opción. Las teclas de flecha permiten navegar dentro de componentes como menús, controles deslizantes y listas desplegables. Escape suele cerrar cuadros de diálogo o salir de un modo. Estos patrones estandarizados hacen que la navegación sea predecible: una vez que los aprendes, funcionan de forma consistente en distintos sitios web.

La solución de los enlaces de salto

Los enlaces de salto son enlaces ocultos que aparecen cuando reciben el foco del teclado y te permiten ir directamente al contenido principal o a las zonas de navegación. Resuelven un problema real: tener que recorrer menús de navegación extensos con Tab cada vez que visitas una página. Implementarlos es sencillo: coloca un enlace al principio de la página con href="#main-content" y aplica estilos para que aparezca solo cuando reciba el foco. Este patrón sencillo mejora enormemente la eficiencia para quienes usan únicamente el teclado.

Errores comunes que debes evitar

La falta de indicadores de foco hace que quienes navegan con el teclado no sepan dónde están. Un orden de tabulación incorrecto, a menudo causado por una disposición en CSS que difiere del orden del código HTML o por el uso inadecuado de valores positivos de tabindex, crea recorridos confusos. Los elementos no interactivos que reciben el foco, como los iconos decorativos configurados para recibirlo, añaden pulsaciones innecesarias. Los componentes personalizados sin compatibilidad con el teclado dejan a los usuarios atrapados, cuando los elementos HTML estándar habrían sido accesibles de forma predeterminada.

Cómo comprobar la accesibilidad por teclado

La prueba más eficaz es sencilla: desconecta el ratón e intenta usar tu sitio web. ¿Puedes llegar a cada elemento interactivo? ¿El orden del foco es lógico? ¿Sabes siempre dónde estás? Esta prueba básica revela problemas que afectan a millones de usuarios y a menudo mejora la experiencia de todos, al dar lugar a interfaces diseñadas con más cuidado y más predecibles.

La accesibilidad por teclado es una base de la inclusión digital. Las investigaciones muestran de forma consistente que las discapacidades motoras afectan a millones de personas y que la navegación por teclado es el principal método de entrada alternativo. Las Pautas de Accesibilidad para el Contenido Web (WCAG) establecen el manejo mediante teclado como un requisito de nivel A, el nivel mínimo de accesibilidad, lo que refleja su importancia fundamental. Para implementarlo, hay que comprender tanto las normas técnicas como las necesidades de los usuarios.

• Grupo de Trabajo de las WCAG del W3C (2023): el criterio de conformidad 2.1.1 exige que todas las funciones se puedan utilizar mediante una interfaz de teclado sin requerir tiempos específicos para las pulsaciones individuales. Así, establece el acceso por teclado como un requisito básico del contenido web accesible. [1]

• WebAIM (2024): las discapacidades motoras abarcan desde temblores y falta de control muscular fino hasta la parálisis completa, por lo que las alternativas basadas en el teclado son esenciales. La navegación por teclado también beneficia a las personas ciegas, que suelen navegar con el teclado, y a los usuarios avanzados que prefieren su eficiencia. [2]

• WebAIM (2024): los enlaces de salto reducen la navegación por teclado de decenas de pulsaciones de Tab por página a una sola activación. Las investigaciones muestran que este patrón mejora significativamente el tiempo necesario para completar tareas entre quienes usan únicamente el teclado. [2]

• MDN Web Docs (2024): los valores positivos de tabindex crean órdenes de foco que difieren de la estructura lógica de la página y generan confusión. Una implementación adecuada se basa en hacer coincidir el orden del código HTML con el orden lógico de navegación, en lugar de cambiarlo mediante tabindex. [3]

• W3C WAI (2023): el orden del foco debe preservar el significado y permitir el manejo de la interfaz, aunque no tiene que coincidir exactamente con la disposición visual. Puede haber varios órdenes válidos siempre que los usuarios puedan comprender y utilizar la interfaz. [1]

Las normas de navegación por teclado se centran principalmente en el contenido web y pueden no cubrir por completo aplicaciones complejas, como juegos o herramientas especializadas. Los componentes personalizados requieren una implementación cuidadosa de ARIA para reproducir el comportamiento del teclado de los elementos nativos. Esta complejidad puede introducir problemas de accesibilidad si la implementación no es correcta. Los dispositivos móviles presentan dificultades adicionales: aunque los teclados Bluetooth externos funcionan, los teclados en pantalla pueden no admitir todos los patrones de navegación. Algunas personas con limitaciones motoras graves pueden necesitar interfaces de barrido controladas por pulsadores, que van más allá de la navegación estándar por teclado. Además, los patrones de teclado varían según el sistema operativo y la configuración regional, por lo que hay que prestar atención a la consistencia entre plataformas.