Create Accessible Synchronized Media Content

<!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 Synchronized Media Content | Section508.gov</title> <meta property="og:title" content="Section508.gov"> <meta name="description" content="Information about the Section508.gov website, GSA鈥檚 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鈥檚 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/social-media-og-image.jpg"> <meta name="twitter:image" content="https://assets.section508.gov/files/images/social-media-og-image.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鈥檚 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/synchronized-media/" /> <meta property="og:url" content="https://www.section508.gov/create/synchronized-media/" />   <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="Various Electronic Content (i.e. Multiple)"> <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鈥檚 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鈥檚 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鈥檝e 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鈥檚 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 Synchronized Media Content </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 "> <a href="/create/captions-transcripts/">Captions & Transcripts</a> </li><li class="usa-sidenav__item active usa-current "> <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 dir="ltr" id="top">Do you know how to create accessible audio and video media? Are you familiar with the difference between audio-only, video-only, and synchronized media? This resource summarizes relevant <a class="ext" href="https://www.w3.org/TR/WCAG20/">Web Content Accessibility Guidelines (WCAG)</a> and Section 508 requirements and highlights specific considerations for content, planning, and development. It also clarifies how content creators should work together with designers and developers to ensure that federal websites and digital products meet the <a href="https://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the-ict-refresh/final-rule/text-of-the-standards-and-guidelines">Revised 508 Standards</a>.</p> <h2 dir="ltr"><strong>Table of Contents</strong></h2> <ul> <li dir="ltr"><a href="#training-videos">Training Videos</a></li> <li dir="ltr"><a href="#user-benefit">User Benefit</a></li> <li dir="ltr"><a href="#captions">Captions</a></li> <li dir="ltr"><a href="#audio-description">Audio Descriptions</a></li> <li dir="ltr"><a href="#planning-accessible">Planning Accessible Audio & Video Media Projects</a></li> <li dir="ltr"><a href="#user-controls">User Controls for Captions and Audio Descriptions</a></li> <li dir="ltr"><a href="#resources">Resources</a></li> </ul> <p dir="ltr">Reach out to your agency <a href="/tools/program-manager-listing/">Section 508 Program Manager</a> or to the Government-wide IT Accessibility Program if you have any additional questions.</p> <h2 id="training-videos">Training Videos</h2> <hr /> <div class="grid-row grid-gap"> <div class="desktop:grid-col-3 display-flex flex-column flex-align-self-center"> <a href="/create/synchronized-media/creating-accessible-media"> <img alt="Creating Accessible Media" src="https://assets.section508.gov/files/thumbnails/training-video-create-accessible-media-thumb.png" style="width:100%" /> </a> </div> <div class="desktop:grid-col-9"> <p class="video-title"><strong><a href="/create/synchronized-media/creating-accessible-media">Creating Accessible Media</a></strong></p> <p>Get a brief overview on how to develop high quality audio, video, and multimedia that is accessible to users who cannot see visual information, or hear information conveyed using sound. Learn about text-based equivalents, captions and synchronized audio descriptions. </p> <p>Duration: 5m 41s | 1-Part Video Tutorial</p> </div> </div> <hr /> <h2 id="user-benefit" dir="ltr"><strong>User Benefit</strong></h2> <p dir="ltr">According to the 2010 U.S. Census, nearly <a href="http://www.census.gov/newsroom/releases/archives/miscellaneous/cb12-134.html">19% of the U.S. population</a> can be classified as having a disability—whether from birth, by accident or via old age. This means many of your customers may be blind or low-vision, deaf or hard-of-hearing, or have a cognitive, dexterity or other physical disability. For these individuals, being able to access content on the internet greatly affects their quality of life and, for federal employees, the ability to perform their duties.</p> <p dir="ltr">Considering that many disabilities may not be obvious, it’s common for people to believe that they have yet to meet or work with a person with a disability. Yet, statistically, one out of every five people you meet and work with has acquired a disability. And as disabilities can be temporary (e.g., broken wrist, ear infection) or situational (e.g., loud meeting space), products that are accessible become beneficial to even more people.</p> <h2 id="captions" dir="ltr"><strong>Captions</strong></h2> <p dir="ltr">Captions provide a textual display of spoken dialogue and indicate other sounds on visual displays, such as television monitors, computer screens and projected video. Captions are designed for people who are deaf or have hearing loss and enable full participation when viewing video or multimedia productions that have audio. Captions identify speakers on and off camera. Sound effects are typically indicated by text, such as "telephone ringing" or "footsteps," and the use symbols to indicate sounds, such as music. Captions are also beneficial to people who speak a foreign language, are learning how to read, or are watching the media in a noisy area, as well as those who understand best by processing visual information.</p> <p dir="ltr">Depending on whether the media is live, or pre-recorded, be aware of the synchronized media standards as laid out in the WCAG when planning the production of the media product:</p> <ul> <li dir="ltr">1.2.2 Captions (Prerecorded) - Captions are provided for all pre-recorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such.</li> <li dir="ltr">1.2.4 Captions (Live) - Captions are provided for all live audio content in synchronized media.</li> </ul> <h3 id="examples-of-captioned-media" dir="ltr"><strong>Examples of Captioned Media</strong></h3> <hr /> <p dir="ltr"><strong>Kathy’s Flood Story (Captioned)</strong></p> <p dir="ltr">In this example, note how the producers created a well crafted captions file, with proper synchronization, spelling, and grammar, to ensure that the text alternative for the pre-recorded content provides an equivalent experience for those unable to hear the audio track.</p> <p dir="ltr">Duration: 0h 0:31m</p> <p><video controls="controls" data-vscid="3qesx4ovd" style="width:100%" class="border-base radius-lg border-0px" poster="https://assets.section508.gov/files/thumbnails/kathys-flood-story-cc-poster.png"><source src="https://assets.section508.gov/files/videos/kathys-flood-story-oc.mp4" type="video/mp4" /></video></p> <hr /> <p dir="ltr"><strong>What is the difference between open and closed captions?</strong></p> <p dir="ltr"><em>Open captions</em> are displayed as a permanent part of the video, can never be turned off or hidden, and do not have to be selected by the user. <em>Closed captions</em> can be turned on and off and are not a permanent part of the video display.</p> <p dir="ltr"><strong>What is the difference between captions and subtitles?</strong></p> <p dir="ltr"><em>Subtitles</em> are used to translate dialogue into a different language. They are intended for hearing audiences and do not indicate audio information important to understanding the program. <em>Subtitles</em> rarely identify speakers or nonverbal sounds such as music and sound effects. <em>Subtitles</em> are not an acceptable method for conforming with the synchronized media standards.</p> <h4 id="whats-the-difference" dir="ltr"><strong>What is the difference between transcripts and captions?</strong></h4> <p dir="ltr"><em>Transcripts</em> are the output of a process in which speech or audio is converted into a written, plain text document. Transcripts do not have  time-coded information associated with them. <em>Captions</em> divide transcripts into blocks of text, known as “caption frames” which are time-coded and synchronized with the audio of a video.</p> <h4 id="what-about-auto-captions" dir="ltr"><strong>Can’t we just use auto-caption technology for pre-recorded media?</strong></h4> <p dir="ltr">While auto-captioning technology has improved considerably over the years, auto-captioning does not yet provide an equivalent experience for people who are deaf, hard of hearing, or who may otherwise use captions for understanding audio information. Voice-to-text translations can be incorrect, lack speaker name changes, fail to include any grammar and punctuation, and are often not synchronized with the narration in the audio track. Auto-captions also fail to describe other audible information, such as “cars crashing” or “fire alarm sounding” that could provide important non-visual context. As such, current auto-captioning technology would not allow your agency to meet the minimum standard for pre-recorded media.</p> <h4 id="tops-for-captioned-media" dir="ltr"><strong>What are some tips for the production of captioned media?</strong></h4> <p dir="ltr">The following are a few key items you should consider: </p> <ul> <li dir="ltr">Avoid relying solely on auto-captioning for pre-recorded media.</li> <li dir="ltr">Plan for captioning and avoid inefficiencies when producing media. Use speaker scripts, automated/manual captioning from live media events, and other text-based materials in your pre-recorded media captioning procedures.</li> <li dir="ltr">Synchronized media content with speech should have accessible captions that are synchronized to appear at approximately the same time as the corresponding audio, and equivalent to the spoken words and other audio information.</li> <li dir="ltr">Spoken words should have text equivalents. Sounds and other audio elements necessary to understand and enjoy the entertainment experience should be captioned. Audio elements that are often overlooked by captioners include additional information provided verbally for a text element on a presentation slide.</li> <li dir="ltr">The style of captioned elements (e.g., speaker names, sounds) should be consistent throughout a project.</li> </ul> <div style="width: 100%; border: 1px solid black; background-color: #f5f9fc;" class="border-base radius-lg padding-1"> <h3 id="resources-for-captions" dir="ltr"><strong>Resources for Captions</strong></h3> <ul> <li dir="ltr"><a class="ext" href="https://www.3playmedia.com/learn/popular-topics/closed-captioning/">The Ultimate Guide To Closed Captioning</a> - 3PlayMedia</li> <li dir="ltr"><a class="ext" href="https://webaim.org/techniques/captions/">Captions, Transcripts, and Audio Descriptions</a> - WebAIM</li> <li dir="ltr">Resources developed by <a href="https://digital.gov/digitalgov-university/">DigitalGov University</a> <ul> <li dir="ltr"><a href="https://www.digitalgov.gov/2014/06/30/508-accessible-videos-why-and-how-to-make-them/">508 Accessible Videos—Why (and How) to Make Them</a></li> <li dir="ltr"><a href="https://www.digitalgov.gov/2014/06/30/508-accessible-videos-how-to-caption-videos/">508 Accessible Videos – How to Caption Videos</a></li> </ul> </li> <li><a href="http://ncamftp.wgbh.org/cadet/">CADET - Caption and Descriptive Editing Tool</a> – WBGH</li> </ul> </div> <p><br /></p> <p class="rteright"><a href="#top">Back to Top</a></p> <h2 id="audio-description" dir="ltr"><strong>Audio Descriptions </strong></h2> <p dir="ltr">Audio description (AD) is audio-narrated descriptions of a synchronized media program's key visual elements. These descriptions are inserted into natural pauses in the program's dialogue. </p> <p dir="ltr">Audio description is a way to provide access to visual information by means of a verbal representation of visual elements in a video program for audience members who are blind or have a visual impairment. Audio description often cannot convey all of the visual information included in each scene of a video program; therefore, content creators and audio describers necessarily make choices to prioritize the information ultimately included in the description. Those choices seek to convey the intent of the program’s creator by presenting audiences with a description that illustrates the visual elements of a story in a manner that provides a comparable experience to that of sighted viewers.</p> <p dir="ltr">Once again, depending on whether the media is live, or pre-recorded, be aware of the (WCAG) synchronized media standards when planning the production of the media product:</p> <ul> <li dir="ltr">1.2.3 Audio Description or Media Alternative (Prerecorded) - An alternative for time-based media or audio description of the prerecorded video content is provided for synchronized media, except when the media is a media alternative for text and is clearly labeled as such.</li> <li dir="ltr">1.2.5 Audio Description (Prerecorded) - Audio description is provided for all prerecorded video content in synchronized media.</li> </ul> <div style="width: 100%; border: 1px solid black; background-color: #f5f9fc;" class="border-base radius-lg padding-1"> <p><strong>PRO TIP: </strong>When producing videos for social media platforms that lack separate audio description (AD) controls, it's best practice to provide a version of the video that includes both captions and audio descriptions.</p> </div> <h3 id="examples-of-audio-described-media" dir="ltr"><strong>Examples of Audio Described Media</strong></h3> <hr /> <p dir="ltr"><strong>Kathy’s Flood Story (Audio Described)</strong></p> <p dir="ltr">In this example of audio description, the producers planned for the secondary audio track by increasing the length of video between the narration audio track. This results in a better, more equivalent media experience for the viewer.</p> <p dir="ltr">Duration: 0h 0:42m</p> <p><video controls="controls" data-vscid="3qesx4ovd" style="width:100%" class="border-base radius-lg border-0px" poster="https://assets.section508.gov/files/thumbnails/kathys-flood-story-ad-poster.png"><source src="https://assets.section508.gov/files/videos/kathys-flood-story-ad.mp4" type="video/mp4" /></video></p> <hr /> <div class="grid-row grid-gap"> <div class="desktop:grid-col-3 display-flex flex-column flex-align-self-center" style="margin-bottom: 15px;"><strong><a href="https://www.youtube.com/watch?v=wsJDV1iXV0Q"><img style="width: 100%;" src="https://assets.section508.gov/files/thumbnails/vintage-commercial-thumb.png" alt="Vintage Commercial for Paper Towels " /></a></strong></div> <div class="desktop:grid-col-9"> <p dir="ltr"><strong><a class="ext" href="https://www.youtube.com/watch?v=wsJDV1iXV0Q">Vintage Commercial for Paper Towels </a></strong></p> <p dir="ltr">In this example, the audio description was not planned for originally, and has been inserted into the media afterwards by stopping the motion of the video and allowing time for a secondary audio track description of meaningful information.</p> <p dir="ltr">Duration: 0h 1:40m</p> </div> </div> <hr /> <p dir="ltr"><strong>What are common approaches to adding audio descriptions to videos?</strong></p> <ul> <li dir="ltr">Build the descriptions into the media file - The easiest way to create audio descriptions in your video is to plan for it and have your speakers identify themselves verbally (rather than just displaying their name on screen) and describe any visual information. This way, anyone—whether or not they are visually impaired—will know who is speaking and what they are referencing</li> <li dir="ltr">Make a second media file - The Revised Section 508 Standard requires federal agencies to use a video player that provides user controls for captioning and audio descriptions. Some players may play an alternate audio track which contains the primary and secondary narration, others may simply load an alternate audio described version of the media file. Alternate media files must be labeled as the audio described version. Unless you planned for the time needed for the secondary audio track, you may find it difficult to simply reuse the original video file without pausing the video where there is a natural break in the narration, to maintain synchronicity.</li> </ul> <p dir="ltr"><strong>What are some tips for the production of synchronized media?</strong></p> <p dir="ltr">An audio description is ultimately a creative process regardless of style, implementation or quality. Not all visual content can be described thoroughly and creators must make decisions regarding what is important to describe, the vocabulary used, timing and method of delivery. If possible, audio description should occur within the production process rather than external to it. If it does not occur within the production process, post-production remediation should be overseen by a member of the creative team, if possible. The following are a few key items that should be considered: </p> <ul> <li dir="ltr">Plan for accessibility to avoid retrofitting audio descriptions into an already produced media. All audio elements should be identified prior to editing video content. </li> <li dir="ltr">Visual elements necessary to understand and enjoy the entertainment experience are described. Visual elements that are often overlooked by describers include title, speakers and speaker changes, and end credits. </li> <li dir="ltr">Opportunities for redundancies that clarify comprehension and enjoyment should be considered where possible.</li> <li dir="ltr">The style of description should be consistent throughout a project.</li> <li dir="ltr">Description should only occur during non-dialogue pauses; description should never occur over dialogue, musical numbers or sound effects unless absolutely necessary.</li> <li dir="ltr">Describers should ensure that elements important to the narrative are described before additional details are provided. If time allows, the describer can include additional descriptions about the setting, a character's physical appearance and/or clothing to enhance the experience.</li> </ul> <div style="width: 100%; border: 1px solid black; background-color: #f5f9fc;" class="border-base radius-lg padding-1"> <h3 id="resources-for-audio-descriptions" dir="ltr"><strong>Resources for Audio Descriptions</strong></h3> <ul> <li dir="ltr"><a class="ext" href="http://www.mediac.ca/DVBPGDE_V2_28Feb2012.asp" target="_blank">Descriptive Video Production And Presentation Best Practices Guide For Digital Environments</a> - Media Access Canada</li> <li dir="ltr"><a class="ext" href="https://dcmp.org/learn/captioningkey/624">The Description Key</a> - The Described and Captioned Media Program <ul> <li dir="ltr"><a class="ext" href="https://dcmp.org/learn/captioningkey/619" target="_blank">Preparation</a></li> <li dir="ltr"><a class="ext" href="https://dcmp.org/learn/captioningkey/618" target="_blank">What to Describe</a></li> <li dir="ltr"><a class="ext" href="https://dcmp.org/learn/captioningkey/617" target="_blank">How to Describe</a></li> </ul> </li> <li dir="ltr"><a class="ext" href="http://acb.org/adp/">The Audio Description Project</a> - American Council of the Blind</li> <li dir="ltr"><a href="https://www.nps.gov/subjects/hfc/upload/ADCoreConcepts20MAR2018.pdf" target="_blank">Audio Description Core Concepts</a> (PDF) - Harpers Ferry Center of the National Park Service</li> <li dir="ltr"><a class="ext" href="https://www.3playmedia.com/blog/transcription-vs-captioning/" target="_blank">Transcription vs. Captioning – What’s the Difference?</a> - 3PlayMedia</li> <li dir="ltr"><a class="ext" href="https://webaim.org/techniques/captions/">Captions, Transcripts, and Audio Descriptions</a> - WebAIM</li> <li dir="ltr"><a href="https://www.digitalgov.gov/2014/06/30/508-accessible-videos-how-to-make-audio-descriptions/" target="_blank">508 Accessible Videos – How to Make Audio Descriptions</a> - Digital.gov</li> </ul> </div> <p><br /></p> <p class="rteright"><a href="#top">Back to Top</a></p> <h2 id="planning-accessible"><strong>Planning Accessible Audio & Video Media Content</strong></h2> <p>When creating new audio and video media content, producers must plan for captions, audio descriptions, and text transcripts to ensure that all users have access to the information. Fortunately for producers, determining which of the alternate methods is required is as quick and simple as answering this two-question workflow (see also, Figure 1):</p> <ul> <li><strong>Will we be using sound?</strong> <ul> <li>Yes, we will be using sound. <ul> <li><strong>Will we be using video?</strong> <ul> <li>Yes, we will be using sound and video together. This is called Synchronized Media and requires both captioning and audio description.</li> <li>No, we will be using sound only. This is called Audio-only Media, and requires a transcript** be published alongside the audio media player.</li> </ul> </li> </ul> </li> <li>No, I am not using sound (just video). <ul> <li>This is called Video-only Media and requires either a transcript or audio description.</li> </ul> </li> </ul> </li> </ul> <p><small>* Transcript is a text description of the video content to ensure equal understanding of information.</small></p> <div style="width: 100%; border: 1px solid black; background-color: #f5f9fc;" class="border-base radius-lg padding-1"> <strong>Note:</strong> "B-roll," the raw source media collected to supplement the creation of a pre-recorded video, does not have to meet any Section 508 requirements. </div> <p><br /></p> <div><img style="width: 100%;" src="https://assets.section508.gov/files/accessiblke-audio-video-workflow.png" alt="Planning Accessible Audio & Video Media Projects workflow as described in this section." /><br /> <small><em>Figure 1: Planning Accessible Audio & Video Media Projects</em></small></div> <p><br /></p> <p><strong>NOTE:</strong> As federal agencies can establish policy and design guidelines which meet or exceed the minimum standards of Section 508 (for example, an agency requires open captions for all videos), producers should confirm agency requirements when planning new media content.</p> <p><br /></p> <p class="rteright"><a href="#top">Back to Top</a></p> <h2 id="user-controls" dir="ltr"><strong>User Controls for Captions and Audio Descriptions</strong></h2> <p dir="ltr">The Revised Section 508 Standards include a requirement (503.4) where a digital product displays video with synchronized audio, the product shall provide user controls for closed captions and audio descriptions at the same menu level as the user controls for volume or program selection. This requirement works in concert with WCAG 2.0 success criteria and conformance requirements:</p> <ul> <li dir="ltr">503.4 User Controls for Captions and Audio Description. Where ICT displays video with synchronized audio, ICT shall provide user controls for closed captions and audio descriptions.</li> <li dir="ltr">503.4.1 Caption Controls. Where user controls are provided for volume adjustment, ICT shall provide user controls for the selection of captions at the same menu level as the user controls for volume or program selection.</li> <li dir="ltr">503.4.2 Audio Description Controls. Where user controls are provided for program selection, ICT shall provide user controls for the selection of audio descriptions at the same menu level as the user controls for volume or program selection.</li> </ul> <h3 id="examples-of-user-controls" dir="ltr"><strong>Example of Accessible User Controls </strong></h3> <p dir="ltr">The Department of the Interior has developed an open-source media player which conforms with the Revised Section 508 Standard for user controls by ensuring that the caption control (CC) and audio description control (AD) buttons are visible along-side the other user controls (Figure 1).</p> <p class="rtecenter" dir="ltr"><strong><img style="height: 192px; width: 728px;" src="https://assets.section508.gov/files/images/doi-player-controls.png" alt="Media player controls within a thin rectangular box, containing user controls at the same menu level (left to right): Play/Pause, Mute, Volume, progress, time remaining, Audio Description, Closed Caption, Picture in Picture, and Full Screen. " /></strong></p> <p class="rtecenter" dir="ltr"><em>Figure 1: User controls of the Department of the Interior media player</em></p> <hr /> <div class="grid-row grid-gap"> <div class="desktop:grid-col-3 display-flex flex-column flex-align-self-center" style="margin-bottom: 15px;"><strong><a href="https://www.nps.gov/media/video/view.htm?id=3DC5AD6C-A202-5DA1-E96E9E08644FF859"><img style="width: 100%" src="https://assets.section508.gov/files/thumbnails/nps-preview-thumb.png" alt="Restoring our Parks" /></a></strong></div> <div class="desktop:grid-col-9"> <p dir="ltr"><strong><a href="https://www.nps.gov/media/video/view.htm?id=3DC5AD6C-A202-5DA1-E96E9E08644FF859" target="_blank">Restoring our Parks</a></strong></p> <p dir="ltr">In this example, the National Park Service uses a keyboard accessible media player which provides user-selectable controls for closed caption and audio description at the same menu level as the volume. Note how the captions include descriptions of sounds, and the secondary audio track integrates the description of meaningful video content.</p> <p dir="ltr">Duration: 0h 3:07m</p> </div> </div> <hr /> <div class="border-base radius-lg border-1px padding-1" style="width: 100%; background-color: #f5f9fc;"> <h3 id="resources-for-user-controls" dir="ltr"><strong>Resources for User Controls for Captions and Audio Descriptions</strong></h3> <ul> <li dir="ltr">The Department of the Interior (DOI) <a class="ext" href="https://github.com/ONRR/accessible-video-player">media player</a> is available on GitHub</li> <li dir="ltr"><a href="https://www.digitalgov.gov/2014/06/30/508-accessible-videos-use-a-508-compliant-video-player/" target="_blank">508 Accessible Videos – Use a 508-Compliant Video Player</a> - Digital.gov</li> </ul> </div> <p class="rteright"><a href="#top">Back to Top</a></p> <h2 id="checklist" dir="ltr"><strong>Checklist</strong></h2> <table class="usa-table"> <thead> <tr> <th scope="col" style="background-color: #007eb5; color: #ffffff;">ID</th> <th scope="col" style="background-color: #007eb5; color: #ffffff;">Program Type</th> <th scope="col" style="background-color: #007eb5; color: #ffffff;">Yes/No</th> <th scope="col" style="background-color: #007eb5; color: #ffffff; width: 50%;">Notes</th> </tr> </thead> <tbody> <tr> <td>1.0</td> <td>Video Program with Sound</td> <td> </td> <td> </td> </tr> <tr> <td>1.1</td> <td><strong>Captions</strong> - Media has captions (open or closed) that are synchronized with video which includes other meaningful sounds and audio information.</td> <td> </td> <td> </td> </tr> <tr> <td>1.2</td> <td><strong>Audio Description</strong> - Media has visual information described by either the primary or a secondary speaker; either in the original or alternate media which is clearly labeled and associated.</td> <td> </td> <td> </td> </tr> <tr> <td>2.0</td> <td>Video Program without Sound</td> <td> </td> <td> </td> </tr> <tr> <td>2.1</td> <td><strong>Transcript or Audio Description</strong> - Media has either an associated text transcript, or a narrated audio track.</td> <td> </td> <td> </td> </tr> <tr> <td>3.0</td> <td>Audio Program without Video</td> <td> </td> <td> </td> </tr> <tr> <td>3.1</td> <td><strong>Transcript</strong> - Media, such as a podcast, has a text transcript which includes other meaningful sounds and audio information.</td> <td> </td> <td> </td> </tr> </tbody> </table> <p><br /></p> <p class="rteright"><a href="#top">Back to Top</a></p> <h2 id="resources" dir="ltr"><strong>Resources</strong></h2> <p dir="ltr">Below is a consolidated list of the resources referenced on this page along with some additional resources. </p> <p dir="ltr"><strong>General/Additional</strong></p> <ul> <li dir="ltr"><a href="/content/guide-accessible-web-design-development#synchronized_media">Guide to Accessible Web Design & Development: Synchronized Media</a></li> <li dir="ltr"><a class="ext" href="https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0&currentsidebar=%23col_overview&levels=aaa#principle1">How to Meet WCAG (Quick Reference)</a> - W3C</li> <li dir="ltr"><a class="ext" href="https://webaim.org/techniques/captions/">Captions, Transcripts, and Audio Descriptions</a> - WebAIM</li> <li dir="ltr"><a href="http://www.digitalgov.gov/2013/06/26/making-multimedia-section-508-compliant-and-accessible/">Making Multimedia Section 508 Compliant and Accessible</a> - Digital.gov</li> </ul> <p dir="ltr"><strong>Captions</strong></p> <ul> <li dir="ltr"><a class="ext" href="https://www.3playmedia.com/learn/popular-topics/closed-captioning/">The Ultimate Guide To Closed Captioning</a> - 3PlayMedia</li> <li dir="ltr">Resources developed by <a href="https://digital.gov/digitalgov-university/">DigitalGov University</a> <ul> <li dir="ltr"><a href="https://www.digitalgov.gov/2014/06/30/508-accessible-videos-why-and-how-to-make-them/">508 Accessible Videos—Why (and How) to Make Them</a></li> <li dir="ltr"><a href="https://www.digitalgov.gov/2014/06/30/508-accessible-videos-how-to-caption-videos/">508 Accessible Videos – How to Caption Videos</a></li> </ul> </li> <li><a href="http://ncamftp.wgbh.org/cadet/">CADET - Caption and Descriptive Editing Tool</a> – WBGH</li> </ul> <p dir="ltr"><strong>Audio Description</strong></p> <ul> <li dir="ltr"><a class="ext" href="http://www.mediac.ca/DVBPGDE_V2_28Feb2012.asp">Descriptive Video Production And Presentation Best Practices Guide For Digital Environments</a> - Media Access Canada</li> <li dir="ltr"><a class="ext" href="https://dcmp.org/learn/captioningkey/624">The Description Key</a> - The Described and Captioned Media Program <ul> <li dir="ltr"><a class="ext" href="https://dcmp.org/learn/captioningkey/619">Preparation</a></li> <li dir="ltr"><a class="ext" href="https://dcmp.org/learn/captioningkey/618">What to Describe</a></li> <li dir="ltr"><a class="ext" href="https://dcmp.org/learn/captioningkey/617">How to Describe</a></li> </ul> </li> <li dir="ltr"><a class="ext" href="http://acb.org/adp/">The Audio Description Project</a> - American Council of the Blind</li> <li dir="ltr"><a href="https://www.nps.gov/subjects/hfc/upload/ADCoreConcepts20MAR2018.pdf">Audio Description Core Concepts</a> (PDF) - Harpers Ferry Center of the National Park Service</li> <li dir="ltr"><a class="ext" href="https://www.3playmedia.com/blog/transcription-vs-captioning/">Transcription vs. Captioning – What’s the Difference?</a> - 3PlayMedia</li> <li dir="ltr"><a href="https://www.digitalgov.gov/2014/06/30/508-accessible-videos-how-to-make-audio-descriptions/">508 Accessible Videos – How to Make Audio Descriptions</a> - Digital.gov</li> </ul> <p dir="ltr"><strong>User Controls for Captions and Audio Descriptions</strong></p> <ul> <li dir="ltr">The Department of the Interior (DOI) <a class="ext" href="https://github.com/ONRR/accessible-video-player">media player</a> is available on GitHub</li> <li dir="ltr"><a href="https://www.digitalgov.gov/2014/06/30/508-accessible-videos-use-a-508-compliant-video-player/">508 Accessible Videos – Use a 508-Compliant Video Player</a> - Digital.gov</li> </ul> <div class="border-base radius-lg border-1px" style="margin-top: 1.5em;"> <div class="padding-1"> <p class="text-large"><strong>Before You Go</strong></p> <p>We're always working to improve the information and resources on this website. To suggest a new resource for this or another page, please <a href="mailto:section.508@gsa.gov">contact us</a>.</p> </div></div> <p><strong>Reviewed/Updated:</strong> April 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 Synchronized Media Content | Section508.gov