Tab: Navegar entre elementos
Enter/Space: Activar
Escape: Cerrar/cancelar
Flechas: Navegar dentro de componentes
Home/End: Primero/último

<!-- Elemento focusable por defecto -->
<button>Click me</button>

<!-- Hacer div focusable (evitar cuando posible) -->
<div role="button" tabindex="0" onkeydown="handleKey(event)">Click me</div>

2.2 Tiempo Suficiente

Permitir extender límites de tiempo
Pausar contenido en movimiento
No hay límites de tiempo a menos que sea esencial
Interrupciones controlables

Implementación

Warnings antes de timeout
Opción de extender sesión
Autoguardado de trabajo
Sin carruseles automáticos no pausables

2.3 Convulsiones y Reacciones Físicas

Nada parpadea más de 3 veces por segundo
Evitar contenido que causa convulsiones
Animaciones de movimiento desactivables

/* Respetar preferencias del usuario */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

2.4 Navegable

Bypass blocks (skip links)
Títulos de página descriptivos
Orden de foco lógico
Propósito de links claro
Múltiples formas de encontrar páginas

<!-- Skip link -->
<a href="#main" class="skip-link">Saltar al contenido</a>

<!-- Visible on focus -->
<style>
  .skip-link:not(:focus) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
</style>

2.5 Modalidades de Input

Gestos simples como alternativa a complejos
Cancelación de pointer (no activar en down)
Labels accesibles para controles de voz
Activación por movimiento desactivable

Criterios de Éxito Clave

Focus Visible

Focus indicator siempre visible
Alto contraste con el fondo
No remover outline sin alternativa

/* Malo */
:focus {
  outline: none;
}

/* Bueno */
:focus {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

/* Mejor - solo keyboard */
:focus:not(:focus-visible) {
  outline: none;
}
:focus-visible {
  outline: 2px solid #005fcc;
}

Touch Targets

Mínimo 44x44 CSS pixels (WCAG 2.2)
Spacing adecuado entre targets
Áreas de tap suficientes

Aplicación Práctica

Modales/Dialogs

Focus trapped dentro del modal
Escape cierra el modal
Focus retorna al trigger al cerrar
Aria-modal="true"

Menús Dropdown

Abrir con Enter/Space
Navegar con flechas
Cerrar con Escape
Focus visible en opciones

Formularios

Tab order sigue visual order
Labels clickeables
Error messages asociados
Submit con Enter

Carruseles

Botones de pausa
Navegación por teclado
No autoplay si tiene contenido importante

Ejemplos

Slack: Excelente navegación por teclado
GitHub: Shortcuts de teclado comprensivos
Google Docs: Accesibilidad de teclado completa
Notion: Cmd+K para navegación

Anti-patterns

❌ Solo funciona con mouse
❌ Outlines removidos sin alternativa
❌ Trampas de focus (no se puede salir)
❌ Timeouts sin warning
❌ Carruseles automáticos no pausables

Métricas

Keyboard-Only Testing: Completar tareas sin mouse
Focus Order Audit: Tab sequence lógica
Touch Target Size: Cumplimiento de 44px
Time-Based Function Review: Timeouts documentados

Principios Relacionados

[[wcag-perceivable]] - Principio anterior
[[wcag-understandable]] - Siguiente principio
[[fitts-law]] - Tamaño de targets

Referencias

W3C. "WCAG 2.1 Guideline 2: Operable"
https://www.w3.org/WAI/WCAG21/Understanding/operable
WebAIM. "Keyboard Accessibility"

wcag-operable

WCAG: Operable

Resumen

Directrices

2.1 Accesible por Teclado

Teclas Estándar