Motion

There are various forms of screen movement for the web including animations, flashing content, user video controls, and slideshows. 

When adding screen movements, techniques must be added to ensure a user has enough time to view the content. Some people are susceptible to seizures caused by strobing, flickering, or flashing effects. Even if an animating or moving object does not cause a seizure, it may cause nausea or dizziness for some people.

Moreover, moving content must be designed in a way that is not excessive and cannot trigger harmful reactions in a user.

Developers should make every effort to ensure that their content does not have strobing, flickering, or flashing effects.

Things to consider when designing a web page with screen movement

User Control:

Providing users flexibility by allowing them to pause, stop, and restart the moving content.

Excessive Movements: 

Avoid adding content that causes excessive movement. To ensure accessibility, blinking, scrolling, and rotating screen movement should be avoided at all costs.

Best Practices

• Content should not contain anything that flashes more than three times during a one-second period
• When moving content is used, user controls (e.g., pause, stop, and play buttons) should be provided.
• When using animated moving content, it is recommended to include text equivalents for them.
• The standard HTML5 “video” element should be used to embed any moving or animated content or clip. User controls will be associated with the moving element to manage the moving item.
• Content should not have strobing, flickering, or flashing effects.

Exceptions

There are no exceptions. Small animating images will not cause seizures, but it is recommended to be avoided.

Test for Accessibility

To check if screen movement on a page are accessible, make sure:

• Inspect multimedia content to determine if pause, stop and play controls are incorporated within the file
• Check for the movement rate visually
• Visually inspect the page for screen movement
• Verify if embedded content is accessible to all users including assistive technology users
• Make sure no content on a webpage starts or changes unexpectedly.

Applicable WCAG Success Criteria

• WCAG 2.1: Animation from Interactions 
• WCAG 2.1: Three Flashes or Below Threshold 
• WCAG 2.1: Pause, Stop, Hide 

References

• CSUN, Web Accessibility Criteria - User Control 
• WebAIM: Seizure and Vestibular Disorders 
• Harvard University, Design for Comprehension
• Yale University, Animated, Moving, Scrolling, Flashing, or Changing Content