WCAG 2.2 Demo Suite

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

Extended Audio Description (Prerecorded)

Where the pauses in the foreground audio are too short to carry adequate description, extended audio description pauses the video to allow a longer description.

Who this affects

Blind and low-vision users watching dense visual content — a software demo or a lab procedure — where standard description cannot fit in the gaps.

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

Open the failing example in a new tab

fail.html — the problem

<h1>How to reserve a book — screen recording</h1>

<!-- FAILURE: this clip is visually dense. Each card is on screen for four
     seconds and carries several lines of information, while the soundtrack has
     almost no gaps long enough to describe them in.

     Standard audio description has to fit in the existing pauses. When the
     visuals are this dense, it cannot - the describer either talks over the
     content or leaves things out. 1.2.7 exists for exactly this case and
     requires an EXTENDED description, which pauses the video to make room.

     Here there is neither: only a standard descriptions track that cannot
     possibly fit everything. -->
<video controls width="640">
  <source src="../../assets/media/shop-tour.mp4" type="video/mp4">
  <track kind="captions" src="../../assets/media/shop-tour-captions.vtt"
         srclang="en" label="English" default>
  <track kind="descriptions" src="../../assets/media/shop-tour-descriptions.vtt"
         srclang="en" label="Audio description">
</video>

Meets 1.2.7

Open the passing example in a new tab

pass.html — the fix

<h1>How to reserve a book — screen recording</h1>

<!-- FIX: an extended-description version, offered as a choice. It PAUSES the
     video at each dense moment so the description has room to be complete,
     then resumes. The clip runs longer than the original, which is the whole
     point: time is what was missing. -->
<p>
  <button type="button" class="button button--secondary" id="ext" aria-pressed="false">
    Play the extended audio described version</button>
</p>

<video controls width="640" id="player">
  <source src="../../assets/media/shop-tour.mp4" type="video/mp4">
  <track kind="captions" src="../../assets/media/shop-tour-captions.vtt"
         srclang="en" label="English" default>
  <track kind="descriptions" src="../../assets/media/shop-tour-descriptions.vtt"
         srclang="en" label="Audio description">
</video>
<p id="mode" role="status">Playing the standard version.</p>

<div class="note">
  <h2>How to tell whether you need 1.2.7</h2>
  <ol>
    <li>Write the description you would need for 1.2.5.</li>
    <li>Read it aloud against the video, using only the existing gaps in the audio.</li>
    <li>If you cannot finish a description before the next thing happens, the pauses
        are too short and you need an extended version.</li>
  </ol>
  <p>Software demos, screen recordings, lab procedures and anything with dense
     on-screen text are the usual candidates. A talking-head interview almost never is.</p>
  <p><strong>The cheapest fix remains the script.</strong> If the narration says what
     the screen shows, the pauses never need to carry the load and no extended version
     is required.</p>
</div>

How to test it

Identify video with dense visuals and little silence. Confirm an extended-description version exists that pauses playback to describe.

  • Automated

    Requires human review of timing and content density.

    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