Controlling Moving and Flashing Content

Overview

Content should not start, move, or change unexpectedly. This includes features like autoplaying videos, background videos, and image slideshows. It also includes legacy formatting techniques like the HTML and CSS blink elements and tags.

Some people have difficulty concentrating while reading, and moving imagery on the page can exacerbate this difficulty. Rapidly flashing lights, or editing cuts in excess of 3/second can also trigger seizures and discomfort in certain individuals.

Guidelines

• Do not implement auto-playing videos. Manually toggled videos are fine.
• Do not use the HTML blink element or the CSS blink tag.
• Use background videos sparingly.
• Use image sliders or image carousels sparingly.
• Any kind of auto-advancing content needs controls to toggle the speed of animation, or turn it off entirely. This is most commonly achieved by adding a “Pause” button to image carousels and background videos.
• Avoid any content that contains flashing or strobing lights in excess of 3 flashes / second. If such material is required for instructional purposes, it must not autoplay, it must have a warning at the start of the content, and there must be a text-based alternative.

How to Test

• Manually review that there are no autoplaying videos on your content.
• Manually review that any background videos and image carousels have functioning Pause buttons or other inputs where users can control the rate of content advancement. Verify that these controls can be navigated solely with the keyboard.
• Confirm that no content contains rapidly flashing lights, and if so, that it does not autoplay, that it can be turned off, that it has a content warning beforehand, and a text alternative.