Navegación por teclado

Definición Técnica

La navegación por teclado es la capacidad de usar completamente un sitio web o aplicación mediante el teclado, sin necesidad de un mouse o dispositivo señalador. Es un requisito fundamental de accesibilidad (WCAG 2.1.1) y esencial para usuarios con discapacidad motora, usuarios de tecnologías de asistencia y cualquier persona que prefiera usar el teclado.

Teclas Principales

Navegación Básica

• Tab: Mover foco al siguiente elemento interactivo
• Shift+Tab: Mover foco al elemento anterior
• Enter / Espacio: Activar elemento enfocado (botones, enlaces)
• Esc: Cerrar modales, menús, cancelar acciones

Navegación Avanzada

• Flechas: Navegar dentro de componentes (listas, menús, grids)
• Home / End: Ir al inicio/fin de línea o lista
• Page Up / Page Down: Desplazarse por páginas
• Atajos de teclado: Combinaciones personalizadas (Ctrl+S, etc.)

Elementos Enfocables

Por Defecto

• Enlaces: <a href>
• Botones: <button>
• Campos de formulario: <input>, <select>, <textarea>
• Elementos con tabindex: Cualquier elemento con tabindex="0" o mayor

Hacer Elementos Enfocables

<!-- ✅ Correcto: Elemento enfocable -->
<div role="button" tabindex="0" onclick="action()">
  Hacer acción
</div>

<!-- ⚠️ Preferible: Usar elemento semántico -->
<button onclick="action()">Hacer acción</button>

Errores Comunes

❌ Elementos No Enfocables

<!-- ❌ Incorrecto: Div que debería ser botón -->
<div onclick="submit()">Enviar</div>
<!-- No se puede activar con teclado -->

<!-- ✅ Correcto: Botón semántico -->
<button type="submit">Enviar</button>
<!-- Se puede activar con Enter o Espacio -->

❌ Dependencia de Mouse

<!-- ❌ Incorrecto: Solo funciona con mouse -->
<div onmouseover="show()" onmouseout="hide()">
  Contenido
</div>

<!-- ✅ Correcto: También funciona con teclado -->
<div 
  onmouseover="show()" 
  onmouseout="hide()"
  onfocus="show()" 
  onblur="hide()"
  tabindex="0">
  Contenido
</div>

Componentes Comunes

Menús Desplegables

<!-- ✅ Correcto: Menú accesible por teclado -->
<button 
  aria-expanded="false"
  aria-controls="menu"
  onclick="toggleMenu()">
  Menú
</button>
<ul id="menu" role="menu" aria-hidden="true">
  <li role="menuitem"><a href="/">Inicio</a></li>
  <li role="menuitem"><a href="/productos">Productos</a></li>
</ul>

<script>
function toggleMenu() {
  const menu = document.getElementById('menu');
  const button = document.querySelector('button');
  const isExpanded = menu.getAttribute('aria-hidden') === 'false';
  
  menu.setAttribute('aria-hidden', isExpanded);
  button.setAttribute('aria-expanded', !isExpanded);
  
  if (!isExpanded) {
    menu.querySelector('a').focus(); // Mover foco al menú
  }
}
</script>

Modales

<!-- ✅ Correcto: Modal accesible por teclado -->
<div role="dialog" aria-labelledby="modal-title" aria-modal="true">
  <h2 id="modal-title">Confirmar acción</h2>
  <button onclick="cerrar()">Cerrar</button>
  <button onclick="confirmar()">Confirmar</button>
</div>

<script>
function abrirModal() {
  const modal = document.querySelector('[role="dialog"]');
  modal.style.display = 'block';
  modal.querySelector('button').focus(); // Mover foco al modal
  // Atrapar foco dentro del modal
}

function cerrarModal() {
  const modal = document.querySelector('[role="dialog"]');
  modal.style.display = 'none';
  document.querySelector('[onclick="abrirModal()"]').focus(); // Restaurar foco
}
</script>

Criterio WCAG 2.1.1

Teclado (Nivel A): Toda la funcionalidad del contenido es operable mediante una interfaz de teclado sin requerir una velocidad específica de pulsación de teclas.

Testing

Checklist

• Todos los enlaces son activables con Enter
• Todos los botones son activables con Enter o Espacio
• Los formularios son completables solo con teclado
• Los menús desplegables funcionan con teclado
• Los modales se pueden cerrar con Esc
• El orden de tabulación es lógico
• No hay trampas de foco
• El foco es visible en todos los elementos

Referencias

• WCAG 2.1.1 Keyboard
• WebAIM - Keyboard Accessibility

Términos Relacionados

• Foco
• Orden de tabulación
• Indicador de foco visible
• Gestión de foco