Se abre en una pestaña nueva

SEO local

Navegación con teclado: cómo hacer que tu web funcione sin mouse

Quién navega con el teclado, qué piden las pautas del W3C, cómo probar tu web con Tab y qué encontramos y arreglamos en nuestras páginas.

Revisada4 de noviembre de 2026
Lectura
Forma parte deDiseño web
Escucha esta guía
0:00 /7:00

Respuesta corta: Navegar con teclado es poder usar toda tu web con Tab, Mayús+Tab, Enter y Esc. Comprueba que cada enlace, menú y formulario funciona sin mouse, que el foco siempre se ve y que un enlace salta el menú.

Quién navega con el teclado

El W3C menciona a las personas sin visión, que no pueden usar un mouse que exige coordinar ojo y mano, y a quienes usan teclados alternativos. El dictado por voz, los teclados en pantalla y los dispositivos de soplo llegan a la página como si fueran un teclado.

A quien tiene baja visión le puede costar seguir el puntero, y hay quien prefiere el teclado porque es más rápido. Para todos ellos la página es una secuencia: llegan a un enlace solo después de pasar por los anteriores.

Qué piden las pautas de accesibilidad

Criterio Nivel Qué pide
2.1.1 Teclado A Todo se puede hacer con el teclado, salvo los movimientos a mano alzada
2.1.2 Sin trampas de teclado A Quien usa el teclado no se queda atascado
2.4.1 Evitar bloques A Una forma de saltar el contenido que se repite en cada página
2.4.3 Orden del foco A Los elementos reciben el foco en un orden que conserva el sentido
2.4.7 Foco visible AA Cada elemento que recibe el foco lo muestra
2.4.11 Foco no tapado AA El elemento con foco queda visible al menos en parte

Nombres y niveles de las WCAG 2.2, consultados el 4 de noviembre de 2026.

Nuestra guía de ADA y accesibilidad web explica dónde encajan estos criterios en la ley.

Cómo probar tu web con el teclado

  1. Haz clic en la barra de direcciones y aparta la mano del mouse.
  2. Pulsa Tab para avanzar y Mayús+Tab para retroceder.
  3. Comprueba que en cada paso ves dónde está el foco.
  4. Comprueba que el orden sigue el de lectura: de izquierda a derecha y de arriba abajo.
  5. Abre cada menú y diálogo, usa cada formulario y cierra lo que abriste con Esc o con su botón de cerrar.
  6. Pulsa Enter en el enlace para saltar al contenido y después Tab: el foco tiene que caer en el contenido.
  7. Comprueba que ninguna cabecera fija, botón de chat o aviso de cookies tapa el foco.

web.dev aconseja recorrer tus páginas con Tab antes de cada publicación. Nuestra guía del verificador de accesibilidad explica las herramientas automáticas que completan esta prueba.

El indicador de foco

Los navegadores dibujan un anillo de foco por defecto, y algunas webs lo quitan porque les parece feo. NN/g dice que quitarlo es catastrófico para quien usa el teclado: si no te gusta, cámbialo por uno que encaje con tu diseño.

Con el selector :focus-visible, el anillo aparece cuando el navegador decide que el foco debe notarse, normalmente con el teclado, y no en cada clic del mouse. El W3C añade que tiene que seguir visible mientras el elemento tenga el foco.

El W3C también aplica al anillo sus reglas de contraste para elementos que no son texto, así que tiene que destacar sobre el fondo que lo rodea.

Enlaces para saltar al contenido y orden del foco

En casi todas las webs el menú va primero, así que quien usa el teclado puede pulsar Tab decenas de veces antes de llegar al contenido. El W3C señala que eso puede llevar mucho tiempo y causar a algunas personas un dolor físico intenso.

Un enlace al principio de la página lo resuelve, y puede quedar oculto hasta que alguien llega a él con Tab. NN/g avisa de que el paso después de Enter se suele pasar por alto: el siguiente Tab tiene que seguir dentro del contenido.

Para el orden, web.dev recomienda colocar el HTML en el orden que debe seguir el foco, en vez de mover elementos con CSS. Los menús cerrados y los paneles ocultos tienen que salir del orden de tabulación, con display: none o visibility: hidden.

Lo que encontramos en nuestra web

El 4 de noviembre de 2026 recorrimos solo con el teclado cinco páginas nuestras: la de inicio, una guía, precios, contacto y la de inicio en español. Recorrer cada página entera llevó entre 95 y 117 pulsaciones de Tab.

Todas las paradas mostraron un indicador de foco; en la lista del blog de la página de inicio rodea la tarjeta entera. El foco nunca se quedó atascado, y el menú de servicios se abre con Enter, se cierra con Esc y devuelve el foco a su botón.

El primer fallo fue justo el paso del que avisa NN/g. En la página de inicio, «Saltar al contenido principal» no hacía nada, porque nuestro desplazamiento suave movía la página sin mover el foco. Lo arreglamos esa misma mañana, y ahora el siguiente Tab cae en el contenido.

El segundo vino de nuestro aviso de cookies. En la primera visita, el primer Tab cae en él, y los enlaces para saltar llegan justo después. Mientras el aviso seguía abierto, algunos enlaces a los que llegamos con Tab quedaban tapados del todo por él: entre 10 y 18 por página en el móvil. El W3C pone los avisos de cookies como ejemplo de este fallo. Lo arreglamos esa mañana: cada elemento con foco se desplaza ahora para quedar libre del aviso, del botón del chat y de la cabecera, y después ninguno quedó tapado por el aviso.

Antes de dar por buena una página con el teclado

  • Cada enlace, botón, menú y formulario funciona solo con el teclado.
  • El foco puede salir de cualquier parte de la página, diálogos incluidos.
  • Un enlace salta el menú y el siguiente Tab sigue en el contenido.
  • El orden del foco sigue el orden de lectura.
  • El indicador de foco se ve en cada elemento que recibe el foco.
  • Ningún elemento fijo tapa el elemento con foco.

RecuerdaSi tú no ves dónde está el foco, tus visitantes tampoco. Recorre cada página con Tab antes de publicarla.

Antes de dar por terminada una página, nuestro equipo de diseño web la prueba con el teclado, con un lector de pantalla y con revisiones automáticas.

Respuestas rápidas sobre la navegación con teclado

¿Qué es la navegación con teclado?

Usar una web solo con el teclado: Tab avanza por enlaces, botones y campos, Mayús+Tab retrocede y Enter abre un enlace. Quien no puede usar el mouse depende de ella, y hay quien la prefiere porque es más rápida.

¿Qué es un enlace para saltar al contenido?

Un enlace al principio de la página que salta el menú y lleva al contenido principal. Muchas veces solo aparece cuando alguien llega a él con Tab. Después de pulsar Enter, el siguiente Tab tiene que caer en el contenido, no volver al menú.

¿Qué es el indicador de foco?

La marca visible, normalmente un contorno, que muestra qué elemento tiene el foco del teclado. Los navegadores dibujan uno por defecto. Quitarlo sin poner otro deja a quien usa el teclado sin saber dónde está en la página.

¿Qué es una trampa de teclado?

Una parte de la página en la que el foco puede entrar pero de la que no puede salir con el teclado, como un widget incrustado. Un diálogo puede retener el foco mientras está abierto, siempre que se sepa cómo salir, normalmente con Esc.

¿Cómo pruebo la navegación con teclado de mi web?

Haz clic en la barra de direcciones, aparta el mouse y recorre toda la página con Tab. Comprueba que siempre ves el foco, que el orden sigue el de lectura y que cada menú, formulario y diálogo se abre, funciona y se cierra.

Fuentes

Consultadas el 4 de noviembre de 2026. Iniciativa de Accesibilidad Web del W3C, en inglés: Understanding Success Criterion 2.1.1: Keyboard, Understanding Success Criterion 2.1.2: No Keyboard Trap, Understanding Success Criterion 2.4.1: Bypass Blocks, Understanding Success Criterion 2.4.3: Focus Order, Understanding Success Criterion 2.4.7: Focus Visible y Understanding Success Criterion 2.4.11: Focus Not Obscured (Minimum). NN/g, en inglés: Keyboard-Only Navigation for Improved Accessibility. web.dev: Aspectos básicos del acceso al teclado. MDN: :focus-visible. Nuestro caso: nuestras propias páginas usadas solo con el teclado en un navegador el 4 de noviembre de 2026.

Pedro Galindez

Pedro Galindez

Fundador de Feedback Studios, estudio de crecimiento bilingüe en Miami.

Escuchar0:00 /7:00

Más guías

Revisada 4 de noviembre de 2026

Velocidad web: cómo hacer que tu sitio cargue más rápido

Por qué importa la velocidad de una web, qué frena una página, cómo acelerarla paso a paso, laboratorio y visitas reales, y lo que medimos y arreglamos en nuestra web.

Revisada 4 de noviembre de 2026

HTTP/2 y HTTP/3: qué cambian para tu web

Qué cambian HTTP/2 y HTTP/3 respecto a HTTP/1.1, qué dice Google sobre el SEO, cómo comprobar tu web y qué usan nuestra web y los rastreadores.

Revisada 4 de noviembre de 2026

Rastreadores de IA: qué bots visitan tu web y cómo controlarlos

Bots de entrenamiento, de búsqueda y de usuario de OpenAI, Anthropic, Perplexity, Google y Apple, cómo los controla el robots.txt y cuáles visitaron nuestra web.

Revisada 3 de noviembre de 2026

Anuncios en YouTube: formatos, qué pagas y cómo empezar

Cómo funcionan los anuncios de YouTube, los seis formatos con su duración y qué pagas, cómo lanzar el primero y nuestros videos frente a los límites.

Revisada 3 de noviembre de 2026

Marketing por SMS para un negocio pequeño: consentimiento, primer mensaje y bajas

Qué necesita el marketing por SMS antes del primer mensaje: consentimiento por tipo de mensaje, el registro, la confirmación, STOP y nuestro caso.

Revisada 3 de noviembre de 2026

Tasa de clics (CTR): qué es y cómo mejorarla

Qué mide la tasa de clics en Google Ads y en Search Console, cómo se calcula, qué es una buena CTR, los pasos a seguir y nuestras propias cifras.

Siguiente paso

Cuéntanos qué necesitas

Escríbenos por WhatsApp o envíanos un mensaje. Respondemos en español o en inglés.