La accesibilidad no es un añadido posterior: es un requisito. Apuntamos al cumplimiento de WCAG 2.1 AA como referencia mínima. Cualquier persona debería poder usar Zenovay independientemente de sus capacidades.
Contraste de color
Todo el texto cumple las relaciones mínimas de contraste: 4.5:1 para texto de cuerpo, 3:1 para texto grande. No dependemos solo del color para transmitir significado: los iconos y el texto proporcionan respaldo.
Nuestra paleta de colores fue diseñada con la accesibilidad en mente. Cada color semántico (éxito, advertencia, error) funciona para usuarios daltónicos cuando se combina con iconos apropiados.
Navegación por teclado
Cada elemento interactivo es accesible mediante el teclado. Los estados de enfoque son visibles y consistentes. El orden de tabulación sigue el orden visual. Sin trampas de teclado.
- Tab y Shift+Tab navegan entre elementos
- Enter activa botones y enlaces
- Escape cierra modales y menús desplegables
- Las teclas de dirección navegan dentro de los componentes
Lectores de pantalla
Usamos HTML semántico primero, ARIA cuando es necesario. Las imágenes tienen texto alternativo. El contenido dinámico anuncia los cambios. Los widgets complejos tienen roles y estados adecuados.
- Los encabezados crean la estructura del documento (h1, h2, h3)
- Las listas agrupan elementos relacionados
- Botones vs. enlaces: botones para acciones, enlaces para navegación
- Los campos de formulario tienen etiquetas asociadas
- Las regiones en vivo anuncian actualizaciones dinámicas
Movimiento
Respetamos la media query prefers-reduced-motion. La información esencial nunca se transmite solo a través del movimiento. Las animaciones son sutiles y con propósito.
Los usuarios que prefieren movimiento reducido ven cambios de estado instantáneos en lugar de transiciones. La experiencia es igualmente funcional sin animación.
Pruebas
Probamos la accesibilidad regularmente:
- Pruebas automatizadas con axe-core en CI
- Pruebas manuales de navegación por teclado
- Pruebas con lectores de pantalla VoiceOver y NVDA
- Pruebas de zoom hasta el 200%
- Verificación de contraste de color en Figma