Autoplaying sound needs a way to stop it

• Rule: axe/no-autoplay-audio
• Checks: <video> or <audio> elements must not play automatically
• WCAG: 1.4.2
• Fix class: manual: A fix needs a person to work out what to change, beyond authored text or a visual decision.

Who it affects

• People who use a screen reader or a braille display, most of them blind.
• People with cognitive, learning or attention disabilities.

How to fix it

A video or audio file with sound starts playing on its own

Remove the autoplay attribute and let people start playback with the player’s controls.

<video controls src="product-tour.mp4">
  <track kind="captions" src="product-tour.vtt" srclang="en" label="English">
</video>

A background video has to play on its own

Add the muted attribute so it plays without sound. If it moves for more than five seconds, also give people a button to pause it.

<video autoplay muted loop playsinline src="hero.mp4"></video>
<button type="button">Pause background video</button>

Sound has to play on its own for more than three seconds

Give people a keyboard-operable control near the start of the page that pauses, stops or mutes it. The native controls attribute satisfies axe, but place the player, or a separate control, early, so screen reader users can reach it while the sound plays over their screen reader.

axe asks for review because it could not load the media

Check whether the media plays sound on its own for more than three seconds. If it does, apply one of the fixes above; if it is silent or shorter, nothing needs to change.

Fixes that fail

Setting autoplay="false"

autoplay is a boolean attribute: its presence turns autoplay on, whatever its value. Remove the attribute.

Relying on the browser to block autoplay

Browsers let sound autoplay in some cases, such as on sites people have interacted with, so the sound can still start over a screen reader.

In React

The part of the fix that differs in React, in its syntax. The rest of the guidance holds.

axe reports a muted background video that React rendered in the browser

When React creates a <video> in the browser, it sets muted as a property, not as the attribute axe looks for. Confirm the video plays silently, then add the attribute from a ref with video.defaultMuted = true, so automated checks see it too.

function BackgroundVideo({ src }) {
  return (
    <video
      ref={(video) => {
        if (video) video.defaultMuted = true;
      }}
      autoPlay
      muted
      loop
      playsInline
      src={src}
    />
  );
}

More on the rule

axe-core’s documentation of the rule

CORA’s fix guidance adapts content from accessibility-agents, under the MIT License: see its notice.