universal-design-center

  • Screen Movement

Web Accessibility Criteria - Screen Movement

 Description

Screen movement is a frequent technique used today to get people to interact with web content. There are various forms of screen movement for the web including animations, flashing content, user video controls, and slideshows. Flashing content is also a commonly used type of screen movement that provides focus to various elements in a page. When screen movement is present within a webpage, it is crucial that screen movement is developed in a way that makes it accessible to all users.

Provide Controls to Moving Content

When screen movement is present on a web page, a mechanism should be provided for users to control the blinking such as a stop/pause buttons. 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 your website, it is crucial to avoid content that flashes or blinks excessively. For example, 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.

Types of screen movement to avoid

To ensure accessibility, blinking, scrolling and rotating screen movement should be avoided at all cost. Movement of this kind could be a distraction to users and makes it difficult to read and process information. Avoid using the following types of screen movement elements that are known to cause uncontrolled movement: 

    • 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.
back to top

 

 Why is it important?

Although the overall goal of screen movement is to appeal and engage users to a website, when not used properly, screen movement can cause distraction and can be a problem for users with disabilities. 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.

back to top

Section 508/WCAG 2.0 Summary of Requirement

Three Flashes or Below Threshold: 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.  A method must be provided to users to stop moving content. Content must not interrupt how a user interacts with the webpage or disrupts the actions of assistive technology. If the content is changing, i.e., slideshow or presentation, it must allow users to control the movement.

Best Practices

The best practices for accessible screen movement are the following: 

  • 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 Accessibility for more information.
  • The HTML <blink> tag is obsolete. The blink() element is not considered a standard method as it may not be supported in all browsers.
  • 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.
  • We recommend avoiding 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

Movement Controls 

Videos

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>

back to top

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.
back to top

How to Test

Manual Check 

Visual  Test

    1. Visually inspect the page for screen movement.
    2.  Visually check if your moving content has any pause or stop controls
    3. Evaluate 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.  

    1. Count how many times the element flashes within 10 seconds.
    2. Divide the amount of times by 10 and that is how many times the element flashes per second.
    3. Results: For the flashing element to comply with Section 508 standards it must flash less than three times in any one second period.

Automated Testing Tools

WebAIM WAVE tool

Activate the WAVE toolbar and navigate to the “Details” panel. In that panel navigate to the “Features” section and look for any errors related to screen movement. The following accessibility errors can be identified by WAVE: 

    •  the page has a blinking element 
    •  the page has a Marquee element for scrolling content. 

Screen Movement Checkers

Photosensitive Epilepsy Analysis Tool (PEAT) is a software that can also determine the flash rate of an element. However, developers must be careful when using this tool as it may not always provide accurate measurements.

Compliance Sheriff

Compliance Sheriff checkpoint group Section J is used to test for screen movement and flickering content in Compliance Sheriff. For more information regarding the checkpoints visit the CSU ATI Accessibility Requirements page. 

(NOTE: Compliance Sheriff identifies screen movement but requires a visual test for accessibility compliance)

back to top

Resources