Video needs captions, audio needs a transcript, and nothing may autoplay with sound
Deaf and hard-of-hearing customers miss everything that is only said in a product video, and screen reader users cannot hear their screen reader over autoplaying sound. Product videos often carry the details that convince people to buy.
- Rule id
- vs-media
- Source
- Validiscan check
- Impact
- Moderate
- Fix tier
- MANUAL
- on Shopify, Shopware, WooCommerce and Magento
- Status
- runs
What the check does
Flags video elements without a captions track, audio without a transcript link (1.2.1, 1.2.2) and media that starts playing sound automatically (1.4.2). Supersedes the axe rules video-caption and no-autoplay-audio.
The check reads up to 200 video, audio, iframe, lite-youtube and lite-vimeo elements, plus media deferred in template elements, such as Shopify’s deferred-media. Deferred media is reported on its wrapper; its autoplay does not count.
A video counts as captioned when it holds a track of kind captions or subtitles, or without a kind. Burned-in captions are not recognized. A muted video autoplaying without controls counts as decorative and goes to needs review.
For audio, the check looks for a link, button or summary saying transcript in English, German, French, Spanish or Danish, up to the nearest section, article, main, aside, dialog or region, stopping at a wrapper that holds other media. Without one, audio with controls is a finding; without controls, it goes to needs review unless it autoplays with sound.
Unmuted media without controls that has autoplay or is already playing is a 1.4.2 finding. YouTube, Vimeo, Wistia, Dailymotion and Vidyard embeds go to needs review. The scanner does not turn needs review into findings today.
How to fix it
Add captions (a <track kind="captions"> file or captions in the video) to every product video with speech, link a transcript next to audio content, and start media muted or only on request, with visible pause and volume controls.
WCAG success criteria
- 1.2.1 Audio-only and Video-only (Prerecorded), level A
- 1.2.2 Captions (Prerecorded), level A
- 1.4.2 Audio Control, level A
EN 301 549 clauses
| WCAG criterion | Version 3.2.1 | Version 4.1.1 |
|---|---|---|
| 1.2.1 | 9.1.2.1 | 9.1.2.1 |
| 1.2.2 | 9.1.2.2 | 9.1.2.2 |
| 1.4.2 | 9.1.4.2 | 9.1.4.2 |
Recipes that list this rule
This rule has the tier MANUAL. In a project, a finding of it takes the MANUAL way, and these recipes are not applied to it.
Shopware: recipe mute-autoplay
Show the before and after (1)
Resources/views/storefront/block/cms-block-video.html.twig Changes to Resources/views/storefront/block/cms-block-video.html.twig: 1 added, 1 removed
| Line before | Line after | Change | Code |
|---|---|---|---|
| 9 | 9 | <h2 class="cms-block-title">{{ block.title }}</h2> | |
| 10 | 10 | <p class="cms-video-text">{{ block.text }}</p> | |
| 11 | 11 | <div class="cms-element-video"> | |
| 12 | Removed | <video class="cms-video" autoplay loop preload="none" width="1280" height="720" poster="{{ block.posterUrl }}"> | |
| 12 | Added | <video class="cms-video" autoplay loop preload="none" width="1280" height="720" poster="{{ block.posterUrl }}" muted playsinline> | |
| 13 | 13 | <source src="{{ block.videoUrl }}" type="video/mp4"> | |
| 14 | 14 | {% if block.captionsUrl %} | |
| 15 | 15 | <track kind="captions" src="{{ block.captionsUrl }}" srclang="en" label="{{ 'general.captionsEnglish'|trans }}" default> |
Start with a free check of your shop.
Send your shop’s address. Validiscan scans it and replies with every failure the scan can prove, with the page and the code.
Request a free checkOr write to info@validiscan.com.
What the free check covers, and what it leaves out- You send
- your shop’s address
- Pages scanned
- up to 15
- You get
- every failure the scan can prove, with the page and the code
- On your shop
- public pages only; no login, nothing bought, no forms sent
- What it is not
- a full audit