• Success Criterion 1.4.2
  • Conformance level A

Mute Button That’s Present but Not Easy to Reach

1.4.2 — Audio Control

Scenario

Setting

A recipe site's ingredient list

What’s wrong

"Mute" control present but placed after long content / not keyboard reachable / not first in page code (DOM) order (mechanism effectively unavailable — interacts with 2.1.1).

Example 

<!-- how-to video autoplays at the top of the page; mute control is rendered in a footer widget -->
<video autoplay src="knife-skills.mp4"></video>
<!-- ...400 words of ingredients... -->
<button tabindex="-1" class="footer-mute">Mute video</button>

Why it matters

A home cook using a keyboard or switch device has to tab through the entire ingredient list before reaching the one control that silences the video.

How to test

Try to find and activate the mute control immediately after audio starts: if it's placed far down the page, not reachable by keyboard, or not the first interactive element, it fails.

How to fix

Place the stop or mute control immediately after the audio source in reading and tab order, not after unrelated content.

<video autoplay muted src="knife-skills.mp4"></video>
<button class="mute-btn" style="order:-1">Unmute video</button>

Outcome

The cook silences the video with the very first tab press, before reading a single ingredient.

Who is affected

Keyboard-only and switch-device users, plus screen reader users whose narration competes with the video's audio the whole time.

Learn more

Related scenarios