¿Cómo puedo asegurar que mi sitio sea navegable usando solo el teclado?

Aprende a optimizar tu web para una navegación exclusiva con teclado: orden del foco, elementos interactivos, tabindex y enlaces de «saltar al contenido».

Orden lógico del foco:
La navegación con el tabulador sigue el orden de los elementos en el DOM. Asegúrate de que el flujo de tu contenido sea lógico y coherente. Lo que ves visualmente debería coincidir con el orden de tabulación.
Elementos interactivos accesibles:
Por defecto, enlaces (<a> con href), botones (<button>) y controles de formulario (<input>, <select>, <textarea>) son enfocables. Utiliza estos elementos semánticos siempre que sea posible.
Indicador de foco visible: es crucial que los usuarios sepan qué elemento tiene el foco. Por defecto, los navegadores proporcionan un contorno (outline), pero a menudo se elimina por estética (outline: none;). ¡No lo hagas sin proporcionar una alternativa clara! Personaliza el estado :focus para que sea evidente.
/* Un ejemplo de indicador de foco personalizado y accesible */
a:focus, button:focus, input:focus, select:focus, textarea:focus {
outline: 2px solid #007bff; /* Un contorno azul bien visible */
outline-offset: 2px;
box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.25); /* Un brillo sutil adicional */
}
tabindex con precaución:
- tabindex="0": permite que un elemento que normalmente no es enfocable (como un <div> con un evento de clic) se incluya en el orden natural de tabulación.
  <div tabindex="0" role="button" onclick="miFuncion()">Acción</div>
- tabindex="-1": permite que un elemento sea enfocable mediante programación (con JavaScript, usando elemento.focus()), pero lo excluye del orden de tabulación natural. Útil para gestionar el foco en componentes dinámicos.
- Evita tabindex con valores positivos (ej. tabindex="1", tabindex="2"), ya que crean un orden de tabulación confuso y poco mantenible.
Enlaces de «saltar al contenido»:
para páginas con mucha navegación, incluye un enlace al principio del <body> que permita a los usuarios saltar directamente al contenido principal. Este enlace puede estar oculto visualmente hasta que recibe el foco.
<body> <a href="#contenido-principal" class="skip-link">Saltar al contenido principal</a>
<header>
</header>
<main id="contenido-principal">
</main>
</body> CSS.skip-link {
position: absolute;
top: -40px; /* Oculto fuera de la pantalla */
left: 0;
background: #000;
color: white;
padding: 8px; z-index: 100;
}
.skip-link:focus { top: 0; /* Visible al recibir foco */ }

Siguiendo estos puntos, mejorarás significativamente la navegabilidad por teclado de tu sitio.

¿Tienes alguna duda o pregunta?Envía el formulario y procuraré darle respuesta

Si creees que esto puede ser de utilidad a alguien más, pues... compártelo que es gratis 🙂

Más contenido interesante