Accessible Videos: Captions and Transcripts

1. Why video accessibility solves two separate problems

Video accessibility is often reduced in practice to a single measure: add captions, done. In reality, captions and audio description address two completely different user groups with opposing needs. Captions make spoken language and important sounds readable for deaf and hard-of-hearing users. Audio description makes visual information that is not conveyed through the original audio audible for blind and severely visually impaired users. Anyone who delivers only captions has solved half of the barrier.

The difference becomes concrete in a product video: a narrator explains a feature while an animation simultaneously displays a size chart that is never mentioned in the audio. A deaf user needs the spoken text as a caption. A blind user needs an additional description of the size chart being displayed, inserted during a pause in speech or provided as extended audio description. Both requirements are governed by different success criteria in WCAG 2.2 and must be planned separately, not treated as a single task on one ticket.

2. WCAG requirements for video: what law and standard demand

WCAG 2.2 requires several success criteria simultaneously for prerecorded video with audio. Criterion 1.2.2 (Captions, Level A) requires synchronized captions for all spoken content and relevant sounds. Criterion 1.2.3 (Audio Description or Media Alternative, Level A) requires either audio description or a complete transcript that also describes visual information. Criterion 1.2.5 (Audio Description, Level AA) goes further and requires audio description as a standalone audio track for all videos, regardless of whether a transcript exists.

For companies in Germany this is no longer an optional recommendation: the Barrierefreiheitsstarkungsgesetz (BFSG, Accessibility Strengthening Act) obligates providers of certain products and services in electronic commerce, including online stores, to comply with WCAG 2.1 Level AA as of June 28, 2025. Product videos without captions and without audio description or a transcript are therefore a direct compliance violation, not merely a usability shortfall. Anyone embedding videos in a Magento store must account for these requirements from the outset in the technical concept, not as a retrofit.

3. Understanding WebVTT: format, timing, and cue settings

WebVTT (Web Video Text Tracks) is the standard format for timed text on the web and is natively supported by all modern browsers without any additional JavaScript library. A WebVTT file always begins with the header WEBVTT, followed by individual cues: a timestamp range in the format hours:minutes:seconds.milliseconds and the associated text. Unlike captions for speech alone, important non-speech sounds such as [chime] or [applause] should also be captured as cues, because they can be relevant for understanding the video.

WebVTT additionally supports cue settings for position, alignment, and size (position, align, size), which allow spatial attribution when multiple people speak at the same time. Important for readability: a cue should not remain on screen for longer than two lines and roughly seven seconds, since longer text exceeds the average reading speed. The maximum character count per line is around 37 characters so the text stays readable without wrapping even on smaller screens.

WEBVTT

NOTE
Caption file for product demo video "wireless-headphone-setup.mp4"
Generated and manually reviewed for accuracy

00:00:00.000 --> 00:00:03.500
Welcome to the setup guide for our
wireless over-ear headphones.

00:00:03.600 --> 00:00:07.200
[Chime sound] First, press and hold
the power button for three seconds.

00:00:07.300 --> 00:00:11.000
The LED indicator will flash blue,
signaling pairing mode is active.

00:00:11.100 --> 00:00:15.800 position:50%,line:80% align:center
Open your device's Bluetooth settings
and select "MS Headphone Pro".

00:00:15.900 --> 00:00:19.400
[Confirmation beep] The headphones
are now successfully connected.

4. The HTML track element: adding captions correctly

The <track> element embeds a WebVTT file as a child element of the <video> tag and is part of the HTML standard, with no external library required. The kind attribute is decisive: kind="captions" marks captions including relevant sound descriptions for deaf and hard-of-hearing users, while kind="subtitles" means pure language translation for hearing users who do not understand the spoken language. This distinction is frequently confused in practice, but it is semantically important because screen readers and assistive technologies rely on it.

Multiple track elements can be embedded in parallel for different languages, distinguished by the srclang attribute. The default attribute marks one track as automatically active, which is especially useful for kind="captions" in the store's default language. Important: the native video player in Chrome, Firefox, and Safari automatically displays a captions menu as soon as at least one track element is present, entirely without extra JavaScript. A custom player only needs to rebuild this behavior if it completely replaces the native video element.

<!-- Hyva phtml: product video with multilingual captions and audio description -->
<video
    controls
    preload="metadata"
    width="1280"
    height="720"
    poster="{{$block->getVideoPosterUrl()}}"
    aria-label="{{$block->escapeHtmlAttr($block->getVideoTitle())}}"
>
    <source src="{{$block->getVideoUrl('mp4')}}" type="video/mp4">
    <source src="{{$block->getVideoUrl('webm')}}" type="video/webm">

    <!-- Captions: spoken content plus relevant non-speech sounds -->
    <track
        kind="captions"
        src="{{$block->getVttUrl('de')}}"
        srclang="de"
        label="Deutsch"
        default
    >
    <track
        kind="captions"
        src="{{$block->getVttUrl('en')}}"
        srclang="en"
        label="English"
    >

    <!-- Descriptions: separate WebVTT track for extended audio description text -->
    <track
        kind="descriptions"
        src="{{$block->getDescriptionsVttUrl('en')}}"
        srclang="en"
        label="Audio Description"
    >

    <p>Your browser does not support the video element.
       <a href="{{$block->getTranscriptUrl()}}">Read the full transcript</a>.</p>
</video>

5. Audio description: the second, often forgotten requirement

Audio description inserts additional spoken descriptions of relevant visual content into the natural pauses of the original audio: camera angles, on-screen graphics, product details that are shown but never mentioned. There are two technical implementation paths. Standard audio description uses the existing pauses in the original audio and is delivered as a separate audio track or as a second video version with the description mixed in. Extended audio description actively pauses the video whenever the existing pauses are insufficient for a complete description, which is technically more demanding but can be necessary for complex visual content.

In practice, audio description is often mistakenly treated as an optional extra, even though WCAG 2.2 criterion 1.2.5 at Level AA explicitly requires it. A pragmatic approach for product videos: a second kind="descriptions" track element with WebVTT text that a text-to-speech engine or a screen reader can read aloud in addition to the original audio, provided the player supports this. Alternatively, and compliant with WCAG as a substitute for 1.2.3, a complete transcript that also textually describes the visual content is sufficient when no standalone audio description track is produced.

6. Transcripts: text as an SEO booster and fallback

A transcript is the complete textual version of a video, including speaker identification, relevant sounds, and descriptions of visual content. Unlike captions, a transcript is not time-synced and is provided as standalone, searchable text on the page or as a linked document. For users with deafblindness who rely on braille displays, the transcript is often the only accessible form of the video content, since neither captions nor audio description are usable for them.

The SEO effect is a frequently overlooked bonus: Google cannot directly understand video content, but a complete transcript on the same page delivers indexable, semantically rich text to search engines, covering additional keywords and long-tail queries. A product video with a transcript often ranks for search queries that appear in the spoken text but are missing from the surrounding page copy. Technically, a simple, semantically correct block of text below the video is enough, ideally with timestamp anchors that jump to the matching point in the video on click.

<!-- Transcript block below the video, semantically marked up and deep-linkable -->
<section aria-labelledby="transcript-heading" class="prose">
    <h3 id="transcript-heading">Transcript: Setting Up Your Headphones</h3>
    <p>
        <a href="#t=0">[00:00]</a> Welcome to the setup guide for our
        wireless over-ear headphones.
    </p>
    <p>
        <a href="#t=4">[00:04]</a> Press and hold the power button for
        three seconds until you hear a chime.
    </p>
    <p>
        <a href="#t=8">[00:08]</a> The LED indicator flashes blue. This
        signals that pairing mode is active.
    </p>
    <p>
        <a href="#t=12">[00:12]</a> Open your device's Bluetooth settings
        and select "MS Headphone Pro" from the list.
    </p>
</section>

7. Practical workflow: from product video to accessible upload

A repeatable workflow prevents accessibility from being reinvented as a special task for every new product video. Step one: the raw video is automatically transcribed with a transcription tool, such as Whisper or a cloud service, followed by manual correction from someone who knows the product. Automatic speech recognition often reaches over 90 percent accuracy with clear studio-quality audio, but reliably fails on product names, technical terms, and accents, which is why the manual review step is not optional.

Step two: a WebVTT file is generated from the corrected text, either by exporting it from the transcription tool or through a custom script that converts timestamps from the speech analysis into cues. Step three: a second pass through the video identifies moments with relevant visual information that has no counterpart in the audio, from which the audio description cues or transcript additions are derived. Step four: both files, the WebVTT captions and the complete transcript, are stored together with the video in the Magento backend as media assets and linked via the track element and a transcript block respectively. A video that skips these four steps is not release-ready in an accessible development process.

{
  "video_asset": {
    "sku": "MS-HEADPHONE-PRO",
    "source_file": "wireless-headphone-setup.mp4",
    "duration_seconds": 24,
    "captions": [
      { "lang": "de", "file": "wireless-headphone-setup.de.vtt", "kind": "captions", "reviewed": true },
      { "lang": "en", "file": "wireless-headphone-setup.en.vtt", "kind": "captions", "reviewed": true }
    ],
    "descriptions": [
      { "lang": "en", "file": "wireless-headphone-setup.desc.en.vtt", "kind": "descriptions", "reviewed": true }
    ],
    "transcript": {
      "file": "wireless-headphone-setup.transcript.en.html",
      "includes_visual_descriptions": true
    },
    "workflow_status": "reviewed_and_published"
  }
}

8. Implementation in the Hyva theme: player, Alpine.js, and layout XML

In the Hyva theme, the native <video> element remains the right foundation, rather than loading a heavy JavaScript player library that undoes the benefits of Hyva's small JS bundle. A lean Alpine.js snippet is enough to provide additional controls such as a toggle for the audio description track or a jump link to the transcript, without replacing the browser's native captions mechanism. It is important to never simulate kind="captions" or kind="descriptions" in JavaScript when the native mechanism already delivers the same function, because that creates unnecessary failure points and screen reader incompatibilities.

The WebVTT files and the transcript are best served through a dedicated ViewModel that reads the media URLs from the product data instead of hardcoding them in the template. Layout XML makes it possible to render the video block only on product pages that have a demo video attached, while products without a video never render the block at all. That prevents empty video tags without track elements from accidentally lingering in the code as incomplete accessibility implementations.

// Alpine.js component: toggle audio description track and jump to transcript
// without replacing the browser's native caption handling
function accessibleVideoPlayer() {
  return {
    descriptionsEnabled: false,

    init() {
      this.video = this.$refs.videoEl;
    },

    toggleDescriptions() {
      this.descriptionsEnabled = !this.descriptionsEnabled;
      const track = [...this.video.textTracks].find(t => t.kind === 'descriptions');
      if (track) {
        track.mode = this.descriptionsEnabled ? 'showing' : 'disabled';
      }
    },

    jumpToTranscript(seconds) {
      // Deep-link from transcript timestamp into the video
      this.video.currentTime = seconds;
      this.video.play();
    }
  };
}

9. Captions, audio description, and transcript compared

The three building blocks of accessible video solve different problems, but in practice are often confused or treated as interchangeable. The following overview shows which building block is mandatory for which target group and which format is used for it.

The recurring mistake across every row in the table is the same: a team implements only the building block that is easiest to automate, usually automatic caption generation, and considers the topic closed. For genuine WCAG compliance and for a product video that is actually usable, all four building blocks above are needed together, not in isolation.

10. Summary

Accessible videos solve a problem that, without deliberate planning, is nearly always solved only halfway. Captions via WebVTT and the HTML track element make spoken content readable for deaf and hard-of-hearing users, are natively supported in the browser, and require no additional JavaScript library. Audio description is the frequently forgotten second half and makes visual information audible for blind users, either as its own audio track or as a kind="descriptions" track. Transcripts complement both as searchable, SEO-relevant text and are often the only accessible route to the video content for deafblind users.

The decisive lever lies in a repeatable production workflow: automatic transcription with manual correction, WebVTT export, a second pass for visual descriptions, and clean integration via the native track element in the Hyva theme. Since the Barrierefreiheitsstarkungsgesetz took effect, this is no longer optional polish but a legal obligation for online stores in Germany, with WCAG 2.1 Level AA as the benchmark.

11. FAQ: Accessible Videos, Captions, and Transcripts