Controlling media

Must

Media that updates or animated content must have a pause, stop or hide control.

Description

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

iOS media playback view provides these controls. All other elements providing animation subject to this requirement must provide these controls manually.

iOS example

A news story ticker that updates the currently displayed news story every ten (10) seconds. A stop/pause button is provided along with a next and prior story buttons.

                        

A news story ticker that updates the currently displayed news story every ten (10) seconds. No buttons are provided to control the changing of the stories.

                        

ANDROID

Application developers must provide all playback control elements.

Android example

A news story ticker that updates the currently displayed news story every ten (10) seconds. A stop/pause button is provided along with a next and prior story buttons.

                        

A news story ticker that updates the currently displayed news story every ten (10) seconds. No buttons are provided to control the changing of the stories.

                        

HTML

Provide buttons to stop, hide, or pause the content. Buttons should also be provided to step through the content, for example, next, previous, etc. or in the case of media an accessible scrub bar or rewind/fast forward.

HTML 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>
...                        

A moving carousel of news stories that change every 5 seconds:

<h2>Story headline</h2>
<div>Story content</div>                        

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.
Results

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.