Controlling media must

Some users with cognitive impairments can find too much movement and change distracting and overwhelming. Users of assistive technology, such as screen readers, may not be aware of content updates and may not read the content before it changes.

This guideline applies to any content, decoration or background that moves, updates, scrolls or blinks. The user must be able to stop, hide or pause changes, or updates must stop automatically after three cycles.

An exception may be made, with sought advice, for:

• short adverts or idents that play before AV content,
• media that is playing fullscreen without other surrounding content,
• the core content or mechanic of interactive content such as a game (though all background and non-editorially significant animation must have the option to be paused or disabled).

---

iOS

The native iOS media player provide controls for stopping video and audio content by default. For custom on-screen animation, such as news story tickers and automated carousels, provide a stop/button alongside previous and next buttons.

---

Android

Use the native VideoView (for the video content) and MediaController (for controlling playback) for media content such as videos. For custom on-screen animation, such as news story tickers and automated carousels, provide a stop/button alongside previous and next buttons.

---

HTML

Use the HTML5 video element for media content such as videos. Make sure to provide the controls attribute for controlling playback, or use a media player that includes accessible controls. For custom on-screen animation, such as news story tickers and automated carousels, provide a stop/button alongside previous and next buttons.

HTML Pass Example

A moving carousel of news stories that change every 5 seconds, with controls to over-ride this behaviour:

<h2>Story headline</h2>
<div>Story content</div>
<div><button style="float:left;">Prior story</button>
<button style="float:left;">Pause</button>
<button style="float:left;">Next story</button></div>

HTML <video> example:

<video width="320" height="240" controls>
  <source src="myMovie.mp4" type="video/mp4">
</video>

---

Testing

Procedures

1. Activate the app.
2. Determine if the screen contains dynamically updating, moving, blinking scrolling content or animation.
3. If so, determine if there are controls to stop, hide, pause, or control the content.
4. Verify that the controls correctly control the media in the indicated fashion.
5. Verify that these controls can be accessed via assistive technology and that the dynamic content can be controlled using assistive technology.
6. Verify that animated content that is decorative does not last for more than five seconds.

Outcome

The following check is true:

• When the screen contains dynamically updating, moving, blinking scrolling content or animation, a method is available to stop, hide, pause, or control the content;
• This method can be accessible with assistive technology;
• Decorative content animation does not last for more than five seconds.

---