Autoplay audio on public pages and the ADA

The sound nobody asked for

If any audio on a page plays automatically for more than 3 seconds, the visitor must be able to pause or stop it, or to change its volume independently of the system volume. A page that stays silent until someone presses play does not trigger the criterion at all.

The reason is practical. A screen reader speaks over the same speakers as the page. When a welcome video starts talking, the person using the screen reader cannot hear their own software, and they may not be able to find the video to switch it off. People with attention or hearing difficulties, people on a bus, and anyone opening the page in a quiet library are affected too.

The rule is about audio, not about every moving thing. A muted autoplaying video is not audio. Motion is covered by a different criterion (2.2.2).

What the ADA angle looks like on service pages

Autoplay shows up on the pages that residents visit once and in a hurry: a DMV landing page with a hero video, a city council livestream that starts when the meeting page loads, a recreation department promo with background music. The visitor came to renew a registration, not to watch a video.

A second problem is the control itself. A pause button that sits at the bottom of the page, after 200 links, does not help a keyboard or screen reader user who is being talked over. Put it early, and make sure it is a real button with a name.

Under Title II this extends to apps as well as websites, so a transit app that plays a welcome jingle on launch is in scope.

Hero videos on a DMV landing page

The simplest fix is to autoplay only muted video, or not at all, with visible controls. Audio that must autoplay needs a pause, stop or volume mechanism, unless it ends within 3 seconds.

<video src="dmv-welcome.mp4" autoplay loop></video>

<video src="dmv-welcome.mp4" autoplay muted loop playsinline
       controls aria-label="Welcome video: renewing your registration">
  <track kind="captions" src="dmv-welcome.en.vtt" srclang="en" label="English">
</video>

A pause control that is easy to reach

When audio has to start on its own, for example a recorded announcement that plays when a kiosk page opens, put the stop control first in the page and keep the audio under a sensible length.

<body>
  <nav>…</nav>
  <main>
    <audio id="notice" src="hours-notice.mp3" autoplay></audio>
    …
  </main>
  <button id="stop">Stop audio</button>
</body>

<body>
  <button id="stop" type="button">Stop announcement</button>
  <nav>…</nav>
  <main>
    <audio id="notice" src="hours-notice.mp3" autoplay></audio>
    …
  </main>
  <script>
    document.getElementById("stop").addEventListener("click", () => {
      const a = document.getElementById("notice");
      a.pause();
      a.currentTime = 0;
    });
  </script>
</body>

Queue alerts and short sounds

A looping chime on a virtual waiting-room page runs well past 3 seconds and cannot be stopped. A single short sound, or a sound that plays only after the user opts in, avoids the problem. Sounds under 3 seconds are outside the rule.

const chime = new Audio("your-turn.mp3"); // 12 seconds
setInterval(() => chime.play(), 15000);

const chime = new Audio("your-turn-short.mp3"); // 1.5 seconds
const soundOn = document.getElementById("sound-toggle");
function notify() {
  if (soundOn.checked) chime.play();
}

Native apps

Mobile platforms have their own volume controls, but the principle is the same: do not start long audio on launch without a visible control. Below, a promo video on a recreation department app screen waits for the user.

// SwiftUI
VideoPlayer(player: player)
    .onAppear { player.play() }

// SwiftUI
VideoPlayer(player: player)   // standard controls, starts paused
    .accessibilityLabel("Summer programs preview")

// Jetpack Compose (Media3)
val player = remember { ExoPlayer.Builder(context).build().apply {
    setMediaItem(MediaItem.fromUri(url)); prepare(); playWhenReady = true } }

// Jetpack Compose (Media3)
val player = remember { ExoPlayer.Builder(context).build().apply {
    setMediaItem(MediaItem.fromUri(url)); prepare(); playWhenReady = false } }
AndroidView(factory = { PlayerView(it).apply { this.player = player; useController = true } })

How to check it

1. Open the page with the sound up, with no clicks and no key presses. Note any sound that lasts longer than 3 seconds.
2. Try to stop it with the keyboard alone: Tab to the first control and press Enter or Space.
3. Repeat with a screen reader running. The control should be reachable without searching and have a clear name.
4. Check embedded players and iframes separately; their autoplay setting may be controlled by a parameter in the URL.
5. Use developer tools to look for autoplay attributes and play() calls on load.

Common mistakes and a ship-it list

• Relying on the browser's autoplay blocking. It differs between browsers and is not a conformance measure.
• A mute button that only appears after the audio has already played for a while.
• A stop control that is a div with a click handler and cannot be reached by keyboard.
• Third-party widgets that start audio and cannot be paused from the page.

Ship it when:

• No page plays audio on load, or the audio ends within 3 seconds.
• Any autoplaying audio has a pause or volume control near the top of the page.
• That control works by keyboard and is announced with a clear name.
• Embedded players are checked for autoplay parameters.

Third-party players are covered in vendors and third-party content.

Sources

• Understanding SC 1.4.2: Audio Control (W3C), opens in a new tab
• 28 CFR Part 35, Subpart H: Accessibility of Web Information and Services (eCFR), opens in a new tab

Standard version: WCAG 2.1 (W3C Recommendation, 5 June 2018), as named in the Title II web rule. This page is for informational purposes only and is not legal advice. For binding requirements, refer to the official ADA statute and regulations, and ask a lawyer how they apply to you.