pattern Status: ready

Captioned Media

Status: ready

Intent

Media that carries meaning can be used without hearing it and without replaying it.

Problem

A video explains setup, safety, brewing or a payment detail. There's no caption track, no transcript, and the caption control changes its name with its state.

Solution

Verdict: a caption track inside the media, a transcript next to the player, any instruction the task needs written in the UI, and media controls with unique names.

Why: a caption track follows the user's system caption settings. A transcript can be read at the user's speed, searched, translated and read on a Braille display. An instruction in the UI doesn't depend on the video at all.

Implementation

Captions come from the media, not from a Text overlay. AVPlayer shows a closed-caption or subtitle track automatically when the user has Closed Captions + SDH on. Details: Chapter 8, Decision 1.

An in-app caption control is a Toggle, so the name stays the same and the state is the value:

Toggle("Captions", isOn: $captionsOn)

Captions, switch button, on

Not a button whose title switches between "Captions on" and "Captions off".

Transcript next to the player, and the required step outside the video:

VStack(alignment: .leading) {
    VideoPlayer(player: player)
    Button("Read transcript") { showTranscript = true }
    Text("Steep for 3 minutes at 80 °C.")
}

Unique control names:

// Bad: two "Play"
Button("Play") { playPreview() }
Button("Play") { playLesson() }

// Good
Button("Play preview") { playPreview() }
Button("Play lesson") { playLesson() }

A sound always has a visible equivalent: an upload chime comes with "Receipt uploaded" on screen.

Check

Profile:   sound off
Task:      learn the brewing steps
Expected:  every step is in captions and in the transcript
           the required numbers are also in the UI

Profile:   Settings → Accessibility → Subtitles & Captioning, Closed Captions + SDH on
Task:      play the video
Expected:  captions appear without touching the in-app control

Profile:   VoiceOver and Voice Control
Task:      use the media controls
Expected:  "Captions, switch button, on"
           "Tap Play lesson" works without numbers

Pitfalls

Live Captions in iOS is the user's fallback, not the app's captions.
Captions drawn as a Text overlay ignore system caption style.
Captions covering the player controls.
A transcript hidden in Help.
Auto-playing audio without a visible pause.

WCAG mapping

1.2.2 Captions (Prerecorded): video with audio has captions.
1.2.1 Audio-only and Video-only: a text alternative exists.
1.2.3 Audio Description or Media Alternative: important visual content is described.
1.4.2 Audio Control: the user can stop audio.