UX y accesibilidad
Reglas de interacción y checklist WCAG 2.1 AA que todo producto de Legalty debe cumplir.
La accesibilidad no es una capa final: es una restricción de diseño desde el primer trazo. Estas reglas son obligatorias, no recomendaciones.
Reglas de interacción
Hacer
Foco visible en todos los elementos interactivos, con anillo de acento.
Evitar
Eliminar el outline de foco sin ofrecer una alternativa visible.
Hacer
Estados claros: hover, activo, foco, deshabilitado y cargando, todos distinguibles.
Evitar
Botones que no comunican que están procesando: el usuario hace doble clic.
Checklist de accesibilidad · WCAG 2.1 AA
- Contraste de texto ≥ 4.5:1 (≥ 3:1 para texto grande y elementos de UI).
- Navegación por teclado completa: todo lo que se hace con ratón se hace con teclado.
- Foco visible y orden de tabulación lógico.
- Targets táctiles de al menos 44×44px.
- Etiquetas asociadas a cada control de formulario (
label/aria-label). - Errores anunciados a lectores de pantalla y descritos en texto.
- Movimiento respeta
prefers-reduced-motion. - No solo color: el estado se comunica también con icono o texto.
HeroUI se apoya en React Aria, que aporta gran parte de este comportamiento accesible de base. Nuestra responsabilidad es no romperlo con overrides y verificar el contraste de la marca.