Accesibilidad · AA

Teclado & foco visible

Patrones para que tu interfaz se pueda usar sin ratón y el foco se vea siempre claro. Aquí se resumen las bases para headers, menús, botones, modales y pequeños componentes.

Cómo usar estos patrones

La idea es que cualquier persona pueda navegar con Tab, Enter, Espacio y Esc sin perderse en la interfaz.

Este apartado recoge ejemplos y reglas mínimas para que la navegación por teclado sea predecible y el foco siempre sea visible. No entra al detalle de todos los roles posibles, pero te da una base aplicable a la mayoría de webs y productos.

• Piensa el orden de tabulación como una lectura lógica: primero header, luego navegación principal, después contenido y por último el pie.

• El foco visible no es un adorno: es el indicador de dónde está la acción. Si no se ve, la interfaz se rompe para quien usa teclado u otras ayudas técnicas.

• Los componentes interactivos (botones, links, inputs, toggles…) deben ser alcanzables con teclado y mantener un estilo de foco coherente en todo el sistema.

• Usa estos bloques como guía visual cuando montes tus propios componentes en diseño UI o en código.

Prueba rápida: deja el ratón a un lado y recorre tu interfaz con Tab, Shift+Tab, Enter y Esc. Si te pierdes o el foco desaparece, hay trabajo por hacer.

Patrones mínimos de teclado & foco

Cada tarjeta describe un patrón que puedes aplicar directamente a tu sistema de diseño.

01. Focus ring consistente

Base visual de foco

Define un estilo de foco reutilizable para todos los componentes interactivos: botones, enlaces, inputs, cards clicables… Debe tener buen contraste, ser reconocible y no depender solo del color de fondo.

  • Usa un anillo de foco que se vea incluso con zoom o baja calidad de pantalla.
  • Evita eliminar el foco por defecto sin ofrecer una alternativa clara.
  • El estilo puede incluir halo, borde doble o glow suave, pero siempre legible.
Enlace con foco
Foco visible AA Aplicar a todo componente interactivo

02. Skip link visible al enfocar

Acceso directo al contenido

Un enlace “Saltar al contenido” al principio de la página permite llegar rápido al contenido principal sin atravesar todo el menú en cada página.

  • El enlace puede quedar oculto visualmente, pero debe aparecer al recibir foco.
  • Apunta a la región principal de la página (generalmente el elemento <main>).
  • Usa contraste alto y un diseño claro cuando se muestra.
Ejemplo: Saltar al contenido
Recomendado en todas las páginas

03. Orden de tabulación lógico

Estructura de navegación

El orden con el que Tab recorre los elementos debe seguir la jerarquía visual y la estructura del contenido, sin saltos inesperados.

  • La secuencia habitual: logo → navegación principal → botón de acción → contenido.
  • Evita forzar ordenes raros con tabindex salvo casos muy justificados.
  • Elementos que no son interactivos no deberían ser alcanzables con Tab.
Tab se mueve de forma predecible

04. Menú accesible por teclado

Header & navegación

Los menús (incluido el hamburguesa en móvil) deben poder abrirse, recorrer sus opciones y cerrarse usando solo el teclado.

  • El botón que abre el menú debe funcionar con Enter y Barra espaciadora.
  • Una vez abierto, el foco debe quedarse dentro del menú hasta que se cierre.
  • La tecla Esc debería cerrar el menú y devolver el foco al botón que lo abrió.
Fundamental en mobile Evitar “menús trampa” sin foco

05. Botones, enlaces y áreas clicables

Componentes interactivos

Todo elemento que se percibe como clicable debe ser alcanzable por teclado y mostrar foco. Si algo parece un botón, que se comporte como tal.

  • No uses solo <div> o <span> clicables sin rol y sin gestión de foco.
  • Diferencia visualmente enlaces (accionan navegación) de botones (accionan estado o lógica interna).
  • Haz que las áreas clicables sean lo bastante grandes para apuntar con precisión.
Enlace de texto
Evita clics fantasma Foco en todo lo interactivo

06. Modales y diálogos controlados

Overlays & diálogos

Cuando abres un modal, el foco debe moverse dentro de él, quedar atrapado mientras esté abierto y volver al elemento que lo lanzó al cerrarse.

  • Al abrir, envía el foco al título o al primer control útil del diálogo.
  • Durante el modal, Tab no debería salir a contenido de fondo.
  • Al cerrar, Esc y el botón de cerrar deben devolver el foco al disparador original.
Patrón clave para UX complejas

Checklist rápido de teclado & foco

Úsalo como repaso final antes de dar por buena la experiencia con teclado.

7 preguntas clave

  • 1

    ¿Puedes recorrer toda la página solo con Tab y Shift+Tab sin quedarte bloqueado?

  • 2

    ¿El foco visible se ve siempre, en todos los botones, enlaces e inputs?

  • 3

    ¿Los menús (incluido el hamburguesa) se pueden abrir, recorrer y cerrar con teclado sin que el foco “salte” a sitios raros?

  • 4

    ¿Los modales y overlays atrapan el foco mientras están abiertos y lo devuelven al disparador al cerrarse?

  • 5

    ¿Los elementos que parecen clicables se pueden activar con Enter o Espacio (y no solo haciendo clic con el ratón)?

  • 6

    ¿Puedes llegar al contenido principal rápidamente con un enlace de “Saltar al contenido”?

  • 7

    ¿Existen sitios donde el foco desaparece, se pierde fuera de pantalla o entra en un bucle? Si la respuesta es sí, conviene revisarlos.