WCAG 2.2 Demo Suite

1.2.4 Level AA Guideline 1.2 Time-based Media Added in WCAG 2.0 Not detectable automatically

Captions (Live)

Captions are provided for all live audio content in synchronised media — webinars, live streams, virtual events.

Who this affects

Deaf and hard-of-hearing users, who are excluded from live events in real time. A transcript published afterwards does not satisfy this criterion.

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.4

Open the failing example in a new tab

fail.html — the problem

<h1>Live: Spring festival opening</h1>

<!-- FAILURE: a live stream with no real-time captions.
     There is no captions track, no CART operator, and no live transcript pane.
     A deaf or hard-of-hearing attendee is excluded from the event AS IT
     HAPPENS - which is the whole point of attending something live. -->
<div class="stage">
  <p><span class="live-dot" aria-hidden="true"></span><strong>LIVE</strong> — streaming now</p>
  <p>Opening remarks from the festival director</p>
</div>

<!-- FAILURE 2: the common excuse, stated openly. Publishing a transcript
     afterwards does NOT satisfy 1.2.4. The criterion is about access at the
     time of broadcast: a recording posted tomorrow means a deaf attendee could
     not ask a question, could not react with everyone else, and could not
     participate. -->
<p>A full transcript will be published within 48 hours of the event.</p>

Meets 1.2.4

Open the passing example in a new tab

pass.html — the fix

<h1>Live: Spring festival opening</h1>

<div class="stage">
  <p><span class="live-dot" aria-hidden="true"></span><strong>LIVE</strong> — streaming now</p>
  <p>Opening remarks from the festival director</p>
</div>

<!-- FIX 1: real-time captions, delivered during the broadcast. In production
     this pane is fed by a live captioning service (CART) or by the streaming
     platform's live caption track.

     aria-live="polite" so new text is announced without interrupting, and
     aria-atomic="false" so only the newly added line is read rather than the
     whole pane each time - which is what makes a live caption pane bearable
     to listen to. -->
<h2 id="cc-h">Live captions</h2>
<div class="cc" role="log" aria-live="polite" aria-atomic="false" aria-labelledby="cc-h" id="cc">
  <p>[applause]</p>
  <p>DIRECTOR: Good evening, and welcome to the Spring festival.</p>
</div>

<!-- FIX 2: tell people what access provision exists BEFORE the event, so they
     can decide whether to attend. This is not required by the criterion, but
     it is what makes it usable in practice. -->
<h2>Access at this event</h2>
<ul>
  <li>Live captions are provided throughout by a human captioner.</li>
  <li>A British Sign Language interpreter is on the stream from 7pm.</li>
  <li>A corrected transcript will be published within 48 hours.</li>
</ul>

<!-- Practical notes:
     - Automatic live captions are better than nothing, but their accuracy on
       names, place names and technical terms is poor. For an event that
       matters, budget for a human captioner.
     - The recording you publish afterwards is PRERECORDED media, so it falls
       under 1.2.2 and needs its own corrected captions. Live captions being
       provided does not exempt the recording. -->

How to test it

Attend or review a recording of the live stream as delivered. Confirm real-time captions were available during the broadcast, with acceptable accuracy and latency.

  • Automated

    Requires observing a live event as it happens.

    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