Updating media or animated content must have a pause, stop or hide control

The use of multimedia without playback control can be frustrating to users of assistive technology. Developers must ensure that playback controls are provided to play, pause, and control playback. When controls are not provided and multimedia plays automatically, users of screen readers may not be able to hear both the multimedia audio and the screen reader and will not be able to pause or stop the multimedia's audio.

All content that moves, updates, scrolls, or blinks must be able to be stopped, hidden, or paused to allow users to review the content before it changes. Alternatively they must stop after three cycles. This can be an issue for screen reader users or users with cognitive disabilities who may not be able to read the content before it changes. Decorative updating content is also applicable, as it can be a distraction.

An exception can be made for

• games - however, games must either be directly accessible or provide an alternative
• ads that play before a multimedia clip or multimedia that plays without any other surrounding content

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.

iOS Failure

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.

Android Failure

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 new story moving carousel with stories that appears every 5 seconds:

 <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 Failure

A news story moving carousel with stories that appears every 5 seconds:

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

Remediating

Playback controls should be provided such as play/pause for all multimedia content. Additionally, developers should provide the ability to control the playback through rewind and fast forward controls. Alternatively developers may provide shortcut keystrokes only to control media playback. However, these keystrokes must be documented on-screen as text.

Testing

Recommended tool/method: Manual / Object Inspector

Ensure user can control multimedia (Implied Global)

1. Verify that the multimedia application contains a button or other control to allow the multimedia to be paused/played and fast forwarded/rewound
2. Verify these controls appear in the tab order
3. Verify that these expose accessibility information about their identity to users of assistive technologies (see Object Inspector test below).
4. Activate the control
5. Verify that the desired action is performed

Note - It is acceptable for the multimedia to provide shortcut keystroke to control the media and not contain actual playback controls as long as these keystroke are documented on-screen

For applications that expose accessibility through MSAA, use the Object Inspector tool to examine the accessible information of each playback control

1. Tab to the playback control
2. Verify that the correct accessible name appears in the Object inspector
3. Verify that the correct accessible role appears in the Object inspector
4. For controls that expose a value or state visually such as a slider or checkbox, Verify that the correct accessible value or state appears in the Object inspector