Accessibilité

Chaque composant et chaque effet publié respecte une checklist stricte (mouvement réduit, clavier, contraste élevé, tactile, lecteurs d'écran), vérifiée en review avant publication. Les primitives ne décident pas pour vous : chaque page de primitive indique ce que vous devez faire (mouvement réduit, pause, hors écran).

Mouvement réduit#

Quand l'utilisateur demande moins d'animations (réglage prefers-reduced-motion de son système), les composants et les effets réduisent sans supprimer : un fondu remplace le déplacement, l'état final s'affiche directement, et les effets purement décoratifs se désactivent. Le changement de réglage est pris en compte en direct.

Chaque composant ou effet animé accepte une prop, ou une option de son hook, reducedMotion : "user" (par défaut, suit le système), "always" (toujours réduit) ou "never" (à réserver à un choix explicite de l'utilisateur dans votre interface). Un effet sans mouvement, comme la couleur de ScrollTint, n'en a pas : sa page le précise.

Clavier et lecteurs d'écran#

• Tout ce qui est interactif est utilisable au clavier, avec un focus visible.
• Un effet piloté par le pointeur ne gêne jamais le focus ni le clic.
• Un texte découpé pour être animé reste lu en entier par les lecteurs d'écran.
• Les éléments purement décoratifs sont masqués aux technologies d'assistance.

Animations longues et flashs#

Une animation automatique de plus de cinq secondes doit pouvoir être mise en pause (WCAG 2.2.2). Les animations continues d'O-UI (la lumière de GlowBorder, la respiration de ParticleText) se mettent en pause pour toute la page avec une seule fonction, celle de FrameLoop : un interrupteur dans votre interface suffit.

import { setAnimationsPaused } from "@/components/o-ui/frame-loop/frame-loop-core";

// In your site's pause switch:
setAnimationsPaused(true);

• La page de FrameLoop donne l'interrupteur complet, qui garde le choix du visiteur d'une page à l'autre.
• Les animations continues d'O-UI se mettent aussi en pause d'elles-mêmes hors écran et dans un onglet masqué.
• Vos propres animations suivent cette pause si elles passent par FrameLoop ou s'y abonnent ; une animation GSAP, Motion ou CSS ne la suit pas d'elle-même (voir FrameLoop).

Aucun composant ne produit plus de trois flashs par seconde.

Écrans tactiles#

Les effets qui suivent le pointeur (Magnetic, la réaction au pointeur de GlowBorder et de ParticleText) n'existent qu'avec une souris ou un trackpad. Sur écran tactile, ils se désactivent sans rien bloquer.