Accesibilidad

Lineamientos WCAG 2.1 AA para todos los productos Codeway. Accesibilidad como estándar, no como feature.

Estándar mínimo

WCAG 2.1 AA ✓

Requerido para todos los productos

WCAG 2.1 AAA

Aspiracional donde sea posible

Contraste de color

ElementoRatio mínimoEjemplo
Texto normal (<18px)4.5:1#fafafa sobre #000 = 19.3:1 ✓
Texto grande (≥18px bold)3:1#a1a1aa sobre #000 = 8.5:1 ✓
Elementos UI (borders, icons)3:1#3f3f46 sobre #000 = 2.7:1 ⚠️
Decorativo / deshabilitadoN/ASin requisito

Nota: zinc-700 (#3f3f46) en borders decorativos no requiere contraste AA, pero elementos interactivos sí.

Navegación por teclado

/* Reglas de focus */
/* 1. Todos los elementos interactivos deben ser focusables */
/* 2. Focus visible siempre (no outline: none sin reemplazo) */
/* 3. Orden lógico de tab (no tabindex > 0) */

/* Nuestro estilo de focus ring */
.focus-visible:outline-none
.focus-visible:ring-2
.focus-visible:ring-blue-500
.focus-visible:ring-offset-2
.focus-visible:ring-offset-black

/* Keyboard shortcuts (web) */
Esc     → Cerrar modal/dropdown
Tab     → Siguiente elemento
Shift+Tab → Anterior elemento
Enter   → Activar botón/link
Space   → Activar checkbox/button
Arrow   → Navegar en listas/tabs

ARIA patterns

/* Button */
<button aria-label="Cerrar" aria-disabled={disabled}>

/* Modal */
<div role="dialog" aria-modal="true" aria-labelledby="title">

/* Tabs */
<div role="tablist">
  <button role="tab" aria-selected={true} aria-controls="panel-1">
  
/* Alert */
<div role="alert" aria-live="polite">

/* Loading */
<div aria-busy="true" aria-label="Cargando contenido">

/* Form errors */
<input aria-invalid="true" aria-describedby="error-msg">
<p id="error-msg" role="alert">Error message</p>

/* Toggle */
<button role="switch" aria-checked={checked}>

Accesibilidad mobile

iOS (VoiceOver)

  • • accessibilityLabel en todos los elementos
  • • accessibilityHint para acciones no obvias
  • • accessibilityTraits correctos (.button, .header)
  • • Soporte de Dynamic Type (fuentes escalables)
  • • Test con VoiceOver en dispositivo real

Android (TalkBack)

  • • contentDescription en elementos visuales
  • • importantForAccessibility configurado
  • • accessibilityRole en Compose
  • • Soporte de font scaling del sistema
  • • Test con TalkBack y Accessibility Scanner

Checklist pre-release

  • ☐Contraste de texto cumple 4.5:1 (AA)
  • ☐Todos los elementos interactivos son focusables por teclado
  • ☐Focus ring visible en todos los elementos interactivos
  • ☐Imágenes tienen alt text descriptivo
  • ☐Formularios tienen labels asociados
  • ☐Errores se comunican con role="alert"
  • ☐Modals atrapan el focus (focus trap)
  • ☐Animaciones respetan prefers-reduced-motion
  • ☐Touch targets ≥ 44px en mobile
  • ☐VoiceOver / TalkBack testeado en flujo principal