Create Accessible Captions and Transcripts

<!DOCTYPE html> <html lang="en"> <head>  <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="robots" content="index, follow">  <meta name="HandheldFriendly" content="True"> <meta name="MobileOptimized" content="320"> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Create Accessible Captions and Transcripts | Section508.gov</title> <meta property="og:title" content="Section508.gov"> <meta name="description" content="Information about the Section508.gov website, GSA’s Government-wide IT Accessibility Team, and guidance to Federal agencies on accessible information and communication technology (ICT)."> <meta property="og:description" content="Information about the Section508.gov website, GSA’s Government-wide IT Accessibility Team, and guidance to Federal agencies on accessible information and communication technology (ICT)."> <meta property="og:image" content="https://assets.section508.gov/files/images/captions-transcripts-figure-4.jpg"> <meta name="twitter:image" content="https://assets.section508.gov/files/images/captions-transcripts-figure-4.jpg" />  <meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="@" /> <meta name="twitter:title" content="Section508.gov" /> <meta name="twitter:description" content="Information about the Section508.gov website, GSA’s Government-wide IT Accessibility Team, and guidance to Federal agencies on accessible information and communication technology (ICT)." /> <meta property="og:type" content="article"> <link rel="canonical" href="https://www.section508.gov/create/captions-transcripts/" /> <meta property="og:url" content="https://www.section508.gov/create/captions-transcripts/" />   <link rel="shortcut icon" type="image/ico" href="/assets/images/favicon.ico" /> <link rel="icon" type="image/png" href="/assets/images/favicon.ico" /> <link rel="icon" type="image/png" sizes="192x192" href="/assets/images/android-chrome-192x192.png" /> <link rel="apple-touch-icon" sizes="180x180" href="/assets/images/apple-touch-icon.png" /> <link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicon-32x32.png" /> <link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon-16x16.png" /> <link rel="manifest" href="/assets/images/site.webmanifest" />  <link rel="stylesheet" type="text/css" href="/assets/css/index.css?1732224641581990839"> <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script> <script src="/assets/js/uswds-init.min.js?1732224641581990839"></script>  <meta name="topic" content="Content creation (create)"> <meta name="sub-topic" content="Video/Audio/Multimedia"> <meta name="audience" content="Federal employee (fedemp), Public (public), Designer (design)"> <meta name="resource-type" content="Process/How-to"> <meta name="format" content="HTML (html)"> </head> <body> <section aria-label="Official Government Site Banner" class="page-landing-page layout-demo "> <a class="usa-skipnav" href="#main-content">Skip to secondary navigation</a> <a class="usa-skipnav" href="#content-section">Skip to main content</a> <div class="usa-banner" aria-label="Official website of the United States government" > <div class="usa-accordion"> <header class="usa-banner__header"> <div class="usa-banner__inner"> <div class="grid-col-auto"> <img aria-hidden="true" class="usa-banner__header-flag" src="/assets/img/us_flag_small.png" alt="U.S. flag" /> </div> <div class="grid-col-fill tablet:grid-col-auto" aria-hidden="true"> <p class="usa-banner__header-text"> An official website of the United States government </p> <p class="usa-banner__header-action">Here’s how you know</p> </div> <button type="button" class="usa-accordion__button usa-banner__button" aria-expanded="false" aria-controls="gov-banner-default" > <span class="usa-banner__button-text">Here’s how you know</span> </button> </div> </header> <div class="usa-banner__content usa-accordion__content" id="gov-banner-default" hidden="" > <div class="grid-row grid-gap-lg"> <div class="usa-banner__guidance tablet:grid-col-6"> <img class="usa-banner__icon usa-media-block__img" src="/assets/img/icon-dot-gov.svg" role="img" alt="Dot gov" aria-hidden="true" /> <div class="usa-media-block__body"> <p> <strong>Official websites use .gov</strong><br />A <strong>.gov</strong> website belongs to an official government organization in the United States. </p> </div> </div> <div class="usa-banner__guidance tablet:grid-col-6"> <img class="usa-banner__icon usa-media-block__img" src="/assets/img/icon-https.svg" role="img" alt="Https" aria-hidden="true" /> <div class="usa-media-block__body"> <p> <strong>Secure .gov websites use HTTPS</strong><br />A <strong>lock</strong> ( <span class="icon-lock" ><svg xmlns="http://www.w3.org/2000/svg" width="52" height="64" viewBox="0 0 52 64" class="usa-banner__lock-image" role="img" aria-labelledby="banner-lock-description-default" focusable="false" > <title id="banner-lock-title-default">Lock</title> <desc id="banner-lock-description-default">Locked padlock icon</desc> <path fill="#000000" fill-rule="evenodd" d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z" /> </svg> </span >) or <strong>https://</strong> means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites. </p> </div> </div> </div> </div> </div> </div> <button id="backtotop" title="Go to top" style="display: none">˄ Top</button> <div class="usa-overlay"></div> </section> <header class="usa-header usa-header--extended" role="banner"> <div class="usa-navbar"> <div class="usa-logo" id="extended-logo"> <span><a href="/" onclick="return navigate(this)"> <img src="/assets/images/508-logo-cropped-web-altgreen.png" alt="Section508.gov Home; GSA logo with text: Section508.gov Buy. Build. Be Accessible." class="logo" /> </a></span> </div> <button class="usa-menu-btn">Menu</button> </div> <nav id="site-nav" role="navigation" class="usa-nav" aria-label="Primary Site Navigation"> <div class="usa-nav__inner"> <button class="usa-nav__close"><img alt="close" src="/assets/img/close.svg"></button> <ul class="usa-nav__primary usa-accordion"> <li class="usa-nav__primary-item"> <a aria-label="Policy & Management primary navigation" class="usa-nav__link" onclick="return navigate(this)" href="/manage/"><span>Policy & Management</span></a> </li> <li class="usa-nav__primary-item"> <a aria-label="Acquisition primary navigation" class="usa-nav__link" onclick="return navigate(this)" href="/buy-sell/"><span>Acquisition</span></a> </li> <li class="usa-nav__primary-item"> <a aria-label="Content Creation primary navigation" class="usa-nav__link usa-current" onclick="return navigate(this)" href="/create/"><span>Content Creation</span></a> </li> <li class="usa-nav__primary-item"> <a aria-label="Design & Develop primary navigation" class="usa-nav__link" onclick="return navigate(this)" href="/develop/"><span>Design & Develop</span></a> </li> <li class="usa-nav__primary-item"> <a aria-label="Testing primary navigation" class="usa-nav__link" onclick="return navigate(this)" href="/test/"><span>Testing</span></a> </li> <li class="usa-nav__primary-item"> <a aria-label="Training, Tools & Events primary navigation" class="usa-nav__link" onclick="return navigate(this)" href="/training/"><span>Training, Tools & Events</span></a> </li> </ul> <div class="usa-nav__secondary"> <ul class="usa-nav__secondary-links"> <li class="usa-nav__secondary-item"> <a href="/blog/" class="external-link" onclick="return navigate(this)">Blogs & Updates</a> </li> <li class="usa-nav__secondary-item"> <a href="/tools/program-manager-listing/" class="external-link" onclick="return navigate(this)">My Agency’s 508 PM</a> </li> <li class="usa-nav__secondary-item"> <a href="/content/about-us/" class="external-link" onclick="return navigate(this)">About Us</a> </li> </ul> <form id="search_form" class="usa-search usa-search--small" action="https://search.usa.gov/search" accept-charset="UTF-8" method="get"> <input name="utf8" type="hidden" value="✓" /> <input name="affiliate" type="hidden" value="gsa-section508-accessibility" /> <div role="search"> <label class="usa-sr-only" for="extended-search-field-small">Search</label> <input class="usa-input usagov-search-autocomplete" id="extended-search-field-small" type="search" name="query" autocomplete="off"> <button class="usa-button primary-background-color" type="submit"><img src="/assets/img/usa-icons-bg/search--white.svg" class="usa-search__submit-icon" alt="Search" /></button> </div> </form> </div> </div> </nav> </header> <section aria-label="Page Banner" class="usa-graphic-list usa-section sml-margin bg-gradient landing-page-banner"> <div class="grid-container"> <div class="grid-row grid-gap"> <div class="tablet: grid-col"> <span class="banner-title-color font-sans-lg margin-bottom-0"> Content Creation </span> <br /> <h1 class="text-white font-sans-xl margin-top-0 margin-bottom-0"> Create Accessible Captions and Transcripts </h1> </div> </div> </div> </section> <div id="main-content" class="usa-layout-docs usa-section"> <div class="grid-container"> <div class="grid-row grid-gap"> <aside class="usa-layout-docs__sidenav desktop:grid-col-3 padding-bottom-4"> <nav id="sec-nav" aria-label="Secondary Navigation"> <ul class="usa-sidenav menu"><li class="usa-sidenav__item"> <a href="/create/" >Content Creation</a> </li><li class="usa-sidenav__item list "> <a href="javascript:void(0);" class="header-menu-text" aria-label="Create a Document - Submenu" aria-expanded="false">Create a Document</a> <ul class="usa-sidenav__sublist items"><li class="usa-sidenav__item "> <a href="/create/documents/">Create Accessible Documents</a> </li><li class="usa-sidenav__item "> <a href="/create/documents/authoring-guides/">Authoring Guides</a> </li><li class="usa-sidenav__item "> <a href="/create/documents/#tips">Tips and Tricks</a> </li><li class="usa-sidenav__item "> <a href="/create/documents/training-videos/">Video Training</a> </li></ul> </li><li class="usa-sidenav__item list "> <a href="javascript:void(0);" class="header-menu-text" aria-label="Create a Presentation - Submenu" aria-expanded="false">Create a Presentation</a> <ul class="usa-sidenav__sublist items"><li class="usa-sidenav__item "> <a href="/create/presentations/authoring-guides/">Authoring Guides</a> </li><li class="usa-sidenav__item "> <a href="/create/presentations/">Tips and Tricks</a> </li><li class="usa-sidenav__item "> <a href="/create/presentations/training-videos/">Video Training</a> </li></ul> </li><li class="usa-sidenav__item list "> <a href="javascript:void(0);" class="header-menu-text" aria-label="Create a Spreadsheet - Submenu" aria-expanded="false">Create a Spreadsheet</a> <ul class="usa-sidenav__sublist items"><li class="usa-sidenav__item "> <a href="/create/spreadsheets/authoring-guides/">Authoring Guides</a> </li><li class="usa-sidenav__item "> <a href="/create/spreadsheets/">Tips and Tricks</a> </li><li class="usa-sidenav__item "> <a href="/create/spreadsheets/training-videos/">Video Training</a> </li></ul> </li><li class="usa-sidenav__item list "> <a href="javascript:void(0);" class="header-menu-text" aria-label="Create a PDF - Submenu" aria-expanded="false">Create a PDF</a> <ul class="usa-sidenav__sublist items"><li class="usa-sidenav__item "> <a href="/create/pdfs/authoring-guides/">Authoring Guides</a> </li><li class="usa-sidenav__item "> <a href="/create/pdfs/common-tags-and-usage/">Tags and Their Usage</a> </li><li class="usa-sidenav__item "> <a href="/create/pdfs/">Tips and Tricks</a> </li><li class="usa-sidenav__item "> <a href="/create/pdfs/training-videos/">Video Training</a> </li></ul> </li><li class="usa-sidenav__item list "> <a href="javascript:void(0);" class="header-menu-text" aria-label="Audio & Video - Submenu" aria-expanded="false">Audio & Video</a> <ul class="usa-sidenav__sublist items"><li class="usa-sidenav__item "> <a href="/create/audio-video/">Audio- and Video-Only</a> </li><li class="usa-sidenav__item active usa-current "> <a href="/create/captions-transcripts/">Captions & Transcripts</a> </li><li class="usa-sidenav__item "> <a href="/create/synchronized-media/">Synchronized Media</a> </li></ul> </li><li class="usa-sidenav__item"> <a href="/create/alternative-text/" >Alternative Text</a> </li><li class="usa-sidenav__item"> <a href="/create/electronic-signatures/" >Electronic Signatures</a> </li><li class="usa-sidenav__item"> <a href="/create/email-messages/" >Email Messages</a> </li><li class="usa-sidenav__item"> <a href="/create/accessible-equations-formulas/" >Equations and Formulas</a> </li><li class="usa-sidenav__item"> <a href="/create/accessible-meetings/" >Meetings</a> </li><li class="usa-sidenav__item"> <a href="/create/social-media/" >Social Media</a> </li></ul> </nav> </aside> <main class="usa-layout-docs__main desktop:grid-col-9" id="content-section"> <div class="usa-graphic-list"> <p>Captions and transcripts are valuable tools that provide access to audio content. Captions describe dialogue, music, and sound effects in videos, while transcripts are documents that describe audio-only and video-only content, such as podcasts and animations.</p> <p>To learn more about when and why to use captions and transcripts, review the resource <a href="/create/synchronized-media/">Creating Accessible Synchronized Media</a>.</p> <h2 id="general-guidelines-for-captions">General Guidelines for Captions</h2> <p>Captions are typically required for videos that have an audio track. When creating captions for any pre-recorded video with audio, follow these general guidelines:</p> <ul> <li>Synchronize the captions to the corresponding audio in the audio track. The text and the speech or sound that the text describes must appear at the same time.</li> <li>Use appropriate spelling, grammar, and punctuation. Captions must have at least 99% accuracy to be readable.</li> <li>Keep captions on screen long enough for viewers to read the text.</li> <li>Keep captions off the screen when no meaningful sounds are introduced.</li> <li>Use a consistent style throughout the captions for identifying speakers, sound effects, and music.</li> </ul> <h2 id="general-guidelines-for-transcripts">General Guidelines for Transcripts</h2> <p>When creating transcripts for videos and audio-only and video-only content, follow these guidelines:</p> <ul> <li>For audio-only content, use the same guidelines as captions for determining which sounds to transcribe and what audio information must be included.</li> <li>For video content, use the same guidelines as <a href="/create/synchronized-media/#audio-description">audio descriptions</a> for determining which imagery to describe and what visual information must be included.</li> <li>Ensure that users can access the transcript in the same place as the original content.</li> <li>Provide the transcript in an accessible format, like a Section 508-conformant web page, a plain text file, or a conformant Microsoft Word document.</li> </ul> <h2 id="creating-a-caption-friendly-video">Creating a Caption-Friendly Video</h2> <p>The best way to make content accessible is to plan for it from the beginning. You can make your video caption-friendly as you plan and develop it and avoid several major accessibility issues when it’s time to make the captions.</p> <p>When creating video content, follow these guidelines:</p> <ul> <li>Avoid overlapping voices whenever possible.</li> <li>Have speakers talk at a normal or slow pace. When the speech in a video is too fast, a captioner has to choose between keeping the captions on screen for too short of a time or allowing the captions to fall out of sync with the audio. Generally, speech that is over 180 words per minute (an average of 3 words per second) may be too fast for captions.</li> <li>Keep any on-screen text in the top two-thirds of the screen. Most video players display the captions in the lower third section of the screen, and may not allow you to move the captions when video text appears in that area.</li> </ul> <h2 id="displaying-captions">Displaying Captions</h2> <p>When determining how captions appear on a video, follow these guidelines:</p> <ul> <li>Ensure that the font style, size, and color meet all Section 508 requirements for readable body text. Section 508 best practice is to use a sans serif font, like Helvetica or Arial. As a default, use an 18-point font size and white text on a black translucent background. Adjust or change these as needed to ensure readability for the video player used.</li> <li>Use the same caption text and background color for all captions. Do not change the text color or the caption background color, since users with color blindness cannot see these differences.</li> <li>Use no more than two lines of text at a time, with no more than 45 characters per line (though fewer characters per line is ideal).</li> <li>Display the captions in the center of the lower one-third section of the video, except when it blocks important text, like signs or person identifiers.</li> <li>Avoid scrolling, flashing, and other distracting animation effects. The text must remain in the same position long enough for the viewer to read it.</li> <li>If you can customize the settings available within the video player, allow users to change caption settings, like the font size, color, and placement. Ensure that the captions are written so that changing these settings does not change their meaning, like when a change in the font size changes where the captions appear on the screen.</li> </ul> <h3 id="example">Example</h3> <p>In Figure 1, the font, text size, color, and placement all meet Section 508 requirements and best practices. It is in the lower part of the screen, centered, and the text is in a sans serif font with a font size of 18 points. The text is white with a slightly translucent background, and is 44 characters long.</p> <div class="tablet:grid-col" style="margin: auto; max-width: 100%; text-align: center; padding: 10px 0px"> <div class="margin-top-1"><img src="https://assets.section508.gov/files/images/captions-transcripts-figure-1.jpg" alt="" aria-describedby="figure-1" class="border-2px border-base-light shadow-2 padding-1" /> </div> <div class="font-mono-3xs margin-x-auto auto" style="max-width: 90%; text-align: center;"><span id="figure-1"><strong>Figure 1.</strong> Example of correct font, text size, color, and placement</span> </div> </div> <h2 id="automatically-generated-captions">Automatically Generated Captions</h2> <p>Some programs automatically generate captions using speech-to-text technology. This can be a helpful starting point, especially for content creators who do not work with captions on a regular basis. However, current auto-captioning technology does not meet the minimum standard for pre-recorded media. They typically don’t use grammar and punctuation correctly, they often include spelling errors, and they often include awkward line breaks that make them much harder to read.</p> <p>Because of this, always take time to edit the captions when you start with auto-captions.</p> <p>When working with auto-captioning, follow these guidelines:</p> <ul> <li>Add appropriate capitalization, punctuation, and grammar.</li> <li>Check that the spelling of all names, places, and terms are correct.</li> <li>Correct any spelling errors where a similar word was substituted, like if the program transcribed “weight” instead of “wait.”</li> <li>Add captions for sound effects, music, and other audio elements that the auto-captions fail to capture.</li> <li>Adjust the line breaks so that each individual caption starts and ends at the most logical point, usually at a period or comma.</li> </ul> <h3 id="incorrect-example">Incorrect example</h3> <p>In Figure 2, caption text reads: “soon. If doctor low agrees we can start the”</p> <p>In this incorrect example, the text is hard to read because of auto-caption errors.</p> <div class="tablet:grid-col" style="margin: auto; max-width: 100%; text-align: center; padding: 10px 0px"> <div class="margin-top-1"><img src="https://assets.section508.gov/files/images/captions-transcripts-figure-2.jpg" alt="" aria-describedby="figure-2" class="border-2px border-base-light shadow-2 padding-1" /> </div> <div class="font-mono-3xs margin-x-auto auto" style="max-width: 90%; text-align: center;"><span id="figure-2"><strong>Figure 2.</strong> Incorrect automatically generated captions.</span> </div> </div> <h3 id="correct-example">Correct Example</h3> <p>In Figure 3, caption text reads: “If Doctor Lowe agrees, we can start the treatment”</p> <p>In this correct example, the grammar errors are fixed, the starting and ending time for each caption is adjusted for a more logical flow, and the captions are much more readable.</p> <div class="tablet:grid-col" style="margin: auto; max-width: 100%; text-align: center; padding: 10px 0px"> <div class="margin-top-1"><img src="https://assets.section508.gov/files/images/captions-transcripts-figure-3.jpg" alt="" aria-describedby="figure-3" class="border-2px border-base-light shadow-2 padding-1" /> </div> <div class="font-mono-3xs margin-x-auto auto" style="max-width: 90%; text-align: center;"><span id="figure-3"><strong>Figure 3.</strong> Automatically generated captions after being corrected for readability.</span> </div> </div> <h2 id="describing-how-a-person-speaks">Describing How a Person Speaks</h2> <p>Sometimes, it is not enough just to write what words are spoken. Often, the way a person speaks conveys meaning, and must be included in the captions.</p> <p>Here are some situations where additional descriptors may need to be added:</p> <ul> <li>The speaker’s emotion, volume, or tone is not obvious, so you can add a descriptor before the dialogue in brackets, like [angrily], [whispering], or [sarcastically].</li> <li>A speaker uses a language other than the video’s default language. This is indicated in brackets or parentheses, like [in Spanish].</li> <li>The speaker emphasizes specific words, which should be in italics.</li> <li>The speaker makes a sound that is not speech, like coughing or whistling. Treat these sounds as sound effects (see below).</li> </ul> <p>In all cases, read the text itself and determine whether the text alone conveys the full meaning. If it does not, use short descriptors to provide equivalent information.</p> <h3 id="example-1">Example</h3> <p>In Figure 4, caption text reads: “<em>(shouting)</em> Pick <em>me</em>! I wanna go <em>first</em>!”</p> <div class="tablet:grid-col" style="margin: auto; max-width: 100%; text-align: center; padding: 10px 0px"> <div class="margin-top-1"><img src="https://assets.section508.gov/files/images/captions-transcripts-figure-4.jpg" alt="" aria-describedby="figure-4" class="border-2px border-base-light shadow-2 padding-1" /> </div> <div class="font-mono-3xs margin-x-auto auto" style="max-width: 90%; text-align: center;"><span id="figure-4"><strong>Figure 4.</strong> Captions describing how a person speaks to convey meaning.</span> </div> </div> <h2 id="unintelligible-speech-and-filler-words">Unintelligible Speech and Filler Words</h2> <p>Sometimes a speaker is difficult to understand. It may be because of background noise, gaps or distortion in the audio (like on a video call with a bad connection). It can also be due to the speech itself, which may include stutters, sentence fragments, accents and slang, or excessive filler words.</p> <p>If the speech is difficult to understand, follow these guidelines:</p> <ul> <li>When possible, include all of the speech word-for-word, including all filler words. </li> <li>If an entire section has no understandable speech, include a descriptor like “unintelligible.”</li> <li>Indicate short gaps, breaks, or pauses using em dashes “—” or ellipses “…”</li> <li>When necessary, include descriptors to clarify intention, like “garbled with static,” or “haltingly.”</li> <li>If there is an excessive amount of filler words like “um” or “you know,” and they obscure the meaning or make the captions difficult to read, some or all of them may be omitted. In these cases, ensure that the same meaning is still conveyed and the viewer has equivalent access to the content as it is experienced by hearing viewers.</li> </ul> <h3 id="example-with-unedited-text">Example with Unedited Text</h3> <p>In Figure 5, caption text reads: “<em>(calmly)</em> I agree, but, um, I think…I think we could”</p> <p>In this example, there are filler words and gaps, but the content is still understandable. Because of this, the captions must display exactly what the speaker said, word for word.</p> <div class="tablet:grid-col" style="margin: auto; max-width: 100%; text-align: center; padding: 10px 0px"> <div class="margin-top-1"><img src="https://assets.section508.gov/files/images/captions-transcripts-figure-5.jpg" alt="" aria-describedby="figure-5" class="border-2px border-base-light shadow-2 padding-1" /> </div> <div class="font-mono-3xs margin-x-auto auto" style="max-width: 90%; text-align: center;"><span id="figure-5"><strong>Figure 5.</strong> Captions displaying unedited unintelligible speech and filler words.</span> </div> </div> <h3 id="example-with-edited-text">Example with Edited Text</h3> <p>In Figure 6, caption text before editing reads: “So, um, if…I mean, if we can’t, <strong>um</strong>…if we can’t find, <strong>uh, you know</strong>, a solution to, <strong>you know</strong>,”</p> <p>In Figure 7, caption text after editing, with words in <strong>bold</strong> removed reads: “So, um, if…I mean, if we can’t…if we can’t find…a solution to…this case,”</p> <p>In this example, several of the filler words are removed, since it allows the reader to understand what is being said on an equivalent level as a hearing user. Notice that the captions still show some filler words and gaps to keep the intent and meaning as similar as possible.</p> <div class="tablet:grid-col" style="margin: auto; max-width: 100%; text-align: center; padding: 10px 0px"> <div class="margin-top-1"><img src="https://assets.section508.gov/files/images/captions-transcripts-figure-6.jpg" alt="" aria-describedby="figure-6" class="border-2px border-base-light shadow-2 padding-1" /> </div> <div class="font-mono-3xs margin-x-auto auto" style="max-width: 90%; text-align: center;"><span id="figure-6"><strong>Figure 6.</strong> Filler words caption example before editing.</span> </div> </div> <div class="tablet:grid-col" style="margin: auto; max-width: 100%; text-align: center; padding: 10px 0px"> <div class="margin-top-1"><img src="https://assets.section508.gov/files/images/captions-transcripts-figure-7.jpg" alt="" aria-describedby="figure-7" class="border-2px border-base-light shadow-2 padding-1" /> </div> <div class="font-mono-3xs margin-x-auto auto" style="max-width: 90%; text-align: center;"><span id="figure-7"><strong>Figure 7.</strong> Filler words caption example after editing.</span> </div> </div> <h2 id="sound-effects">Sound Effects</h2> <p>Captions illustrate what is being said, but they also convey other meaningful audio, like background noise or sound effects.</p> <p>For sound effects, follow these guidelines:</p> <ul> <li>Indicate sound effects with brackets or parentheses, like [static] or (doorbell).</li> <li>Do not caption obvious or trivial sounds, like footsteps when it is visible that the person is walking.</li> <li>Indicate when ongoing background noise starts, like traffic sounds, or the chatter of a large crowd.</li> <li>When necessary, describe the sound in more detail, like “louder cheering” or “overlapping barking, meowing, and chirping.”</li> <li>When meaningful, describe when an ongoing sound stops, like “engine turns off.”</li> <li>Describe when there is unexpected silence, like “no audible dialogue” when it is visible that a speaker’s lips are moving.</li> </ul> <h3 id="example-2">Example</h3> <p>In Figure 8, caption text reads: <em>“(door opens; several dogs barking)”</em></p> <div class="tablet:grid-col" style="margin: auto; max-width: 100%; text-align: center; padding: 10px 0px"> <div class="margin-top-1"><img src="https://assets.section508.gov/files/images/captions-transcripts-figure-8.jpg" alt="" aria-describedby="figure-8" class="border-2px border-base-light shadow-2 padding-1" /> </div> <div class="font-mono-3xs margin-x-auto auto" style="max-width: 90%; text-align: center;"><span id="figure-8"><strong>Figure 8.</strong> Captions displaying sound effects.</span> </div> </div> <h2 id="offscreen-speakers">Offscreen Speakers</h2> <p>When a speaker is not visible, it can be difficult to identify who is talking. If a speaker is offscreen or if the viewer cannot easily identify who is speaking by looking at the video, identify the speaker by name, or by their role if their name is not known (For example, “Ms. Harris,” or “Officer,” or “Narrator”).</p> <h2 id="multiple-speakers">Multiple Speakers</h2> <p>In general, videos should not have multiple speakers talking at the same time. When these situations are unavoidable, how you caption it depends on the specific context.</p> <p>For background chatter where no specific words can be understood, treat it as a sound effect, like “cheering,” or “children arguing.”</p> <p>When the speech can be understood, <em>all</em> of it must be included in the captions. This takes priority over ensuring the text is perfectly synchronized.</p> <p>When possible, keep the order of the speakers consistent in the captions. For example, you may caption a news clip where each news caster’s speech is placed on the same side of the screen as that speaker. Or, when captioning a song, the lead vocalist’s lyrics appear in the top line, and the lyrics for the backup vocals appear below in parentheses. </p> <p>Clearly communicate who is speaking when it is not immediately obvious from the video. Always identify the speakers when they start speaking, and use names, initials, or other indicators any time after that when it is not obvious who is speaking.</p> <h2 id="captioning-different-languages">Captioning Different Languages</h2> <p>When a video includes speech in multiple languages, the captions must provide equivalent access to the speech as those who can hear the dialogue.</p> <p>When content includes speech in multiple languages, follow these guidelines:</p> <ul> <li>If the speech is fully translated for hearing viewers, either with dubbing or subtitles, the captions must include the exact same translation.</li> <li>Always include a descriptor to show when the spoken language changes. For example, include the descriptor (in Spanish) when a person starts speaking Spanish, then include the descriptor (in English) when the dialogue switches to English.</li> <li>If the speech is not translated for hearing viewers:</li> <li>Whenever possible, include exact wording in that language, using appropriate grammar, spelling, and punctuation for that language. For example: <em>“Hola, ¿cómo está?”</em></li> <li>If an exact transcription of the speech is not available, at least communicate any other meaningful details about the speech, like the tone. For example, “arguing in Korean.”</li> </ul> <h2 id="captioning-music">Captioning Music</h2> <p>When a video includes music, follow these captioning guidelines:</p> <ul> <li>When a song starts, list the name and artist for the song, or communicate the tone or style of the song. For example, [Johann Pachelbel’s “Canon in D Major”], or [mellow techno music].</li> <li>Include song lyrics if a person is visibly singing, if there is not much meaningful speech or other sounds, or when the lyrics are significant to understanding the scene. Omit lyrics when there is already a lot of speech occurring and the specific lyrics are not needed.</li> <li>Indicate any important changes to the music, like when it starts or stops abruptly, or if the tone changes.</li> </ul> <h2 id="profanity">Profanity</h2> <p>If the audio content contains swearing, slurs, or other offensive language, follow these guidelines:</p> <ul> <li>If the profanity is audible, include the exact words in the captions.</li> <li>If the profanity is censored in the audio, indicate that the word or phrase was censored. For example, “I feel like (censored).”</li> <li>Never replace profanity with euphemisms or substitute words that were not used in the original audio, like replacing “killed” with “unalived.”</li> </ul> <p><strong>Reviewed/Updated:</strong> May 2024</p> </div> </main> </div> </div> </div> <footer class="usa-footer__primary-section"> <div class="grid-container"> <div class="grid-row grid-gap padding-bottom-4"> <div class="desktop:grid-col-4"> <p class="text-bold">Government-wide Initiatives</p> <ul class="add-list-reset line-height-sans-6"> <li> <a href="https://www.gsa.gov/technology/government-it-initiatives/digital-strategy" target="_blank" onclick="return navigate(this)">Digital Strategy</a></li> <li> <a href="https://www.plainlanguage.gov/" target="_blank" onclick="return navigate(this)">Plain Language </a></li> <li> <a href="https://designsystem.digital.gov/" target="_blank" onclick="return navigate(this)"> U.S. Web Design System </a></li> <li> <a href="https://www.cio.gov/about/members-and-leadership/accessibility-cop/" target="_blank" onclick="return navigate(this)"> CIO Council Accessibility Community of Practice (ACOP)</a></li> </ul> </div> <div class="desktop:grid-col-2"> <p class="text-bold">Organization</p> <ul class="add-list-reset line-height-sans-6"> <li> <a href="/about-us/" aria-label="About Us in Organization" onclick="return navigate(this)"> About Us</a></li> <li> <a aria-label="Contact Us details" href="/contact-us/" onclick="return navigate(this)"> Contact Us</a></li> <li><a href="/contributors/" aria-label="Section508.gov site Contributors" onclick="return navigate(this)"> Contributors</a></li> </ul> </div> <div class="desktop:grid-col-3"> <p class="text-bold">Tools</p> <ul class="add-list-reset line-height-sans-6"> <li> <a href="/art/" aria-label="Accessibility Requirements Tool" onclick="return navigate(this)"> ART</a></li> <li> <a href="/buy/solicitation-review-tool" aria-label="Solicitation Review Tool" onclick="return navigate(this)"> SRT</a></li> <li> <a href="/content/guide-accessible-web-design-development" onclick="return navigate(this)"> Developer Guide</a></li> <li> <a href="https://digitaldashboard.gov/" target="_blank" onclick="return navigate(this)"> DigitalDashboard.gov</a></li> <li> <a href="https://analytics.usa.gov/" target="_blank" onclick="return navigate(this)"> Analytics.usa.gov</a></li> </ul> </div> <div class="desktop:grid-col-3"> <p class="text-bold">Resources</p> <ul class="add-list-reset line-height-sans-6"> <li> <a href="/content/glossary" aria-label="Glossary for Section508" onclick="return navigate(this)"> Glossary</a></li> <li> <a href="/website-policies" onclick="return navigate(this)"> Website Policies</a></li> <li> <a href="/tools/program-manager-listing/" onclick="return navigate(this)"> Find Your Section 508 Program Manager</a></li> <li><a href="/manage/join-the-508-community/" onclick="return navigate(this)">Join the Community(Listserv)</a></li> </ul> </div> </div> </div> </footer> <div class="usa-identifier"> <section class="usa-identifier__section usa-identifier__section--masthead" aria-label="Agency identifier," > <div class="usa-identifier__container"> <div class="usa-identifier__logos"> <a href="https://gsa.gov" class="usa-identifier__logo" onclick="return navigate(this)"> <img class="usa-identifier__logo-img" alt="General Services Administration Logo" src="/assets/images/logos/gsa-logo.png"> </a> </div> <div class="usa-identifier__identity"> <p class="usa-identifier__identity-domain">Section508.gov</p> <p class="usa-identifier__identity-disclaimer"> An official website of the <a href="https://www.gsa.gov/" onclick="return navigate(this)">General Services Administration</a> </p> </div> </div> </section> <nav class="usa-identifier__section usa-identifier__section--required-links" aria-label="Important links,," > <div class="usa-identifier__container"> <ul class="usa-identifier__required-links-list"> <li class="usa-identifier__required-links-item"> <a href="https://www.gsa.gov/about-us" class="usa-identifier__required-link usa-link" onclick="return navigate(this)">About GSA</a> </li> <li class="usa-identifier__required-links-item"> <a href="https://www.gsa.gov/website-information/accessibility-aids" class="usa-identifier__required-link usa-link" onclick="return navigate(this)">Accessibility statement</a> </li> <li class="usa-identifier__required-links-item"> <a href="https://www.gsa.gov/reference/freedom-of-information-act-foia" class="usa-identifier__required-link usa-link" onclick="return navigate(this)">FOIA requests</a> </li> <li class="usa-identifier__required-links-item"> <a href="https://www.gsa.gov/reference/civil-rights-programs/notification-and-federal-employee-antidiscrimination-and-retaliation-act-of-2002" class="usa-identifier__required-link usa-link" onclick="return navigate(this)">No FEAR Act data</a> </li> <li class="usa-identifier__required-links-item"> <a href="https://www.gsaig.gov/" class="usa-identifier__required-link usa-link" onclick="return navigate(this)">Office of the Inspector General</a> </li> <li class="usa-identifier__required-links-item"> <a href="https://www.gsa.gov/reference/reports/budget-performance" class="usa-identifier__required-link usa-link" onclick="return navigate(this)">Performance reports</a> </li> <li class="usa-identifier__required-links-item"> <a href="https://www.gsa.gov/website-information/website-policies" class="usa-identifier__required-link usa-link" onclick="return navigate(this)">Privacy policy</a> </li> <li class="usa-identifier__required-links-item"> <a href="/website-policies/#reuse-and-copyright" class="usa-identifier__required-link usa-link" onclick="return navigate(this)">Reuse and Copyright</a> </li> </ul> </div> </nav> <section class="usa-identifier__section usa-identifier__section--usagov" aria-label="U.S. government information and services,," > <div class="usa-identifier__container"> <div class="usa-identifier__usagov-description"> Looking for U.S. government information and services? </div> <a href="https://www.usa.gov/" class="usa-link" onclick="return navigate(this)">Visit USA.gov</a> </div> </section> </div>  <script id="_fed_an_ua_tag" src="https://dap.digitalgov.gov/Universal-Federated-Analytics-Min.js?agency=GSA"></script> <script src="/assets/js/uswds.min.js?1732224641581990839"></script> <script src="/assets/js/app.js?1732224641581990839"></script> <script> $(document).ready(function(){ // Check if the user already dismissed alert banner if (window.localStorage.getItem('dismiss_alert')) { $('#alert_banner').hide(); } $("#dismiss_alert").click(function(){ // Save on LocalStorage window.localStorage.setItem('dismiss_alert', true); $('#alert_banner').hide(); }); }); </script> </body> </html>

CINXE.COM

Create Accessible Captions and Transcripts | Section508.gov