• Success Criterion 1.1.1
  • Conformance level A

Silent Background Video That Actually Shows Product Info

1.1.1 — Non-text Content

Scenario

Setting

An online spreadsheet's toolbar

What’s wrong

Background video (video-only, decorative) that actually conveys information (e.g., product demo) with no text alternative.

Example 

<button class="toolbar-btn">
  fx <span class="new-badge">New</span>
</button>
<div class="whats-new-popover">
  <video autoplay muted loop>
    <source src="new-formula-bar-demo.mp4" type="video/mp4">
  </video>
</div>
<!-- the popover opens when the "New" badge is clicked; the video actually demonstrates a real new feature, with no caption anywhere -->

Why it matters

A user clicking the toolbar's "New" badge to learn about the formula bar update gets nothing from the popover if they can't see the silent demo clip inside it, and never learns how the feature works.

How to test

Watch the background video with sound off: if the video conveys information relevant to the page (a product demo, a diagram in motion) with no caption or transcript, it fails.

How to fix

Describe what the video demonstrates, as if it were an informative image.

<div class="whats-new-popover">
  <video autoplay muted loop aria-label="Demo: click the formula bar, type =SUM, then select a cell range">
    <source src="new-formula-bar-demo.mp4" type="video/mp4">
  </video>
  <p class="visually-hidden">This video demonstrates using the new formula bar: click it, type =SUM, then select a range of cells.</p>
</div>

Outcome

A screen reader user opens the "What's New" popover from the toolbar, reads exactly how to use the new formula bar, and tries the feature immediately.

Who is affected

Blind and low-vision users miss feature announcements delivered only through a silent visual demo.

Learn more

Related scenarios