CSS animation longer than 5 seconds Accessibility Checkpoint

Description

Don’t use CSS animations that run for more than 5 seconds without giving the user a way to turn them off.

Help

Reduce the duration of the animation to less than 5 seconds, or use the @media (prefers-reduced-motion: reduce) media query (supported by all modern browsers) to disable the animation for users who request reduced motion.

Applicable standards

• WCAG 2.0 (Success Criteria: 2.2.2 level A)
• WCAG 2.1 (Success Criteria: 2.2.2 level A)
• WCAG 2.2 (Success Criteria: 2.2.2 level A)
• Section 508 (2017) (Success Criteria: 2.2.2 level A)
• EN 301 549 (Success Criteria: 2.2.2 level A)

Note: Section 508 Refresh (2017) checkpoints are equivalent to WCAG 2.0 level A and level AA checkpoints. EN 301 549 checkpoints are equivalent to WCAG 2.1 level A and level AA checkpoints.

Change history

• 6.54 Oct 2024 Don’t fire for progress bars.
• 5.35 Oct 2019 Only fire if animation is played.
• 5.30 Jul 2018 Added.

This page describes a web site issue detected in HTML documents by SortSite Desktop and OnDemand Suite.

Rule ID: AccCssAnimationAutoplay