WCAG: Operable

Resumen

El segundo principio de WCAG establece que los componentes de la interfaz y la navegación deben ser operables. Los usuarios deben poder operar la interfaz independientemente de su método de input.

Directrices

2.1 Accesible por Teclado

• •Toda funcionalidad disponible desde teclado
• •Sin "trampas de teclado"
• •Atajos de teclado configurables
• •Tab order lógico

Teclas Estándar

• •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"