Media and motion Rule

Sound must not start playing on its own no-autoplay-audio

If a page starts playing sound by itself and keeps going for more than three seconds, it needs a way to stop or mute it before anything else on the page. The axe check flags audio and video elements that have autoplay, no controls, and are not muted or very short. Remove autoplay, or add controls so the person can stop it.

WCAG 2.2 A 1.4.2 Audio Control

Websight reports this as <video> or <audio> elements must not play automatically

Who it affects

Someone using a screen reader on the brass band's homepage hears their screen reader and a cornet solo at the same time, and cannot find the stop button because they cannot hear where they are on the page.

Someone with a sensory processing condition or anxiety is startled by sudden sound and leaves the site rather than hunt for the mute button.

Someone in a quiet office or a library closes the tab in a panic before reading a word.

Broken versus fixed

The broken markup is shown as code rather than rendered, because the effect is in how it is announced or handled, not how it looks.

Broken
<video src="band.mp4" autoplay loop></video>

Starts playing, with sound, the moment the page loads, loops for ever and offers no controls.

Fixed
<video src="band.mp4" controls></video>

Nothing happens until the person presses play, and a pause button is right there.

Test it by hand in two minutes

  1. Load the page with the volume up and your hands off the keyboard. Wait five seconds. Did anything start?
  2. If it did, press Tab once. Is the first thing you reach a pause or mute control?
  3. In the Elements panel, search for autoplay. For each hit, check whether muted or controls is also present.
  4. Check hero banner videos: muted and silent is fine, autoplay with a soundtrack is not.

The fix

Before
<video src="band.mp4" autoplay loop></video>
After
<video src="band.mp4" controls></video>

If a background video is purely visual, add muted (and playsinline for phones); muted autoplay is allowed. If the sound matters, let the person start it.

Hero banner video

Before
<video src="hero.mp4" autoplay loop></video>
After
<video src="hero.mp4" autoplay loop muted playsinline></video>

Muted autoplay is permitted. Add a pause button anyway for people who find motion distracting (WCAG 2.2.2).

Short jingle

Before
<audio src="ding.mp3" autoplay></audio>
After
<audio src="ding.mp3" autoplay controls></audio>

Sound of three seconds or less is allowed, but the scanner cannot measure a file that has not loaded. Adding controls avoids a review flag and gives people a mute button anyway.

Common mistakes

  • Hiding the controls with CSS while leaving the controls attribute, which passes the scanner and gives people nothing to press.
  • Starting the sound from JavaScript after a short delay, which the element check cannot see but people can certainly hear.
  • Relying on browsers blocking autoplay; they allow it once the person has interacted with the site.
  • Putting the mute button at the bottom of the page.

WCAG criteria this rule maps to

axe-core tags this rule as WCAG 2.2 level A. It is one of the checks for:

The scanner finds audio and video elements with autoplay and no controls attribute, and passes them only if they are muted or the loaded file is three seconds or shorter. It cannot see sound started by script, by an embedded player in an iframe, or through the Web Audio API, and if the file has not loaded it asks for a review rather than deciding. Automated tools find only part of the accessibility problems on a page; a pass on this rule is not a pass on the criterion.

A Videos must have captions video-caption A video element with speech or meaningful sound needs captions: text that appears on screen in time with the audio. not run A Audio needs captions or a transcript audio-caption An audio element plays sound and nothing else, so anyone who cannot hear gets nothing. A Do not use the marquee element marquee The marquee element scrolls text across the page and never stops. A Pages must not refresh or redirect on a timer meta-refresh A meta refresh with a delay reloads the page, or sends the visitor somewhere else, after a set number of seconds.

Scan your own page for this and 63 other checks

Open any page in Chrome, click Websight, and get a score out of 100 with every issue explained and a draft fix snippet per element.

Add Websight to Chrome

Free scans, no account, nothing leaves your computer. Automated tools find only part of the problems; the extension says so on every report.