Use Caution with Animations

Use caution when selecting animations for websites, presentations, and other digital communications. 

Certain types of animations can severely impact people with disabilities. Flashing, sliding and rotating motions can trigger seizures in people with photosensitive epilepsy; or nausea, vertigo, migraines, and/or dizziness in people with vestibular disorders, chronic migraines, or brain injury. Animations can also cause distractions that make it difficult for some people to read text on screen.

Animation Guidelines

If an animation is necessary:

  • Allow people to pause animations, including carousels that auto-scroll through images.
  • Avoid animated gifs entirely. Animated gifs cannot be paused by the user.
  • Avoid flashing content. If unavoidable, provide a content warning.
  • Avoid parallax and scrolljacking in website design.
  • Prefer fade-based transitions to slide-based transitions. Fading content in and out is unlikely to affect motion-sensitive users.

Allow for Pausing, Stopping, or Hiding Animations 

  • Moving, blinking, scrolling, or auto-updated images: Avoid any moving, blinking, scrolling, or auto-updated information (e.g. video backgrounds, carousels, or slideshows), especially if it starts automatically. If the movement is necessary, there should be a mechanism for the user to pause, stop, or hide the movement unless it is part of an activity where it is essential. The University's Site Builder platform automatically provides these features for video backgrounds and carousels.
  • These types of movement should always be avoided in scenarios where users cannot control the movement, like presentation slide decks. When necessary, warn the audience on the previous slide so people have the option of looking away.

Animated GIFs

Animated gifs are not designed to allow users to pause an animation and should be avoided.

If you must use animated gifs, proceed with caution and ensure they adhere to WCAG 2.1 Three Flashes Criteria, which prohibits animations with three or more flashes a second.

Flashing Content

Flashing content can trigger seizures,  nausea, vertigo, migraines, or dizziness in people with disabilities. Flashing content also increases distractibility which can raise a person’s cognitive load making it more difficult to process information. Follow WCAG 2.1 Three Flashes Criteria when designing websites and presentations which prohibits more than three flashes per second.

Flashing Warning Language

If a video with flashing content must be shared for educational or demonstration purposes (e.g. a clip of a rapidly flashing lightning storm for a talk about lightning), ensure viewers are warned about the content ahead of time. An example of a flash warning:

“Warning: This video may potentially trigger seizures for people with photosensitive epilepsy or affect those with other photosensitivities. Viewer discretion is advised.”

Videographers can evaluate whether footage that has three or more flashes in rapid succession is likely to affect viewers using the Photosensitive Epilepsy Analysis Tool (PEAT).

Parallax and Scrolljacking

Parallax is when the background of a website moves slower than the foreground while scrolling. This creates an optical illusion that makes the website layout feel more 3-dimensional. Even users without vestibular disorders may have issues with parallax causing dizziness or nausea.

Scrolljacking is a more recent design trend that deviates from the familiar way users scroll through websites by changing the direction or pace of the scroll. This disorients users and greatly impacts a site’s useability.

Parallax and scrolljacking should be avoided completely.  

Disabling Animations 

If you are sensitive to animations for any reason, all major operating systems provide an accessibility setting to "prefer reduced motion," which many applications and websites respect. There is also a Google Chrome extension that attempts to prevent GIF animations from auto-playing.