Caption Choice - Everyday Interface Patterns

A static caption preference menu shows pinned language options and captions on, with no media track loading.

Program

Caption choices should make the current preference clear. This lesson shows a static captions-on state without loading tracks.

caption_choice_menu.html

Visuals: captured from real browser rendering

<form class="caption-menu" aria-describedby="caption-note">
  <fieldset>
    <legend>Captions</legend>
    <label><input type="radio" name="captions" value="off"> Off</label>
    <label><input type="radio" name="captions" value="en" checked> English</label>
    <label><input type="radio" name="captions" value="es"> Spanish</label>
  </fieldset>
  <p role="status">Captions on: English.</p>
  <p id="caption-note" class="note">Static preference only; no caption track is loaded.</p>
</form>
<style>
  .caption-menu { display: grid; gap: 10px; max-width: 32rem; border: 1px solid #94a3b8; padding: 12px; }
  .caption-menu fieldset { display: grid; gap: 8px; border: 1px solid #cbd5e1; }
  .caption-menu p, .note { margin: 0; }
  .note { color: #475569; }
</style>

Connect the note to the caption menu.
The form points to the no-track-loading note.
Group the caption options.
The fieldset keeps the caption choices together.
Name the caption choices.
The legend names the preference surface.
Pin the selected captions language.
The checked radio sets English captions as the static state.
Show the selected caption status.
The status text repeats the pinned captions-on state.
Check the caption choice menu.
The menu shows pinned options, English selected, and says no caption track loads.

caption preference A fieldset groups the caption choices under one legend.

selected language The checked radio pins the current captions-on language.

no track loading The lesson should not imply a real media text track loaded.