Reviewed by Misha Gavura, founder of Inclusely. Last reviewed . Written by the Inclusely team at EVDEV, Toronto.
The short answer
An accessible product video has captions for everything said and every sound that matters, and a text or spoken description of anything shown that the audio does not say. It has a player that works with a keyboard and a screen reader. It never plays sound on its own, and moving video that plays automatically for more than five seconds has a pause button.
The US Justice Department lists videos without captions as one of the common barriers on websites. The rules below come from WCAG. Ontario's AODA names it, the EU standard behind the European Accessibility Act builds on it, and US ADA cases and settlements often use it as the measure.
What WCAG asks of a product video
WCAG groups video rules under guideline 1.2, Time-based media. These are the ones that touch a store. All of them are part of WCAG 2.2 AA.
There are two exceptions worth knowing. Audio description is not needed when the narration already says everything important that is shown. And captions and description are not needed when the video only repeats text that is already on the page and is clearly labelled as a video version of that text.
Ontario is a special case. Its website rule for organizations with 50 or more employees asks for WCAG 2.0 AA but leaves out 1.2.4 (live captions) and 1.2.5 (audio description). Captions for recorded video are still required. See the AODA guide for Ontario stores.
Captions vs subtitles, and open vs closed captions
W3C notes that some regions use “subtitles” for both. What matters is what the text contains, not what you call it. If it has the sounds and the speaker names, it works as captions.
What each kind of store video needs
How to add captions to a YouTube video on Shopify
YouTube and Vimeo are the easiest way to get closed captions on a Shopify store, because their players already support caption files. Shopify product media accepts links from these two sites only.
Open the video in YouTube Studio
Sign in to YouTube Studio, choose Subtitles in the left menu, then pick the video.Check the automatic captions, or add your own
If YouTube made automatic captions, open them and fix every wrong word, name and number. Or click Add under Subtitles and upload a caption file, paste a transcript and let YouTube time it (auto-sync), or type the captions while the video plays.Add the sounds that matter
Automatic captions write down speech. Add the sounds a shopper needs, such as [Zipper closes] or [Alarm beeps three times], and who is speaking if it is not obvious.Publish, then add the video to Shopify
In the Shopify admin, go to Products and open the product. In the Media section, click Select existing, then Add from URL, and paste the YouTube link. The video must be Public or Unlisted, and Shorts links are not accepted. Shopify plays it in the YouTube player, so your captions come with it.Give the video a name
Click the video in the product media and add alt text, such as Video: packing the jacket into its own pocket. In Shopify's own examples, the video player takes this text as its name, which is what screen readers announce.
Want captions on by default? Product videos often play without sound. A developer can ask the YouTube player to show captions from the start with its cc_load_policy setting. In your theme's product media code, it looks like this:
{%- if media.media_type == 'external_video' and media.host == 'youtube' -%}
{{ media
| external_video_url: cc_load_policy: 1, cc_lang_pref: 'en'
| external_video_tag }}
{%- endif -%}How to add captions to videos uploaded to Shopify
Videos you upload to Shopify (MP4, MOV or WebM, up to 10 minutes and 1 GB) play in your theme's own player. We could not find a place to add a caption file in Shopify's product media (the help pages for it do not mention captions), and the sample output of the Liquid video_tag filter that most themes use has no caption track. You have three options.
| Option | Good | Not so good |
|---|---|---|
| Burn captions into the video (open captions) | Works in every theme and every player. No code. | Cannot be turned off or resized. Not read by screen readers. Edit the video to fix a typo. |
| Host it on YouTube or Vimeo instead | Real closed captions. Easy to edit. | Their player, branding and suggested videos on your product page. |
| Add a caption track to your theme | Real closed captions in your own player. | Needs a developer and a small theme change. |
For the third option, a developer uploads a WebVTT caption file to Content, Files (paid plans accept any file type except HTML), saves it in a product metafield of type File (Settings, Metafields and metaobjects, Products), and adds a <track> element to the video in the theme. A caption file is plain text:
WEBVTT
00:00:00.000 --> 00:00:03.000
[Upbeat music]
00:00:03.000 --> 00:00:07.500
MAYA: The whole jacket packs into its own chest pocket.And the theme code, using a metafield called custom.video_captions:
{%- assign captions = product.metafields.custom.video_captions.value -%}
<video controls playsinline preload="metadata" crossorigin="anonymous"
aria-label="{{ media.alt | escape }}"
poster="{{ media.preview_image | image_url: width: 1200 }}">
{%- for source in media.sources -%}
<source src="{{ source.url }}" type="{{ source.mime_type }}">
{%- endfor -%}
{%- if captions -%}
<track kind="captions" src="{{ captions.url }}"
srclang="en" label="English">
{%- endif -%}
</video>Make the change on a duplicate theme first (Online Store, Themes, then Duplicate), and test the captions button in Safari and Chrome, on a phone and a computer, before you publish. Keep the crossorigin attribute: if the caption file comes from a different web address than the page, browsers only load it when that attribute is there.
Transcripts: the easiest win
A transcript is the words and sounds of the video as plain text. If you have captions, you already have most of it. Put it right under the video, so shoppers do not have to look for it. A native disclosure keeps the page short and works with every screen reader:
{%- if product.metafields.custom.video_transcript != blank -%}
<details>
<summary>Video transcript</summary>
{{ product.metafields.custom.video_transcript | metafield_tag }}
</details>
{%- endif -%}Use a rich text or multi-line text metafield for the transcript. A descriptive transcript adds what is shown in square brackets, for example: [She rolls the jacket and pushes it into the chest pocket. It is about the size of a phone.] That one line covers the visual part for screen reader users, and at level A it can stand in for audio description.
Audio description without a second recording
Audio description is narration that says what is happening on screen. Separate described versions take extra work to make. For product videos there is a simpler way: write the script so the narrator says what their hands are doing.
- Instead of “Just do this and you're done,” say “Fold the sleeves in, roll from the hem, and push it into the chest pocket.”
- Say numbers and words that appear on screen: “It weighs 280 grams.”
- Name colours and sizes when you show them.
W3C says that if all the important visual information is already in the audio, no extra audio description is needed. Described narration also helps every shopper who watches with half their attention.
Autoplay videos and hero banners
Video banners on the home page can easily break two level A rules: sound that starts on its own (1.4.2) and motion with no pause button (2.2.2). Moving backgrounds can also make some people with vestibular disorders feel sick.
- In the theme editor (Online Store, Themes, Edit theme), open the video section and check its autoplay, loop and sound settings. The names differ by theme.
- Keep autoplay videos muted. If a video must have sound, let the shopper start it.
- Make sure there is a visible pause button that works with the keyboard. If the theme has none, ask your developer to add one, or use a still image.
- Put the headline and button in real text over the video, not in the video itself.
A developer can also respect the shopper's reduced motion setting with a few lines of script:
<script>
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
document.querySelectorAll('video[autoplay]').forEach((v) => {
v.pause();
v.removeAttribute('autoplay');
});
}
</script>Video accessibility checklist
Check each video on your store against this list. It takes a few minutes per video.
- Watch it with the sound off. Can you follow everything? If not, captions are missing or incomplete.
- Listen to it with your eyes closed. Do you miss anything important? If so, it needs described narration, audio description or a descriptive transcript.
- Use only the keyboard. Tab to the player. Can you play, pause, turn on captions and leave the player again? Is the focus outline visible on each control?
- Use a screen reader. Does the video have a name, and do the buttons say what they do? Our screen reader testing guide shows you how.
- Load the page and wait. Does any sound start on its own? Does anything move for more than five seconds with no way to pause it?
- Read the captions. Are product names, sizes and numbers right? Are they in step with the speech?
Name every video in the admin
How Inclusely will help
Questions about video accessibility
What is video accessibility?
Video accessibility means people who cannot hear, cannot see, or cannot use a mouse still get what the video shows and says. In practice that means captions, a transcript, audio description or a text description when the picture carries information, a player that works with a keyboard and screen reader, and no sound or motion that starts on its own and cannot be stopped.
What is the difference between captions and subtitles?
Captions are written for people who cannot hear the audio. They include speech, who is speaking and important sounds such as music or a beep. Subtitles are usually a translation of the speech only, for people who can hear but do not know the language. W3C notes that some regions use the word subtitles for both.
What is the difference between open and closed captions?
Closed captions can be turned on and off in the player. Open captions, also called burned-in captions, are part of the video picture and are always on. Closed captions are usually better because viewers can turn them off and some players let them change the size, but open captions work in places that do not support caption files.
Are YouTube automatic captions good enough?
Not on their own. YouTube says the quality of automatic captions may vary, and they can get names, accents and numbers wrong. Product names, sizes and prices are exactly the words they miss. Use them as a first draft, then edit them in YouTube Studio before you rely on them.
Do silent product videos need captions?
No, because there is no audio to caption. But WCAG 1.2.1 asks for a text alternative or an audio track for video with no sound, if the video shows information. A one or two sentence description next to the video, or in the product description, usually covers a short product clip.
Is audio description required by law?
Laws do not name product videos. But WCAG Level AA, the standard most web accessibility rules and settlements measure against, includes 1.2.5, audio description for recorded video. Ontario's AODA website rule is an exception: it asks for WCAG 2.0 AA but leaves out 1.2.5 and live captions. This is not legal advice.
Do I need a transcript if my video has captions?
At level A, captions plus either audio description or a descriptive transcript meet the video rules. At AA, audio description is asked for as well. A transcript is still worth adding. W3C says a descriptive transcript is needed for people who are both deaf and blind. A transcript can also be read faster than watching, and search engines can read it.