Introduction
Screen movement is often incorporated into web pages as a way to get users to interact with content. There are various forms of screen movement for the web including animations, flashing content, user video controls, and slideshows. However, when adding screen movement into a web page, techniques must be added to ensure a user has enough time to view the content. Moreover, moving content must be designed in a way that is not excessive and cannot trigger harmful reactions in a user.
- User Controls: User Controls are techniques that can be incorporated when screen movement is present that allow users to pause, stop and restart the content. Elements such as a slideshow, presentation or video, must contain user controls to play, pause or stop the motion or video. This will ensure users have control over the screen movement, should they find it too distracting.
- Excessive Movement: When adding screen movement to a website, it is crucial to avoid adding content that causes excessive movement. To ensure accessibility, blinking, scrolling and rotating screen movement should be avoided at all cost. Web pages should not contain anything that flashes more than three times during a one-second period. Anything that flashes too excessively runs the risk of inducing seizures or causing some other physical reaction.
Why must screen movement be controlled?
Excessive screen movement with no mechanism to control can make it difficult for users to gather information. Users with visual processing or cognitive disabilities, who may need more time to read and process the information, will encounter accessibility barriers if there is too much movement on a web page. Moreover, when excessive screen movement such as blinking, flashing, and scrolling is used, there is a risk that this may trigger seizures, dizziness or nausea to individuals prone to them.
Best Practice
- When moving content is used, user controls (e.g., pause, stop, and play buttons) should be provided.
- Make sure user controls for moving content are accessible via the keyboard and by assistive technologies. Refer to Web Accessibility Criteria: Keyboard Access for more information.
- Do not use the following types of screen movement elements:
- HTML Blink: The blink element (<blink>) is used to create text to appear and disappear text at an uncontrolled rate.
- CSS Blink: CSS Blink tag is the CSS “text-decoration: blink;” code. This tag also causes uncontrollable blinking.
- Marquee Element: The marquee element is a non-standard HTML element that causes text to scroll up, down, left or right automatically.
- When using animated moving content, it is recommended to include text equivalents for them.
- Moving content should not contain flashing, strobing, or flickering elements that flash more than three times in any one second period.
- Avoid using images that may contain a type of optical illusion that can have effects on users.
- Whenever possible the standard HTML5 “video” element should be used to embed a moving or animated content or clip. User controls will be associated with the moving element to manage the moving item.
- Include a disclaimer at the beginning of the content to warn users of the flashing or strobing elements within the content may induce seizures.
Examples
Example 1: Movement Controls
In HTML5, developers are able to add user controls to video elements, gifs or flash elements within the <video> tag. Within the tag, an added attribute “controls” will add a set of user controls to pause, play, or stop the video.
The “source” element is used to specify video files. Multiple “source” element could be added to provide alternative formats for different browsers. The first compatible format will be used by the browser.
For browsers that do not support the “Video” element, a text alternative can be added in between of <video> and </video>
Video courtesy of the Peach open movie project.
Example code:
<video width="600" height=”400" controls>
<source src="clip.mp4" type="video/mp4">
<source src="clip.webm" type="video/webm">
</video>
Example 2: Sliding Banners
Carousels or slideshows, which are used particularly on home pages at the top, are used to display specific featured items on a web page. A non-accessible carousel can be a major obstacle for many website visitors. An accessible carousel provides more access for many users including:
- Keyboard only and Assistive Technology users can navigate between carousel items. Using control buttons users will be able to pause, play and resume the slideshow.
- Users who are distracted by movement can pause animations
- Users who need more time to read and understand each carousel item.
Testing Methods
- Inspect multimedia content to determine if pause, stop and play controls are incorporated within the file.
- Verify if embedded content is accessible to all users including assistive technology users. If the content is not accessible, it is recommended to use different embedding methods or multimedia file types. However, if no other alternative is possible, the <noembed> tag must be incorporated.
- Visually inspect the page for screen movement
- Check if the movement rate visually. As a reference, moving content should not flash more than three seconds during a one-second period.
Screen Movement Equation
The Department of Veterans Affairs has a recommended testing method for screen movement.
- Count how many times the element flashes within 10 seconds.
- Divide the amount of times by 10 and that is how many times the element flashes per second.
- Results: For the flashing element to comply with Section 508 standards it must flash less than three times in any one second period.