Cuando hablamos de “accesibilidad para teclado”, muchas guías se quedan en lo básico: que se pueda tabular por la UI. Pero en productos con usuarios avanzados (operadores, analistas, editores, soporte), el teclado no es una alternativa: es la autopista principal. Si rompes el flujo, bajas la productividad, aumentas errores y haces que la interfaz “se sienta lenta”, incluso si el rendimiento es bueno.
Qué significa “no romper el flujo”
Un flujo de teclado estable tiene cuatro señales: (1) el orden de tabulación es predecible, (2) el foco siempre es visible, (3) las acciones claves son alcanzables sin trampas (modales, menús, overlays) y (4) no hay sorpresas: nada “salta” de lugar cuando interactúas.
Checklist esencial (aplicable en QA)
- ✓
Orden de tabulación lógico
Tab sigue la lectura visual (izq→der, arriba→abajo). Evita saltos por elementos ocultos o fuera de contexto.
- ✓
Foco visible en todo estado
No elimines el outline sin reemplazo. El foco debe verse en botones, enlaces, chips, items de lista, celdas editables y componentes custom.
- ✓
No uses tabindex > 0
Reordena el DOM o usa patrones de foco (p. ej., roving tabindex) en listas/menús. Tabindex positivo crea “mapas secretos” imposibles de mantener.
- ✓
Componentes interactivos son realmente interactivos
Si parece botón, debe ser
<button>(no un<div>con click). Si parece enlace,<a>conhref. Ganas teclado, accesibilidad y semántica. - ✓
Modales y paneles: foco atrapado y retorno
Al abrir, el foco va al título, primer control o acción principal. Dentro, Tab no debe escapar. Al cerrar, el foco vuelve al disparador.
- ✓
Menús, listas y selects: flechas para navegar
Tab entra/sale del componente; flechas mueven el foco interno; Enter/Space confirma. Evita que Tab recorra 40 items en un dropdown.
- ✓
Acciones destructivas: accesibles pero seguras
Enter no debería borrar sin confirmación en contextos de lista. Distingue foco vs. selección, y confirma con un diálogo claro.
- ✓
Atajos (shortcuts) sin colisiones
No secuestres teclas comunes dentro de inputs (p. ej.,
Ctrl/⌘+F,Ctrl/⌘+L). Si usas/para búsqueda, desactívalo cuando el usuario escribe en un campo.
Patrones que suelen fallar (y cómo arreglarlos)
1) “Tarjetas clicables” que no se enfocan
Solución: si toda la tarjeta navega, usa un enlace envolvente real. Si hay múltiples acciones, evita hacer toda la tarjeta un link; mejor: título como enlace + botones con etiquetas claras. Así Tab no se vuelve confuso.
2) Tab que entra en elementos invisibles
Causa típica: elementos ocultos con CSS pero todavía enfocables, o contenido colapsado que permanece en el DOM con controles activos. Solución: cuando algo no es visible/interactable, no debe ser alcanzable por teclado.
3) Overlays que “comen” Escape
Escape es una tecla de salida esperada. Si la usas para otra acción, crea fricción. Regla práctica: Escape cierra (modal, menú, popover) y devuelve el foco al disparador. Si hay riesgos de pérdida de datos, pregunta antes de cerrar, pero mantén la lógica consistente.
Roving tabindex (cuando es la herramienta correcta)
En componentes con muchos ítems (menú, lista de resultados, barra de tabs), un buen enfoque es que solo un elemento tenga tabindex="0" (el “activo”) y el resto -1. Tab entra al componente una vez; las flechas mueven el activo. Esto reduce fatiga y preserva el flujo.
<ul role="listbox">
<li tabindex="0" aria-selected="true">Resultado 1</li>
<li tabindex="-1">Resultado 2</li>
</ul>Micro-checklist para release (5 minutos)
- ¿Puedo completar el flujo principal sin mouse (búsqueda → selección → acción → confirmación)?
- ¿Siempre sé “dónde estoy” por el foco (sin adivinar)?
- ¿Tab no se queda atrapado ni hace recorridos absurdos?
- ¿Enter/Space hacen lo esperado según el control?
- ¿Al cerrar un modal/menú vuelvo exactamente al lugar donde estaba?
Un producto accesible para teclado no solo “cumple”: se siente rápido. Esa sensación es la suma de foco visible, orden predecible y salidas consistentes.
¿Quieres más guías prácticas? Explora el índice en Artículos o vuelve a Inicio.