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
使い方: 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.
プレビュー
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
| Field | Value |
|---|---|
| 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 updated | YYYY-MM-DD |
| Classification | [Internal / Public] |
Approvals
| Role | Name | Decision | Date |
|---|---|---|---|
| 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
| Version | Date | Author | Change summary |
|---|---|---|---|
| 0.1 | YYYY-MM-DD | [@name] | First draft |
| 1.0 | YYYY-MM-DD | [@name] | Example: Approved for recording after dry run |
| 1.1 | YYYY-MM-DD | [@name] | Example: Segment SEG-04 re-recorded after the Refund button moved |
Contents
- Purpose and learning outcome
- Production specification
- Environment setup and reset state
- Two-column script
- Exact commands and inputs
- Zoom, callouts and visual treatment
- Pacing and timing
- Chapter markers
- Captions file
- Transcript
- Audio description notes
- Accessibility conformance check
- Review, recording and maintenance
- Glossary and references
- Standard and licence note
1. Purpose and learning outcome
| Field | Value |
|---|---|
| Viewer | [Role and experience, for example "integrating developer who has a sandbox account"] |
| Prerequisites | [What the viewer must already have or know] |
| Learning outcome | After 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
| Item | Specification |
|---|---|
| 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
| Item | Value |
|---|---|
| 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 |
| Credentials | Test 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 ID | Object | Values | Created by |
|---|---|---|---|
| DATA-01 (Example) | Customer | "Ada Example", ada@example.com (fictional) | Seed script |
| DATA-02 (Example) | Payment | USD 120.00, card ending 4242 (test card), status Succeeded | Seed script |
| DATA-03 (Example) | Payment | USD 45.50, status Succeeded, used for partial refund | Seed 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.
| Segment | Target time | Narration (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 ID | Segment | Type | Exact input | Expected result |
|---|---|---|---|---|
| CMD-01 (Example) | SEG-04 | UI selection | Reason: Requested by customer | Reason field shows the selection |
| CMD-02 (Example) | SEG-07 | Shell | curl 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-06 | Text field | Amount: 20.00 | Amount 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
| Treatment | When to use | Specification |
|---|---|---|
| Zoom in | Small controls, dialogs, response fields | Up to [150 to 200]% centred on the target; ease in over about half a second |
| Zoom out | After a result, to restore context | Return to 100% before moving to another area |
| Callout box or arrow | To point to a status, ID or label | High contrast against the background; stays at least 2 seconds |
| Highlight or spotlight | To isolate one field in dense output | Dim the rest; never hide information the narration mentions |
| Lower third | Prerequisites, version, warnings | Short text, also spoken in narration or captioned |
| Blur or mask | Any personal data, keys, internal URLs | Applied 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
| Parameter | Target | Notes |
|---|---|---|
| Narration rate | [About 130 to 150] words per minute | Slower for terms the viewer has not met before; record a test and adjust |
| Pause after a result | [1 to 2] seconds | Longer for dense output |
| Maximum segment length | [45] seconds | Long segments are split with a chapter marker |
| Cursor movement | Deliberate, direct paths; no circling | Rest 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
| Chapter | Start | Title | Segments |
|---|---|---|---|
| CH-01 (Example) | 00:00 | Introduction and prerequisites | SEG-01, SEG-02 |
| CH-02 (Example) | 00:30 | Issue a full refund | SEG-03 to SEG-05 |
| CH-03 (Example) | 01:50 | Issue a partial refund | SEG-06 |
| CH-04 (Example) | 02:30 | Confirm refunds with the API | SEG-07 |
| CH-05 (Example) | 03:10 | Next steps | SEG-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:
- Title, product version and recording date.
- One heading per chapter from section 8.
- Narration as paragraphs.
- On-screen actions and results in brackets or as separate lines, for example "[The status changes to Refunded.]"
- Every command and value in code formatting, copied from section 5.
- 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.00is 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 ID | Time | Visual information not in narration | Description text | Gap available | Method |
|---|---|---|---|---|---|
| AD-01 (Example) | 01:22 | Success toast "Refund created" appears | "A message confirms the refund was created." | 1.5 s pause after SEG-04 | Integrated into narration |
| AD-02 (Example) | 02:52 | status field highlighted in the JSON response | "The status field reads succeeded." | 2 s pause | Integrated into narration |
| AD-03 (Example) | 03:12 | End card lists two links | "On screen: links to the refund guide and the webhooks video." | 3 s | Described in end card narration |
Decide the deliverable:
| Option | When to use | Notes |
|---|---|---|
| Integrated narration | Default for new screencasts | No separate track needed when every important visual is spoken |
| Separate described version | Existing video with silent visual steps | Publish as an alternative version, linked next to the player |
| Extended audio description | Gaps too short to describe | Pauses 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.
| Criterion | Level | Deliverable in this script | Status |
|---|---|---|---|
| 1.2.1 Audio-only and Video-only (Prerecorded) | A | Transcript for any audio-only or video-only clip | [Pass / Fail / Not applicable] |
| 1.2.2 Captions (Prerecorded) | A | Section 9 WebVTT captions | [Status] |
| 1.2.3 Audio Description or Media Alternative (Prerecorded) | A | Section 10 descriptive transcript or section 11 description | [Status] |
| 1.2.4 Captions (Live) | AA | Not applicable to prerecorded screencasts | Not applicable |
| 1.2.5 Audio Description (Prerecorded) | AA | Section 11 integrated or separate description | [Status] |
| 1.2.7 Extended Audio Description (Prerecorded) | AAA | Optional, section 11 | [Status] |
| 1.2.8 Media Alternative (Prerecorded) | AAA | Optional, full descriptive transcript | [Status] |
| 1.4.2 Audio Control | A | Player does not autoplay audio, or offers pause and volume | [Status] |
| 2.2.2 Pause, Stop, Hide | A | Player controls; no autoplaying motion longer than allowed without pause | [Status] |
| 2.3.1 Three Flashes or Below Threshold | A | Section 6 visual rules | [Status] |
| Player keyboard and screen-reader support | Per site target | Embedded player operable by keyboard, with labelled controls | [Status] |
13. Review, recording and maintenance
13.1 Review and recording steps
| Step | Owner | Exit 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 ID | Trigger | Segments affected | Action | Due |
|---|---|---|---|---|
| RR-01 (Example) | Refund dialog redesigned in release [x.y] | SEG-04, SEG-06 | Re-record and update captions and transcript | YYYY-MM-DD |
14. Glossary and references
14.1 Glossary
| Term | Meaning in this document |
|---|---|
| Screencast | A recording of a computer screen with narration that shows a task |
| Segment | One scripted beat of narration and matching action, with an ID |
| Reset state | The known environment state restored before each take |
| Captions | Synchronised text of speech and meaningful sounds, in the same language as the audio |
| Subtitles | Captions translated into another language |
| Transcript | A text version of the video; descriptive when it also covers visual information |
| Audio description | Narration added to describe important visual information |
| WebVTT | W3C text format for timed text tracks such as captions and chapters |
| Chapter marker | A named start time that lets viewers jump to a section |
14.2 References
| Reference | Version or date | Use in this document |
|---|---|---|
| Web Content Accessibility Guidelines (WCAG) 2.2, W3C, https://www.w3.org/TR/WCAG22/ | W3C Recommendation, 2024-12-12 | Success 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/ | Current | Intent 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 site | Tutorial 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.
関連テンプレート
Administrator Guide Template (ISO/IEC/IEEE 26514)
Admin guide – roles, architecture, access, backup/restore, monitoring, maintenance, scaling, security ops, DR, audit
ドキュメント・サポートAPI Changelog Template (OpenAPI 3.2, AsyncAPI 3.1)
Dated per-version API change log: additive, behavioural and breaking classes, affected operations, OpenAPI diff links, Deprecation and Sunset values, SDK versions
ドキュメント・サポートAPI Overview and Getting Started Template
API landing page: what it does, OpenAPI and Arazzo descriptions, base URLs, auth in 3 steps, first request, key resources, errors, limits, next steps