• Success Criterion 1.4.2
  • Conformance level A

Audio That Starts on a Single-Page-App Route Change

1.4.2 — Audio Control

Scenario

Setting

A used-car marketplace's listing filter

What’s wrong

Audio starts on route change in SPAs (no full page load — users can't rely on browser mute heuristics) with no in-page stop.

Example 

function onFilterChange() {
  document.querySelector("#filter-audio").play();
}
<!-- audio replays on every SPA route change when filters are applied, no stop button anywhere -->

Why it matters

A shopper adjusting filters repeatedly triggers overlapping chime sounds that stack up because the page never fully reloads.

How to test

Navigate between views in a single-page app: if audio starts on a route change with no full page reload (so browser tab-mute doesn't help) and no in-page stop control, it fails.

How to fix

Add a persistent, in-app mute toggle that survives route changes in a single-page app; don't assume users can just reload.

function onFilterChange() {
  if (audioEnabled) document.querySelector("#filter-audio").play();
}

Outcome

The shopper mutes the chime once and filters through dozens of listings without any repeated sound.

Who is affected

Users with cognitive load or attention-related conditions, and anyone who can't rely on refreshing the tab to silence it.

Learn more

Related scenarios