UX y accesibilidad
Objetivo WCAG 2.2 AA con verificación de contraste, teclado, foco y estados.
La conformidad debe comprobarse en cada consumidor. HeroUI y React Aria aportan comportamiento de base; overrides, composición y contenido pueden romperlo.
Requisitos
- Texto 4.5:1, texto grande 3:1 y componentes/foco 3:1 cuando corresponda.
- Teclado completo, orden lógico, foco visible y no oculto por cabeceras o toast.
- Targets del sistema de 44 × 44 px; esta regla supera algunos mínimos normativos.
- Nombres y etiquetas persistentes. Un icono aislado necesita nombre accesible.
- Estado mediante texto y/o icono, además del color. Gráficos con tabla equivalente.
- Reflow, zoom 200 % y ajuste de espaciado del texto sin pérdida de acciones.
- Reducción de movimiento. Sin animación necesaria para entender la información.
- Autenticación compatible con gestores y pegado; no bloquearlos por estética.
Mensajes y foco
Status para confirmaciones no urgentes; alert solo para interrupciones que requieren atención. No anunciar dos veces el mismo mensaje. Un toast no roba foco; cerrar devuelve foco a un disparador disponible. Dialog modal contiene foco y lo devuelve al contexto.
No mostrar contenido sensible en notificaciones del sistema o capturas compartidas. Mostrar una referencia abreviada cuando el detalle no sea necesario.
Validación
Comprobar ambos temas, los tres modos, densidad compacta y estados default/hover/pressed/focus/disabled/loading/error. Revisar lector de pantalla con una tarea real y contenido de producción. La guía registra checks técnicos; no declara certificación global de accesibilidad.
Los colores semánticos de v6 calculados contra sus fondos suaves tienen contraste de texto superior a 4.5:1; eso no valida cada combinación posible de un consumidor.
Referencia normativa: W3C, guía rápida WCAG 2.2. Validar criterios aplicables a cada tarea; el target de 44 px es una regla del sistema.