Media Controls

Allowing users to control the media on your website gives everyone a better experience and make it accessible to all. We will go over Criterion 1.4.2 Level A, which is “audio control”, and 2.2.2 Level A which is “pause, stop, hide.”

Audio Control

Two decades ago, most websites had music playing the in background. Some were nice enough to provide a pause button, but it would probably be really small and hidden somewhere. You are still allowed to play sounds on your website if they aren’t more than 3 seconds long. If MySpace were still around, we’d all be in trouble.

If you wish to play music or sound on your website you still can, however, the user needs to either be able to pause, mute, or turn the volume down to 0. The media controls need to only control the sound on your website and NOT the user’s system itself. This rule is in place for screen reader users. They cannot mute their system without silencing their text-to-speech as well.

To fix the issue you can place a pause or mute button high up on the website so keyboard and screen-reader users can quickly get to it. It is recommended that the button should be the first item on the page, or close to it. Ideally, you don’t play the sound automatically at all, and let the user decide for themselves to hit play. Spotify does it pretty well. I only have to tab twice to get to the play/pause button.

Here is a quick code sample for controlling media with JavaScript.

var musicPlayer = document.querySelector("#player");
var pauseButton = document.querySelector('.media-control');

pauseButton.addEventListener('click', (event) => {
	var musicPlayer = document.querySelector("#player");
	if (musicPlayer.paused) {
		audio.play();
	} else {
		musicPlayer.pause();
	}
});

Pause, Stop, Hide

This rule applies not only to audio, but video, animations, and any content that moves, blinks, or automatically scrolls as well. The rule is, the user must be able to pause, stop, or hide, just as the title implies. In some cases, the user needs to be able to reset an animation, or even skip ahead to the most current place in time, as such with a news ticker, or a live video.

Moving objects can be a distraction to some users. It can easily prevent them from being able to use your website. It’s a more common problem than you might think.

Examples

Some websites have videos that auto-play in the background. The videos don’t have sound, and they meet Criteria 2.3.2 Level which we covered in the Accessible Media article we covered last week, but they’re still making people sick or distracted. These items need a pause or stop button.

You wish to draw attention to a specific part of the website by making a section pulsate. Instead of adding a pause button, just limit the pulsating to 5 seconds.

There was a website that had a video playing in the background of the heading on every single page. We added a pause button, but we felt it needed to remembered so the video wouldn’t auto-play on navigation. We used the local storage to remember the users option.

Exemptions

• Loading animations: If a user is waiting for their content to load, then there’s no distraction and no harm in these type of animations.
• A full page advertisement: We all hate them. But they are technically compliant because they don’t distract the user from important content on the website.

The Gist

Add media control buttons and/or keep animations 5 seconds or less.