El foco de teclado es la marca visual que indica qué enlace o campo va a activarse si alguien pulsa Intro navegando sin ratón. Al pulsar el tabulador debería verse un contorno saltando de un elemento a otro, y en buena parte de las webs de despachos ese contorno desaparece a las pocas pulsaciones o queda tapado por el banner de cookies. El 95,9% de las páginas analizadas en el informe WebAIM Million 2026 incumple algún criterio de accesibilidad, y el foco de teclado es de los que menos se revisa porque solo lo nota quien no usa ratón: es la diferencia entre un formulario que se rellena sin ver el ratón y uno que expulsa a quien lo intenta.
El foco de teclado es el contorno visible que señala el elemento activo al pulsar la tecla Tab. La norma WCAG 2.2 exige que ese contorno nunca desaparezca (criterio 2.4.7) y que ningún elemento fijo lo tape (criterio 2.4.11, nuevo en esta versión); el fallo más habitual que lo rompe es una sola línea de CSS: outline: none.
El foco de teclado marca tu navegación sin ratón
Cualquier persona que no pueda o no quiera usar el ratón —por una lesión temporal, por una discapacidad motriz o simplemente porque trabaja con el teclado todo el día— se mueve por una web pulsando Tab. Cada pulsación desplaza el foco al siguiente elemento interactivo: un enlace del menú, un campo del formulario, el botón de enviar. Sin un indicador visible, esa persona pulsa Tab a ciegas y no sabe si está a punto de activar el botón de enviar el presupuesto o el de borrar un campo. El criterio 2.4.7 de WCAG, vigente desde la versión 2.0 y mantenido en WCAG 2.2 con nivel AA, exige justamente eso: que exista siempre un modo de usar la web donde el foco se vea.
Un elemento tiene foco cuando es el que va a recibir la siguiente pulsación de teclado: ahí es donde Intro, la barra espaciadora o las flechas producen efecto.
outline:none, el error de CSS más repetido
La causa más repetida de un foco invisible no es un navegador antiguo: es una regla de CSS que algún diseñador añadió para quitar el contorno azul porque no pegaba con la web. La regla outline: none aplicada a enlaces o botones apaga el foco en todos ellos a la vez, sin avisar. Los widgets de accesibilidad que prometen arreglarlo con una línea de código no tocan esta capa.
Cómo recuperar el foco sin perder el diseño
Quitar el contorno azul por defecto no es el problema: el problema es no sustituirlo por nada. La solución es sencilla: en vez de outline: none, se usa la pseudoclase :focus-visible, que solo aplica el estilo cuando el elemento recibió el foco por teclado y lo deja en paz con un clic de ratón. El contorno puede sustituirse por un box-shadow del color de marca: lo único que no puede faltar es alguna señal. Si el contorno por defecto no encaja con la identidad visual, la respuesta no es eliminarlo: es diseñar uno propio.
El contraste de 3:1 que pide el criterio 1.4.11
Tener un contorno no basta si se confunde con el fondo. El criterio 1.4.11 de WCAG, contraste no textual y vigente desde la versión 2.1, exige una relación mínima de 3:1 entre el foco y el color de detrás, el mismo mínimo pedido para iconos y bordes. Un contorno gris claro sobre fondo blanco, habitual en muchas plantillas, no llega a ese mínimo aunque exista. Comprobarlo no exige herramientas: basta con poner el foco sobre cada botón y mirar si se distingue sin acercarse a la pantalla.
Elementos fijos que esconden el foco al tabular
Un contorno bien diseñado tampoco sirve si algo se pone encima. WCAG 2.2 incorporó el criterio 2.4.11, foco no oculto, precisamente porque el problema había cambiado: ya no era solo que el contorno no existiera, sino que existía y quedaba tapado por una cabecera fija, un banner de cookies o el widget de chat que se superpone al contenido mientras alguien tabula. El criterio exige que el elemento con foco siga siendo al menos parcialmente visible en todo momento.
- Una cabecera o un menú fijo que se queda pegado arriba al hacer scroll.
- El banner de cookies, cuando se coloca fijo en la parte inferior de la pantalla.
- El widget de chat o de WhatsApp Business, que suele anclarse en una esquina por encima de todo lo demás.
El banner de cookies que tapa el botón enfocado
El caso más frecuente en despachos es el banner de cookies fijo en la parte inferior. Alguien pulsa Tab varias veces para llegar al botón de aceptar y el foco se desplaza hasta un enlace del pie de página que el banner cubre por completo: visualmente no hay ningún contorno, aunque el navegador insista en que algo está enfocado. La corrección no es compleja —basta con que el banner reserve un margen o se desplace cuando detecta un elemento enfocado dentro de esa zona— pero exige probarlo con el teclado, no solo con el ratón, porque con ratón el problema nunca aparece.
La navegación por teclado decide si el lead convierte
Nadie rellena un formulario de contacto a ciegas. Quien tabula un campo tras otro necesita ver en todo momento en qué casilla está escribiendo, y si el foco desaparece entre el campo de teléfono y el de mensaje, la reacción habitual no es insistir: es cerrar la pestaña y buscar otro despacho. Ya se explicó qué otros detalles del formulario de contacto ahuyentan a quien iba a convertirse en cliente, y el foco de teclado invisible es uno de los que menos se detecta en una revisión superficial, porque con el ratón todo funciona.
Comprobarlo en la propia web lleva menos de cinco minutos:
- Entrar en la página de contacto y pulsar Tab repetidamente desde la barra de direcciones.
- Comprobar que cada campo, cada enlace y el botón de enviar muestran un contorno visible y distinto del fondo.
- Repetir el recorrido con el banner de cookies todavía abierto, que es cuando más fallos aparecen.
Lo que cambia para tu despacho desde 2025
Desde el 28 de junio de 2025 la normativa europea de accesibilidad alcanza a buena parte de los servicios digitales que operan en la Unión, aunque no todos los despachos entran dentro del mismo alcance ni con los mismos plazos: ya se detalló qué parte de esa obligación llega realmente a un despacho de abogados en este artículo. Lo que no depende de estar o no dentro del alcance legal es si el foco de teclado funciona: eso lo nota cualquier visitante que lo necesite, con ley de por medio o sin ella.
Un banner de cookies que oculta el botón enfocado no es solo un fallo de accesibilidad: es el mismo tipo de diseño que ya se trata como patrón oscuro cuando dificulta rechazar las cookies, aunque aquí el motivo sea otro. Y si al repasar la web aparecen varios de estos fallos a la vez —foco invisible, banner que tapa botones, menú fijo sin probar con teclado—, el problema normalmente no es un parche puntual: es que toca plantearse cuándo renovar la web entera.
Preguntas frecuentes sobre el foco de teclado
¿Qué significa tabular una web?
Tabular significa pulsar la tecla Tab para moverse de un elemento interactivo a otro sin usar el ratón: de un enlace del menú al siguiente, de un campo del formulario al de abajo. Mayús+Tab recorre la web en sentido inverso. Es el método de navegación de quien no usa ratón y también el que usan muchos usuarios avanzados por rapidez.
¿Por qué desaparece el foco al quitar el contorno azul?
Desaparece porque alguien aplicó la regla CSS outline: none a los enlaces o botones para eliminar ese contorno por estética, sin añadir ningún estilo que lo sustituya. El navegador seguía moviendo el foco internamente, pero sin ninguna señal visual que lo acompañara.
¿:focus-visible funciona en todos los navegadores?
Sí, Chrome, Firefox, Safari y Edge lo soportan desde hace varias versiones. Su ventaja frente a :focus es que solo muestra el contorno cuando el elemento se activó con teclado, y lo deja oculto cuando se hizo clic con el ratón, así que no cambia el aspecto habitual de la web para la mayoría de visitantes.
¿Cómo compruebo el foco de teclado de mi web?
Sin instalar nada: entra en la web, haz clic en la barra de direcciones y pulsa Tab varias veces seguidas. Si en algún punto no se ve ningún contorno, o el contorno queda tapado por el banner de cookies o el chat, ahí hay un fallo que conviene corregir antes de que lo encuentre un cliente potencial.
Fuente: W3C – WCAG 2.2, Understanding Focus Not Obscured (Minimum)