What Confetti provides
- Reduced motion: the animation is suppressed automatically when prefers-reduced-motion: reduce is set. No implementation work required.
- Screen readers: the canvas overlay carries no semantic content and does not interrupt focus or trigger announcements.
- Keyboard and focus: Confetti does not trap or shift focus when it appears or fades out.
What you need to provide
- A paired Alert: since the animation is invisible to screen readers and suppressed for reduced motion users, the Alert is the sole accessible indicator of completion. It must always be present and must clearly communicate what was achieved.
- Meaningful surrounding content: include a heading confirming the milestone, a description of next steps if relevant, and a clear primary action. Don't rely on the animation to communicate success.
Color contrast
Confetti is a decorative animation and does not display text or interactive elements. Standard contrast requirements do not apply to the animation itself. Ensure all paired content — Alert, heading, description, and actions — meets WCAG 2.1 AA contrast requirements.