Accessibility Checklist for animated content

Thinking of including some animation on your website, like videos, GIFs or animations via CSS? Animations can enhance user engagement; however, there are a few things to remember to make sure they are accessible for everyone. Follow this checklist to ensure your animated content meets accessibility standards:

• Animations that convey information have alternative text (alt text for GIFs, captions and transcript for videos) - 1.1.1 Non-text content
• Animations that convey information are not implemented via CSS - remember, CSS isn’t picked up by assistive technology! - 1.1.1 Non-text content
• Animations that don’t convey information are hidden to assistive technology, like with null alt or aria-hidden="true" - Best practice
• Don’t play videos automatically. Allow users to control when the animation starts - Best practice
• Animations and videos that play automatically have a means to pause, stop or hide the content - 2.2.2: Pause, Stop, Hide
• Make the mechanism to pause, stop, or hide the animated content clearly visible - Best practice
• The mechanism to pause, stop, or hide the animated content is keyboard accessible. In fact, any mechanism to control a video (for example, fast-forward) must be keyboard accessible - 2.1.1 Keyboard
• Avoid flashing content - 2.3.1 Three Flashes or Below Threshold
• Remember rules around color - ensure good color contrast and convey important information with more than just color - 1.4.11: Non-text Contrast, 1.3.3: Sensory Characteristics