Accesibilidad

Interfaces que funcionan para quienes las usan. Cada componente de ssntl/ui es accesible por defecto, sin nada que configurar.

Respeta el movimiento reducido

Cada animación respeta prefers-reduced-motion: el desplazamiento, la escala y el desenfoque se apagan y el cambio ocurre de una vez. Un fundido sin movimiento puede quedarse.
El resultado sigue ocurriendo
Una hoja se abre, un acordeón se expande, un toast llega.
Los gestos que regresan, como arrastrar un Sheet o deslizar un Toast, se asientan de inmediato.

El estado vive en el DOM y en palabras: aria-expanded, aria-pressed, aria-checked, aria-invalid, aria-busy y texto visible.
Un shake viene con un mensaje de error, un shimmer con “Cargando” para lectores de pantalla, y un switch llena su riel, así encendido y apagado se leen sin la animación.

Los componentes renderizan elementos reales: los botones siguen siendo <button>, los encabezados siguen siendo encabezados y los campos conservan su <label>.
Las capas decorativas (íconos, halos, el brillo del shimmer, los fondos) llevan aria-hidden o se dibujan en pseudoelementos, así la tecnología de asistencia las salta.
Las primitivas de Radix aportan roles, estado ARIA y manejo del foco en menús, diálogos, tabs, acordeones, sliders y switches.

Todo funciona con el teclado, con las teclas que la gente espera: flechas en menús, tabs y sliders; Escape cierra las capas; el foco vuelve a lo que las abrió.
El foco siempre se ve
Un anillo de 2px separado del control, nunca se quita.
Las áreas táctiles miden 48px o más, aunque el control se vea más pequeño, como el pulgar de 20px del slider. Los grupos densos, como los puntos del carrusel, miden 48px de alto y al menos 32px de ancho, por encima de los 24px de WCAG.

El texto cumple 4.5:1 y los controles 3:1 en claro y oscuro. Cada par se mide en el lint, así un cambio que rompe el contraste falla el build.

Las animaciones usan propiedades que resuelve el compositor: translate, scale, rotate, opacity y filter.
Tres excepciones, cada una porque un tamaño real tiene que cambiar: Accordion y Collapsible animan la altura (220ms), el punto actual del Carousel crece en ancho para que sus extremos sigan redondos, y el Pill accordion convierte una píldora en tarjeta (400ms). Las tres se apagan con movimiento reducido.
will-change solo donde el primer cuadro tiembla; los efectos en bucle como el shimmer animan solo translate.