Animation

Alignment

WCAG

2.2 Enough Time

2.2.2 Pause, Stop, Hide

2.3.1 Three Flashes or Below Threshold 

Moving, blinking, scrolling: For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential; and

Auto-updating: For any auto-updating information that (1) starts automatically and (2) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update unless the auto-updating is part of an activity where it is essential.

Web pages do not contain anything that flashes more than three times in any one-second period, or the flash is below the general flash and red flash thresholds. (Level A)

Functionality 

Users must always have the option to turn off animations and GIFs

Unless it is part of an activity where it is essential, there must be a mechanism for the user to pause, stop, or hide any moving, blinking, or scrolling information that:

• starts automatically, 
• lasts more than five seconds, and…
• is presented in parallel with other content

Give users enough time to read and use content

CourseArc

Add a pause button to a gif on a CourseArc page by using the CourseArc Boilerplate Template. 

1. Navigate the page you want to add the GIf
2. Select, “Edit page”
3. Select the “+ Add Block”  icon, and choose “Add Boilerplate Template”
4. Add the, “!Block: Pausable GIF” Boilerplate template located in CourseArc 

• WCAG: G152: Setting animated gif images to stop blinking after n cycles (within 5 seconds)
• WCAG: Understanding SC 2.2.2: Pause, Stop, Hide (Level A)