Markdown Editor

Screencast Script Template (WCAG 2.2 Captions, WebVTT)

Screencast script: narration vs action table, reset state, exact commands, zoom, pacing, chapters, WebVTT captions, transcript, audio description

Documentation & SupportFullWCAG 2.2 SC 1.2.1 to 1.2.5; W3C WebVTTscreencastscript

How to use: Use it when recording a product demo or docs video that teaches one task. Fill the environment and reset state first, then the two-column script from a tested written procedure. The main pitfall is treating captions, transcript and audio description as extras added after the edit.

Preview

Screencast Script: [Task or feature shown]

Production script for a technical screencast: a recorded screen walkthrough that shows a real product task step by step. It covers the learning outcome, the recording environment and its reset state, a two-column script of narration against on-screen action, the exact clicks and commands, zoom and callouts, pacing, chapter markers, the captions file, the transcript and audio-description notes. The accessibility deliverables follow the time-based media success criteria 1.2.1 to 1.2.5 of WCAG 2.2 (W3C Recommendation, 2024-12-12) and captions use the WebVTT format (W3C). Replace every [bracketed] value and every row marked Example.

Document control

FieldValue
Document ID[SCR-001]
Video title[Title as published]
Product and version shown[Product name] [version or release date]
Target length[mm:ss]
Publishing location[Docs page URL, video platform, in-product help]
Linked written procedure[URL or slug of the tutorial or how-to guide]
Version[0.1]
Status[Draft / Technical review / Ready to record / Recorded / Published / Retired]
Owner[@docs-writer]
Approvers/reviewers[@subject-matter-expert], [@docs-lead], [@accessibility-reviewer]
Last updatedYYYY-MM-DD
Classification[Internal / Public]

Approvals

RoleNameDecisionDate
Subject-matter expert (technical accuracy)[@name][Approve / Approve with conditions / Reject]YYYY-MM-DD
Documentation lead[@name][Decision]YYYY-MM-DD
Accessibility reviewer[@name][Decision]YYYY-MM-DD

Revision history

VersionDateAuthorChange summary
0.1YYYY-MM-DD[@name]First draft
1.0YYYY-MM-DD[@name]Example: Approved for recording after dry run
1.1YYYY-MM-DD[@name]Example: Segment SEG-04 re-recorded after the Refund button moved

Contents

1. Purpose and learning outcome

FieldValue
Viewer[Role and experience, for example "integrating developer who has a sandbox account"]
Prerequisites[What the viewer must already have or know]
Learning outcomeAfter watching, the viewer can [single observable task].
Out of scope[Related tasks deliberately not shown, with links]
Diátaxis type[Tutorial (learning) / How-to (task)]
Success measure[For example "viewer completes the linked how-to without a support ticket"; measured only with aggregate, cookieless analytics]

Example: Viewer is a Corvid Commerce merchant developer with a sandbox account and an existing test payment. Learning outcome: after watching, the viewer can issue a full and a partial refund from the dashboard and confirm the refund through the API. Out of scope: disputes and chargebacks, which have their own video.

Keep one outcome per video. If the outline needs two outcomes, split it into two videos and link them as a series with chapter markers on each.

2. Production specification

ItemSpecification
Recording resolution[1920x1080] at [100%] display scaling; browser zoom [125%] for UI text
Frame rate[30] fps
Screen area[Single application window, fixed size 1600x900 inside the frame]
Recording tool[Tool name and version]
Microphone and room[Microphone model], quiet room, pop filter, no background music under narration
Narration[Live with recording / Recorded separately and synced]
Voice[Name or role]; plain, steady delivery, consistent terminology from the termbase
Output files[MP4 (H.264/AAC)], captions .vtt, transcript .md or .html, chapters .vtt
Target length[mm:ss]; hard maximum [mm:ss]
Branding[Intro card length, outro card, lower thirds]
Localisation[Languages for captions and transcript; on-screen UI language]

Record with system notifications disabled, a clean browser profile, and a neutral desktop. Use a cursor size large enough to follow on a phone and enable click highlighting only if the recording tool does it consistently.

3. Environment setup and reset state

3.1 Environment

ItemValue
Environment[Sandbox / Staging / Local build]; never production with real customer data
Product version[Version, build or release date]
Browser and version[Browser] [version], clean profile, extensions disabled
Operating system[OS and version], light theme, default fonts
Account[Demo account name], role [role]; fictional company and people only
CredentialsTest keys only, stored outside the recording; secrets masked in config before recording
Language and locale[en-US], currency [USD], time zone [UTC]
Feature flags[Flags on or off for the recording]

3.2 Seed data

Data IDObjectValuesCreated by
DATA-01 (Example)Customer"Ada Example", ada@example.com (fictional)Seed script
DATA-02 (Example)PaymentUSD 120.00, card ending 4242 (test card), status SucceededSeed script
DATA-03 (Example)PaymentUSD 45.50, status Succeeded, used for partial refundSeed script

3.3 Reset procedure

Run the reset before every take and before re-recording any segment.

# Example reset for the Corvid Commerce sandbox (fictional commands)
corvid sandbox reset --account demo-refunds --confirm
corvid sandbox seed --file seeds/refund-demo.json
corvid sandbox status --account demo-refunds

Reset checklist:

  • Reset script completed without errors and status shows the seed objects in the expected states.
  • Browser cache, autofill and saved passwords cleared.
  • Previous refunds removed, so lists start in the same order.
  • Notifications, chat apps and calendar alerts closed or muted.
  • Terminal history cleared; prompt shortened to $.
  • Window sizes and zoom match section 2.

4. Two-column script

Write narration as it will be spoken: short sentences, second person, present tense, the same terms as the UI labels. Give each segment an ID so reviewers, editors and the captions file can refer to it. Timecodes are targets and are corrected after the edit.

SegmentTarget timeNarration (audio)On-screen action (video)
SEG-01 (Example)00:00 to 00:12"In this video, you issue a full refund and a partial refund in the Corvid Commerce dashboard, then confirm them through the API."Title card for 3 seconds, then the dashboard home page in the sandbox account.
SEG-02 (Example)00:12 to 00:30"You need a sandbox account with at least one successful payment. The link to set this up is in the description."Callout box over the "Sandbox" badge in the top bar. Lower third: "Prerequisite: sandbox account".
SEG-03 (Example)00:30 to 00:55"Open Payments, then select the payment for one hundred twenty dollars."Click Payments in the left navigation. Zoom to the payments table. Click the row for USD 120.00 (DATA-02).
SEG-04 (Example)00:55 to 01:25"Select Refund. Leave the amount at the full value, choose a reason, and select Refund payment."Click Refund. Dialog opens. Zoom to the dialog. Choose reason Requested by customer. Click Refund payment. Pause 1 second on the success message.
SEG-05 (Example)01:25 to 01:50"The payment now shows Refunded, and the timeline lists the refund with its ID."Zoom out to the payment detail. Callout arrow to the status badge Refunded, then to the refund ID in the timeline.
SEG-06 (Example)01:50 to 02:30"For a partial refund, open the forty-five fifty payment, select Refund, and enter twenty dollars."Navigate back. Click the USD 45.50 row (DATA-03). Click Refund. Clear the amount field, type 20.00. Click Refund payment.
SEG-07 (Example)02:30 to 03:10"To confirm from code, list the refunds for the payment. The response shows one refund of two thousand cents with status succeeded."Switch to terminal. Type the command from CMD-02 at readable speed. Zoom to the JSON response and highlight amount and status.
SEG-08 (Example)03:10 to 03:25"You issued a full and a partial refund and verified them. Next, learn how to receive refund webhooks."End card with links to the written how-to guide and the webhooks video.

Script rules:

  • One beat per row: one instruction, one visible result.
  • Name UI elements exactly as labelled, in bold in the right column.
  • Say numbers as they will be read aloud; keep the exact value in the action column and the captions.
  • Leave a short silent pause after every result the viewer must see, so the edit has room and audio description has a gap (section 11).
  • Do not narrate keyboard shortcuts without also showing the menu path.

5. Exact commands and inputs

Input IDSegmentTypeExact inputExpected result
CMD-01 (Example)SEG-04UI selectionReason: Requested by customerReason field shows the selection
CMD-02 (Example)SEG-07Shellcurl https://sandbox.api.corvid.example/v1/payments/pay_demo_045/refunds -H "Authorization: Bearer $CORVID_TEST_KEY"JSON list with one refund, amount 2000, status succeeded
CMD-03 (Example)SEG-06Text fieldAmount: 20.00Amount field accepts the value; button stays enabled

Rules for commands on screen:

  • Use environment variables for every key and token. Never show a secret, even a test one, in full.
  • Type commands live at a readable pace or paste them with a visible pause; do not cut away while a command runs unless a caption says so.
  • Use a monospace font at a size readable on a phone, and wrap or scroll long commands so nothing runs off screen.
  • Every command shown appears in the linked written procedure, word for word.

6. Zoom, callouts and visual treatment

TreatmentWhen to useSpecification
Zoom inSmall controls, dialogs, response fieldsUp to [150 to 200]% centred on the target; ease in over about half a second
Zoom outAfter a result, to restore contextReturn to 100% before moving to another area
Callout box or arrowTo point to a status, ID or labelHigh contrast against the background; stays at least 2 seconds
Highlight or spotlightTo isolate one field in dense outputDim the rest; never hide information the narration mentions
Lower thirdPrerequisites, version, warningsShort text, also spoken in narration or captioned
Blur or maskAny personal data, keys, internal URLsApplied in the recording or edit; double-checked in review

Visual rules:

  • Do not convey meaning by colour alone; pair colour with a shape, label or narration.
  • Avoid flashing transitions. Keep any flashing within the WCAG 2.2 success criterion 2.3.1 limits (three flashes or below threshold).
  • Keep text callouts in the same language as the narration and include them in the transcript.

7. Pacing and timing

ParameterTargetNotes
Narration rate[About 130 to 150] words per minuteSlower for terms the viewer has not met before; record a test and adjust
Pause after a result[1 to 2] secondsLonger for dense output
Maximum segment length[45] secondsLong segments are split with a chapter marker
Cursor movementDeliberate, direct paths; no circlingRest the cursor away from text being read
Total length[mm:ss]Script word count divided by narration rate, plus pauses

Example: The Corvid Commerce refund script has 140 spoken words (23, 21, 11, 16, 14, 15, 22 and 18 across SEG-01 to SEG-08). At 140 words per minute that is 1 minute of speech; with eight pauses of about 2 seconds and a 10-second end card the narrated length is about 1 minute 26 seconds. The 3 minute 25 second plan in section 4 therefore leaves about 2 minutes for unnarrated actions such as navigation, dialog steps and typing in SEG-07. Recompute after the edit.

8. Chapter markers

ChapterStartTitleSegments
CH-01 (Example)00:00Introduction and prerequisitesSEG-01, SEG-02
CH-02 (Example)00:30Issue a full refundSEG-03 to SEG-05
CH-03 (Example)01:50Issue a partial refundSEG-06
CH-04 (Example)02:30Confirm refunds with the APISEG-07
CH-05 (Example)03:10Next stepsSEG-08

Publish chapters in the form the player supports: a chapters text track in WebVTT for HTML <track kind="chapters">, or a timestamp list in the video description for platforms that read it. Use the same titles in both and in the transcript headings.

9. Captions file

Deliver captions as a WebVTT file (text/vtt, UTF-8, first line WEBVTT), as defined by the W3C WebVTT specification. Check the current specification status at https://www.w3.org/TR/webvtt1/.

WEBVTT

SEG-01
00:00:00.000 --> 00:00:04.500
In this video, you issue a full refund
and a partial refund

SEG-01b
00:00:04.500 --> 00:00:09.000
in the Corvid Commerce dashboard,
then confirm them through the API.

SEG-04
00:00:55.000 --> 00:00:59.000
Select Refund. Leave the amount
at the full value,

SEG-07-sfx
00:02:41.000 --> 00:02:42.500
[keyboard typing]

Caption rules:

  • Verbatim narration, edited only for accuracy of product terms, commands and numbers.
  • Two lines at most per cue, about 32 to 42 characters per line, split at natural phrase boundaries.
  • Minimum cue duration about 1 second; keep reading speed comfortable.
  • Include meaningful non-speech audio in square brackets; omit background music unless it carries meaning.
  • When on-screen text is essential and not spoken, either speak it or cover it in the audio description (section 11).
  • Use the same cue identifiers as segment IDs where practical, so reviewers can trace a caption to the script.
  • Translate captions per the localisation plan; translated captions are subtitles and are reviewed by a fluent reviewer.

10. Transcript

Publish a transcript next to the video on the docs page, or link it directly below the player. A descriptive transcript that covers both audio and meaningful visual information can serve as the media alternative under WCAG 2.2 SC 1.2.3 (Level A) and, for video-only or audio-only content, under SC 1.2.1. It does not replace captions (SC 1.2.2) or, at Level AA, audio description (SC 1.2.5).

Transcript structure:

  1. Title, product version and recording date.
  2. One heading per chapter from section 8.
  3. Narration as paragraphs.
  4. On-screen actions and results in brackets or as separate lines, for example "[The status changes to Refunded.]"
  5. Every command and value in code formatting, copied from section 5.
  6. Links to the written procedure and related videos.

Example extract:

Issue a partial refund. Open the forty-five fifty payment, select Refund, and enter twenty dollars. [The Refund dialog opens. The amount field is cleared and 20.00 is typed. Refund payment is selected. A success message appears and the payment status shows Partially refunded.]

11. Audio description notes

Integrated description is the cheapest route: write the narration so that it already says what changes on screen. Where it does not, plan a description in a natural pause or produce a described version.

AD IDTimeVisual information not in narrationDescription textGap availableMethod
AD-01 (Example)01:22Success toast "Refund created" appears"A message confirms the refund was created."1.5 s pause after SEG-04Integrated into narration
AD-02 (Example)02:52status field highlighted in the JSON response"The status field reads succeeded."2 s pauseIntegrated into narration
AD-03 (Example)03:12End card lists two links"On screen: links to the refund guide and the webhooks video."3 sDescribed in end card narration

Decide the deliverable:

OptionWhen to useNotes
Integrated narrationDefault for new screencastsNo separate track needed when every important visual is spoken
Separate described versionExisting video with silent visual stepsPublish as an alternative version, linked next to the player
Extended audio descriptionGaps too short to describePauses the video to describe; SC 1.2.7 (Level AAA)

12. Accessibility conformance check

Criteria from WCAG 2.2 guideline 1.2 (Time-based Media) and related criteria. Check the levels against the current Recommendation.

CriterionLevelDeliverable in this scriptStatus
1.2.1 Audio-only and Video-only (Prerecorded)ATranscript for any audio-only or video-only clip[Pass / Fail / Not applicable]
1.2.2 Captions (Prerecorded)ASection 9 WebVTT captions[Status]
1.2.3 Audio Description or Media Alternative (Prerecorded)ASection 10 descriptive transcript or section 11 description[Status]
1.2.4 Captions (Live)AANot applicable to prerecorded screencastsNot applicable
1.2.5 Audio Description (Prerecorded)AASection 11 integrated or separate description[Status]
1.2.7 Extended Audio Description (Prerecorded)AAAOptional, section 11[Status]
1.2.8 Media Alternative (Prerecorded)AAAOptional, full descriptive transcript[Status]
1.4.2 Audio ControlAPlayer does not autoplay audio, or offers pause and volume[Status]
2.2.2 Pause, Stop, HideAPlayer controls; no autoplaying motion longer than allowed without pause[Status]
2.3.1 Three Flashes or Below ThresholdASection 6 visual rules[Status]
Player keyboard and screen-reader supportPer site targetEmbedded player operable by keyboard, with labelled controls[Status]

13. Review, recording and maintenance

13.1 Review and recording steps

StepOwnerExit criterion
Script review against the tested written procedure[@docs-writer]Every step and value matches
Technical review[@subject-matter-expert]Accuracy approved
Dry run in the reset environment, timed[@presenter]Length within target; no missing state
Recording[@presenter]All segments recorded with reset between takes
Edit, zoom and callouts[@editor]Section 6 rules met; masks verified
Captions, transcript, chapters, description[@docs-writer]Sections 8 to 11 complete and synced
Accessibility and privacy review[@accessibility-reviewer]Section 12 completed; no personal data or secrets visible
Publish and link[@docs-writer]Video, captions, transcript and written guide linked both ways

13.2 Maintenance

  • Keep source assets (project file, raw recordings, script, captions, transcript, seed data and reset script) in [repository or drive path], versioned with this document.
  • Re-record a segment when the UI label, layout or flow it shows changes, when a command changes, or when the product version shown leaves support. Record the change in the revision history.
  • Review every published screencast at each major release and at least every [12] months. Retire videos whose task is no longer supported, and redirect their page.
  • Measure usefulness with aggregate, cookieless signals only (for example completion of the linked task or page feedback), honour Global Privacy Control, and never require viewer personal data.
Trigger IDTriggerSegments affectedActionDue
RR-01 (Example)Refund dialog redesigned in release [x.y]SEG-04, SEG-06Re-record and update captions and transcriptYYYY-MM-DD

14. Glossary and references

14.1 Glossary

TermMeaning in this document
ScreencastA recording of a computer screen with narration that shows a task
SegmentOne scripted beat of narration and matching action, with an ID
Reset stateThe known environment state restored before each take
CaptionsSynchronised text of speech and meaningful sounds, in the same language as the audio
SubtitlesCaptions translated into another language
TranscriptA text version of the video; descriptive when it also covers visual information
Audio descriptionNarration added to describe important visual information
WebVTTW3C text format for timed text tracks such as captions and chapters
Chapter markerA named start time that lets viewers jump to a section

14.2 References

ReferenceVersion or dateUse in this document
Web Content Accessibility Guidelines (WCAG) 2.2, W3C, https://www.w3.org/TR/WCAG22/W3C Recommendation, 2024-12-12Success criteria 1.2.1 to 1.2.5, 1.2.7, 1.2.8, 1.4.2, 2.2.2, 2.3.1
Understanding WCAG 2.2, W3C WAI, https://www.w3.org/WAI/WCAG22/Understanding/CurrentIntent of the time-based media criteria
WebVTT: The Web Video Text Tracks Format, W3C, https://www.w3.org/TR/webvtt1/Candidate Recommendation Draft, 2026-05-20 (check status)Captions and chapters file format
Diátaxis, https://diataxis.fr/Living siteTutorial versus how-to framing of the video
[Internal brand and video guidelines][Version][Use]

Standard and licence note

Based on the W3C Web Content Accessibility Guidelines (WCAG) 2.2 Recommendation of 2024-12-12, guideline 1.2 Time-based Media and the related criteria listed in section 12, and on the W3C WebVTT specification for the captions and chapters format. Success criterion numbers and short names are cited for mapping; the criteria are paraphrased in original words and no W3C normative text is reproduced. This template is original text written for this collection and is not affiliated with or endorsed by W3C. Check the current official versions of WCAG and WebVTT before use. Template licence: MIT.

Related templates