WCAG 2.2 Demo Suite

1.2.9 Level AAA Guideline 1.2 Time-based Media Added in WCAG 2.0 Not detectable automatically

Audio-only (Live)

A text alternative presenting equivalent information is provided for live audio-only content, such as a live radio broadcast or audio-only conference call.

Who this affects

Deaf and hard-of-hearing users attending live audio-only events.

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

Open the failing example in a new tab

fail.html — the problem

<h1>Live: Riverline Radio book club</h1>

<!-- FAILURE: a live audio-only broadcast - no picture, so captions have
     nowhere to appear and no captions track is offered. There is no live
     transcript, no CART provision, and nothing to read.

     A deaf or hard-of-hearing listener simply cannot attend. Note that this is
     AUDIO-ONLY: 1.2.4 covers live synchronised media (audio plus video), while
     1.2.9 covers live audio on its own - a radio stream, a phone-in, an
     audio-only conference call. -->
<div class="stage">
  <p><strong>LIVE</strong> — audio stream</p>
  <p>This month's book club discussion, broadcasting now</p>
</div>

<p>A recording will be available to members next week.</p>

Meets 1.2.9

Open the passing example in a new tab

pass.html — the fix

<h1>Live: Riverline Radio book club</h1>

<div class="stage">
  <p><strong>LIVE</strong> — audio stream</p>
  <p>This month's book club discussion, broadcasting now</p>
</div>

<!-- FIX: a real-time text alternative, delivered live. In production this pane
     is fed by a CART captioner or a live speech-to-text service.

     role="log" with aria-live="polite" and aria-atomic="false" means each new
     line is announced as it arrives, rather than the whole pane being re-read
     every time - which is what makes a live text pane usable with a screen
     reader rather than maddening. -->
<h2 id="lt-h">Live transcript</h2>
<div class="cc" role="log" aria-live="polite" aria-atomic="false" aria-labelledby="lt-h" id="lt">
  <p>PRESENTER: Welcome to the Riverline Radio book club.</p>
  <p>PRESENTER: This month we are reading Tidal Flats.</p>
</div>

<h2>Access at this broadcast</h2>
<ul>
  <li>A live transcript runs throughout, produced by a human captioner.</li>
  <li>A corrected transcript is published with the recording within 48 hours.</li>
  <li>Questions can be sent by text message as well as by phone.</li>
</ul>

<!-- Note the criteria this sits between:
       1.2.4 (AA)  live synchronised media  -> captions
       1.2.9 (AAA) live audio-only          -> a text alternative
     And afterwards, the RECORDING is prerecorded media, so it needs its own
     transcript under 1.2.1. Live provision does not exempt the archive. -->

How to test it

Confirm live captioning or real-time text (CART) is offered during the broadcast.

  • Automated

    Requires observing the live event.

    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