WCAG 2.2 Demo Suite

1.2.1 Level A Guideline 1.2 Time-based Media Added in WCAG 2.0 Not detectable automatically

Audio-only and Video-only (Prerecorded)

Prerecorded audio-only content has a text transcript. Prerecorded video-only content has either a transcript or an audio track describing what is shown.

Who this affects

Deaf and hard-of-hearing users cannot access audio-only content such as a podcast. Blind users cannot access silent video such as an animated explainer or a screen recording with no narration.

The failure and the fix

Each example below is a self-contained page, loaded in a frame so its markup cannot affect this page. Open either one on its own to test it with a keyboard or screen reader.

Fails 1.2.1

Open the failing example in a new tab

fail.html — the problem

<h1>Media library</h1>

<!-- FAILURE 1: audio-only content with no transcript. A deaf or hard-of-hearing
     user gets nothing at all from this file. Note the criterion is not
     satisfied by a caption track - audio-only content needs a TEXT
     ALTERNATIVE that can be read. -->
<h2>Shop doorbell recording</h2>
<audio controls src="../../assets/media/shop-doorbell.mp3"></audio>

<!-- FAILURE 2: video-only content with no transcript and no described audio.
     This clip has NO audio track at all, so a blind user gets nothing:
     silence, and no way to find out what is on screen. All the information -
     the opening hours, the delivery threshold, the web address - exists only
     as pixels. -->
<h2>A short tour of the shop</h2>
<video controls width="640" src="../../assets/media/shop-tour-silent.mp4"></video>

<!-- Neither piece of media links to any alternative anywhere on the page. -->

Meets 1.2.1

Open the passing example in a new tab

pass.html — the fix

<h1>Media library</h1>

<!-- FIX 1: audio-only gets a full text transcript, on the same page, right
     next to the player. Putting it behind a <details> keeps the page tidy
     without hiding it from assistive technology - the summary is a real
     control, announced as "Transcript, button, collapsed". -->
<h2>Shop doorbell recording</h2>
<audio controls src="../../assets/media/shop-doorbell.mp3"></audio>
<details class="transcript">
  <summary>Transcript of "Shop doorbell" (audio only, 20 seconds)</summary>
  <dl>
    <dt>00:00</dt><dd>A shop doorbell chimes twice, high then low, as a customer enters.</dd>
    <dt>00:09</dt><dd>A small counter bell rings once.</dd>
    <dt>00:13</dt><dd>A telephone rings four times and is not answered.</dd>
    <dt>00:18</dt><dd>The doorbell chimes again, low then high, as the door closes.</dd>
  </dl>
  <p>There is no speech in this recording.</p>
</details>

<!-- FIX 2: video-only gets a text alternative describing everything shown.
     1.2.1 offers a choice for video-only: a text alternative OR an audio track
     that describes the visuals. The text version is used here because it also
     serves deafblind users reading with a braille display. -->
<h2>A short tour of the shop</h2>
<video controls width="640" src="../../assets/media/shop-tour-silent.mp4"></video>
<details class="transcript">
  <summary>Text alternative for "A short tour of the shop" (video only, 20 seconds)</summary>
  <p>A sequence of five title cards. There is no sound.</p>
  <dl>
    <dt>00:00</dt><dd>Riverline Books. A short tour.</dd>
    <dt>00:04</dt><dd>Opening hours. Monday to Friday, 9am to 6pm. Saturday, 10am to 4pm. Sunday, closed.</dd>
    <dt>00:08</dt><dd>Reserve online. Collect in store within seven days.</dd>
    <dt>00:12</dt><dd>Free delivery on orders over 25 pounds.</dd>
    <dt>00:16</dt><dd>riverlinebooks.example. Thanks for visiting.</dd>
  </dl>
</details>

<!-- A transcript is often the cheapest accessibility win there is: it serves
     deaf users, blind users, deafblind users, people on a train with no
     headphones, and anyone who would rather skim than watch - and it makes the
     content searchable, which nothing else on this list does. -->

How to test it

Find every audio-only and video-only file. Confirm a transcript exists, is reachable from the same page, and conveys the same information — including who is speaking and any meaningful sound.

  • Automated

    No tool can tell whether a transcript exists elsewhere on the page or whether it matches the media. This is entirely a human judgement.

    No axe rule maps to this criterion. It has to be checked by a person.

  • Keyboard

    Unplug the mouse. Move through the page with Tab, Shift+Tab, Enter, Space and the arrow keys. See the keyboard testing script.

  • Screen reader

    Listen to both examples with NVDA, JAWS, VoiceOver or TalkBack and compare what is announced. See the screen reader cheat sheets.

  • Visual

    Zoom to 200% and 400%, narrow the viewport to 320 px, and apply the text-spacing overrides. See the visual testing procedures.

In the specification