CINXE.COM

<!DOCTYPE html> <html class="no-js" lang="en" dir="ltr" prefix="og: http://ogp.me/ns#"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <script> document.documentElement.className = document.documentElement.className.replace('no-js', 'has-js'); function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "/WAI/assets/scripts/main.js?1732542395990846989"; document.body.appendChild(element); } window.addEventListener("load", downloadJSAtOnload, false); </script> <link rel="stylesheet" href="/WAI/assets/css/style.css?1732542395990846989"> <title> Description of Visual Information | Web Accessibility Initiative (WAI) | W3C</title> <meta name="generator" content="Jekyll v4.3.3" /> <meta property="og:title" content="Description of Visual Information" /> <meta name="author" content="W3C Web Accessibility Initiative (WAI)" /> <meta property="og:locale" content="en" /> <meta name="description" content="Helps you understand and create description of visual information (called audio description, video description, or described video) for video accessibility." /> <meta property="og:description" content="Helps you understand and create description of visual information (called audio description, video description, or described video) for video accessibility." /> <link rel="canonical" href="https://www.w3.org/WAI/media/av/description/" /> <meta property="og:url" content="https://www.w3.org/WAI/media/av/description/" /> <meta property="og:site_name" content="Web Accessibility Initiative (WAI)" /> <meta property="og:image" content="https://www.w3.org/WAI/content-images/media-guide/social.png" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary_large_image" /> <meta property="twitter:image" content="https://www.w3.org/WAI/content-images/media-guide/social.png" /> <meta property="twitter:title" content="Description of Visual Information" /> <meta name="twitter:site" content="@w3c_wai" /> <meta name="twitter:creator" content="@W3C Web Accessibility Initiative (WAI)" /> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"WebPage","author":{"@type":"Person","name":"W3C Web Accessibility Initiative (WAI)"},"description":"Helps you understand and create description of visual information (called audio description, video description, or described video) for video accessibility.","headline":"Description of Visual Information","image":"https://www.w3.org/WAI/content-images/media-guide/social.png","url":"https://www.w3.org/WAI/media/av/description/"}</script>  <link rel="alternate" type="application/rss+xml" href="/WAI/feed.xml"> </head> <body id="top" class="page-description-of-visual-information "> <nav aria-label="Skip Link and Language Selector" id="controls" class="default-grid"> <ul> <li><a href="#main">Skip to Content</a></li> <li class="opt"><a href="/WAI/meta/customize/">Change Text Size or Colors</a></li> <li class="opt languagelist"> <strong>This page in:</strong> <ul class="languagelistul"><li><strong style="text-transform: capitalize;">English</strong></li><li><a style="text-transform: capitalize;" href="/WAI/media/av/description/fr" lang="fr" dir="auto" translate="no">français</a></li> </ul> </li> <li class="opt"> <a href="/WAI/translations/">All Translations <svg focusable="false" aria-hidden="true" class="icon-translations "><use xlink:href="/WAI/assets/images/icons.svg#icon-translations"></use></svg></a> </li> <li><button id="showoptions" data-showhidebuttonid="header-showoptions" class="showhidebutton button-inline" data-target="#controls .opt" aria-expanded="false" data-large-aria-expanded="true" data-showtext='<svg focusable="false" aria-hidden="true" class="icon-languages "><use xlink:href="/WAI/assets/images/icons.svg#icon-languages"></use></svg> Show Customization, Languages, Translations' data-hidetext='Hide Options'><svg focusable="false" aria-hidden="true" class="icon-languages "><use xlink:href="/WAI/assets/images/icons.svg#icon-languages"></use></svg> Show Customization, Languages, Translations</button></li> </ul> </nav> <header id="site-header" class="default-grid with-gap"> <div class="logos"> <a lang="en" class="home w3c" href="https://www.w3.org/"> <svg role="img" aria-label="W3C" viewBox="0 0 68 34" xmlns="http://www.w3.org/2000/svg"><g><path d="m16.117 1.006 5.759 19.58 5.759-19.58h4.17 11.444v1.946l-5.879 10.128c2.065.663 3.627 1.868 4.686 3.615 1.059 1.748 1.589 3.799 1.589 6.155 0 2.914-.775 5.363-2.324 7.348s-3.555 2.978-6.017 2.978c-1.854 0-3.469-.589-4.845-1.767-1.377-1.178-2.396-2.773-3.058-4.786l3.256-1.35c.477 1.218 1.106 2.178 1.887 2.879.781.702 1.701 1.052 2.76 1.052 1.112 0 2.052-.622 2.82-1.866.768-1.245 1.152-2.74 1.152-4.489 0-1.933-.411-3.429-1.231-4.488-.954-1.244-2.45-1.867-4.489-1.867h-1.588v-1.906l5.56-9.612h-6.712l-.382.65-8.163 27.548h-.397l-5.958-19.937-5.957 19.937h-.397l-9.53-32.168h4.17l5.759 19.58 3.892-13.185-1.906-6.395z"/><path d="m64.92 1.006c-.819 0-1.554.295-2.111.861-.591.6-.92 1.376-.92 2.178s.313 1.545.887 2.128c.583.591 1.334.912 2.145.912.793 0 1.562-.321 2.161-.903.574-.557.887-1.3.887-2.136 0-.811-.321-1.57-.878-2.136-.584-.592-1.344-.904-2.171-.904zm2.643 3.065c0 .701-.271 1.351-.768 1.832-.524.507-1.174.777-1.892.777-.675 0-1.342-.278-1.84-.785s-.777-1.157-.777-1.849.287-1.368.802-1.891c.481-.49 1.131-.751 1.84-.751.726 0 1.376.271 1.883.785.49.489.752 1.147.752 1.882zm-2.559-1.807h-1.3v3.445h.65v-1.469h.642l.701 1.469h.726l-.769-1.57c.498-.102.785-.439.785-.929 0-.625-.472-.946-1.435-.946zm-.118.422c.608 0 .886.169.886.591 0 .405-.278.549-.87.549h-.549v-1.14z"/><path d="m59.807.825.676 4.107-2.391 4.575s-.918-1.941-2.443-3.015c-1.285-.905-2.122-1.102-3.431-.832-1.681.347-3.587 2.357-4.419 4.835-.995 2.965-1.005 4.4-1.04 5.718-.056 2.113.277 3.362.277 3.362s-1.452-2.686-1.438-6.62c.009-2.808.451-5.354 1.75-7.867 1.143-2.209 2.842-3.535 4.35-3.691 1.559-.161 2.791.59 3.743 1.403 1 .854 2.01 2.721 2.01 2.721z"/><path d="m60.102 24.063s-1.057 1.889-1.715 2.617c-.659.728-1.837 2.01-3.292 2.651s-2.218.762-3.656.624c-1.437-.138-2.772-.97-3.24-1.317s-1.664-1.369-2.34-2.322-1.733-2.859-1.733-2.859.589 1.91.958 2.721c.212.467.864 1.894 1.789 3.136.863 1.159 2.539 3.154 5.086 3.604 2.547.451 4.297-.693 4.73-.97s1.346-1.042 1.924-1.66c.603-.645 1.174-1.468 1.49-1.962.231-.36.607-1.092.607-1.092z"/></g></svg> </a> <a lang="en" class="home" href="/WAI/"> <span class="wai"><span class="wa">Web Accessibility</span> <span class="i"><span class="initieative">Initiative</span> <span>WAI</span></span></span> </a> <div class="claim"> <span>Strategies, standards, resources to make the Web accessible to people with disabilities</span> </div> <button class="button button-menu" aria-haspopup="true" aria-expanded="false" id="openmenu"><span><svg focusable="false" aria-hidden="true" class="icon-menu "><use xlink:href="/WAI/assets/images/icons.svg#icon-menu"></use></svg> Menu</span></button> </div> <div class="navigations"> <nav class="metanav" aria-label="Meta & Search" lang="en"> <ul> <li><a href="/WAI/about/participating/">Get Involved</a></li> <li><a href="/WAI/about/">About W3C WAI</a></li> <li> <form action="/WAI/search/" role="search"> <div> <label for="header-search"> <span class="visuallyhidden">Search:</span> <input id="header-search" type="search" name="q" placeholder="Search" aria-label="Search"> </label> <button class="button button-icon button-nobg button-noborder"><span><svg focusable="false" aria-label="Submit Search" class="icon-search "><use xlink:href="/WAI/assets/images/icons.svg#icon-search"></use></svg></span></button> </div> </form> </li> </ul> </nav> </div> </header><nav class="mainnav" aria-label="Main" lang="en"><ul><li><a lang="en" href="/WAI/fundamentals/"><span>Accessibility Fundamentals</span></a></li><li><a lang="en" href="/WAI/planning/"><span>Planning & Policies</span></a></li><li><a lang="en" href="/WAI/design-develop/"><span>Design & Develop</span></a></li><li><a lang="en" href="/WAI/test-evaluate/"><span>Test & Evaluate</span></a></li><li><a lang="en" href="/WAI/teach-advocate/"><span>Teach & Advocate</span></a></li><li><a lang="en" href="/WAI/standards-guidelines/"><span>Standards/<wbr>Guidelines</span></a></li></ul></nav><nav class="default-grid breadcrumb" aria-label="Breadcrumb" lang="en"> <ul style="align-self: center;"> <li><a href="/WAI/" lang="en">Home</a></li><li><a lang="en" href="/WAI/design-develop/"><span>Design & Develop</span></a></li><li><a lang="en" href="/WAI/media/av/"><span>Audio & Video Media</span></a></li><li><a lang="en" href="/WAI/media/av/description/" aria-current="page"><span>Description</span></a></li></ul> </nav> <div class="default-grid with-gap leftcol"> <div class="sidenav"><nav class="sn-contents" aria-label="Secondary"> <ul class="sidenav--list"> <li> <a lang="en" href="/WAI/design-develop/" class="page-link"><span>Design & Develop</span></a></li><li> <a lang="en" href="/WAI/tips/writing/" class="page-link"><span>Tips for Writing</span></a></li><li> <a lang="en" href="/WAI/tips/designing/" class="page-link"><span>Tips for Designing</span></a></li><li> <a lang="en" href="/WAI/tips/developing/" class="page-link"><span>Tips for Developing</span></a></li><li> <a lang="en" href="/WAI/media/av/" aria-current="location" class="page-link"><span>Audio & Video Media</span></a><ul><li> <a lang="en" href="/WAI/media/av/users-orgs/" class="page-link"><span>User Needs</span></a></li><li> <a lang="en" href="/WAI/media/av/planning/" class="page-link"><span>Planning</span></a></li><li> <a lang="en" href="/WAI/media/av/av-content/" class="page-link"><span>Audio Content & Video Content</span></a></li> <li> <a lang="en" href="/WAI/media/av/description/" aria-current="page" class="page-link"><span>Description</span></a></li><li> <a lang="en" href="/WAI/media/av/captions/" class="page-link"><span>Captions/Subtitles</span></a></li><li> <a lang="en" href="/WAI/media/av/transcripts/" class="page-link"><span>Transcripts</span></a></li><li> <a lang="en" href="/WAI/media/av/transcribing/" class="page-link"><span>Transcribing Audio to Text</span></a></li><li> <a lang="en" href="/WAI/media/av/sign-languages/" class="page-link"><span>Sign Languages</span></a></li><li> <a lang="en" href="/WAI/media/av/player/" class="page-link"><span>Media Player</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/" class="page-link"><span>Tutorials</span></a><ul><li> <a lang="en" href="/WAI/tutorials/page-structure/" class="page-link"><span>Page Structure</span></a><ul><li> <a lang="en" href="/WAI/tutorials/page-structure/regions/" class="page-link"><span>Page Regions</span></a></li><li> <a lang="en" href="/WAI/tutorials/page-structure/labels/" class="page-link"><span>Labeling Regions</span></a></li><li> <a lang="en" href="/WAI/tutorials/page-structure/headings/" class="page-link"><span>Headings</span></a></li><li> <a lang="en" href="/WAI/tutorials/page-structure/content/" class="page-link"><span>Content Structure</span></a></li><li> <a lang="en" href="/WAI/tutorials/page-structure/example/" class="page-link"><span>Full Example</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/menus/" class="page-link"><span>Menus</span></a><ul><li> <a lang="en" href="/WAI/tutorials/menus/structure/" class="page-link"><span>Structure</span></a></li><li> <a lang="en" href="/WAI/tutorials/menus/styling/" class="page-link"><span>Styling</span></a></li><li> <a lang="en" href="/WAI/tutorials/menus/flyout/" class="page-link"><span>Fly-Out Menus</span></a></li><li> <a lang="en" href="/WAI/tutorials/menus/application-menus/" class="page-link"><span>Application Menus</span></a></li><li> <a lang="en" href="/WAI/tutorials/menus/application-menus-code/" class="page-link"><span>Application Menu Example & Code</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/images/" class="page-link"><span>Images</span></a><ul><li> <a lang="en" href="/WAI/tutorials/images/informative/" class="page-link"><span>Informative Images</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/decorative/" class="page-link"><span>Decorative Images</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/functional/" class="page-link"><span>Functional Images</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/textual/" class="page-link"><span>Images of Text</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/complex/" class="page-link"><span>Complex Images</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/groups/" class="page-link"><span>Groups of Images</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/imagemap/" class="page-link"><span>Image Maps</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/decision-tree/" class="page-link"><span>An <code style="color: inherit;">alt</code> Decision Tree</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/tips/" class="page-link"><span>Tips and Tricks</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/tables/" class="page-link"><span>Tables</span></a><ul><li> <a lang="en" href="/WAI/tutorials/tables/one-header/" class="page-link"><span>One Header</span></a></li><li> <a lang="en" href="/WAI/tutorials/tables/two-headers/" class="page-link"><span>Two Headers</span></a></li><li> <a lang="en" href="/WAI/tutorials/tables/irregular/" class="page-link"><span>Irregular Headers</span></a></li><li> <a lang="en" href="/WAI/tutorials/tables/multi-level/" class="page-link"><span>Multi-level Headers</span></a></li><li> <a lang="en" href="/WAI/tutorials/tables/caption-summary/" class="page-link"><span>Caption & Summary</span></a></li><li> <a lang="en" href="/WAI/tutorials/tables/tips/" class="page-link"><span>Tips and Tricks</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/forms/" class="page-link"><span>Forms</span></a><ul><li> <a lang="en" href="/WAI/tutorials/forms/labels/" class="page-link"><span>Labeling Controls</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/grouping/" class="page-link"><span>Grouping Controls</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/instructions/" class="page-link"><span>Form Instructions</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/validation/" class="page-link"><span>Validating Input</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/notifications/" class="page-link"><span>User Notifications</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/multi-page/" class="page-link"><span>Multi-page Forms</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/custom-controls/" class="page-link"><span>Custom Controls</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/carousels/" class="page-link"><span>Carousels</span></a><ul><li> <a lang="en" href="/WAI/tutorials/carousels/structure/" class="page-link"><span>Structure</span></a></li><li> <a lang="en" href="/WAI/tutorials/carousels/functionality/" class="page-link"><span>Functionality</span></a></li><li> <a lang="en" href="/WAI/tutorials/carousels/animations/" class="page-link"><span>Animations</span></a></li><li> <a lang="en" href="/WAI/tutorials/carousels/styling/" class="page-link"><span>Styling</span></a></li><li> <a lang="en" href="/WAI/tutorials/carousels/working-example/" class="page-link"><span>Working Example</span></a></li><li> <a lang="en" href="/WAI/tutorials/carousels/full-code/" class="page-link"><span>Complete Code</span></a></li></ul></li></ul></li></ul></nav><nav class="sidenav-languages" aria-labelledby="languagehead"> <header id="languagehead">Languages/Translations</header> <ul class="langlist"> <li style="margin-bottom: 2px;"><strong style="text-transform: capitalize;">English (original)</strong></li><li style="margin-bottom: 2px;"><a style="text-transform: capitalize;" href="/WAI/media/av/description/fr" dir="auto" translate="no" lang="fr">français</a></li></ul> <p><a href="/WAI/translations/">All Translations</a></p> <p><a href="/WAI/about/translating/">Translating WAI Resources</a></p> </nav> </div> <main id="main" lang="en"> <header class="in-resource"> <h1> <img src="/WAI/content-images/media-guide/ad.svg" alt="" class="title-image right" style="height: 2em;"> Description of Visual Information </h1><p>in <a lang="en" href="/WAI/media/av/"><span>Making Audio and Video Media Accessible</span></a></p></header> <aside class="box"><header class="box-h "> Summary</header><div class="box-i"> <p>Description of visual information is called <strong><em>audio description</em></strong>, <strong><em>video description</em></strong>, or <strong><em>described video</em></strong> in different areas.</p> <p>Description provides content to people who are blind and others who cannot see the video adequately. It describes visual information needed to understand the content, including text displayed in the video.</p> <p>This page helps you understand and create description of visual information for new and existing videos. (Description does not apply to audio-only, such as podcasts.)</p> </div></aside> <nav class="box box-simple" aria-labelledby="tocheading" id="toc"> <header id="tocheading" class="box-h box-h-simple"> Page Contents</header> <div class="box-i"> <ul id="markdown-toc"> <li><a href="#introduction" id="markdown-toc-introduction">Introduction</a> <ul> <li><a href="#terminology" id="markdown-toc-terminology">Terminology</a></li> </ul> </li> <li><a href="#checklist" id="markdown-toc-checklist">Does My Media Need Description?</a></li> <li><a href="#description-considerations-skills-and-tools" id="markdown-toc-description-considerations-skills-and-tools">Description Considerations, Skills, and Tools</a></li> <li><a href="#what-method-of-description" id="markdown-toc-what-method-of-description">What Method of Description?</a></li> <li><a href="#options-for-creating-description" id="markdown-toc-options-for-creating-description">Options for Creating Description</a> <ul> <li><a href="#integrated--creating-integrated-description" id="markdown-toc-integrated--creating-integrated-description">Integrated – Creating Integrated Description</a></li> <li><a href="#text--creating-description-in-a-text-file" id="markdown-toc-text--creating-description-in-a-text-file">Text – Creating Description in a Text File</a></li> <li><a href="#audio-only--creating-description-in-a-separate-audio-file-only" id="markdown-toc-audio-only--creating-description-in-a-separate-audio-file-only">Audio Only – Creating Description in a Separate Audio File Only</a></li> <li><a href="#video-with-space--creating-a-separate-described-video---if-descriptions-fit-in-audio-spaces" id="markdown-toc-video-with-space--creating-a-separate-described-video---if-descriptions-fit-in-audio-spaces">Video with Space – Creating a Separate Described Video - If Descriptions Fit in Audio Spaces</a></li> <li><a href="#video-without-space--creating-a-separate-described-video---if-descriptions-do-not-fit-in-audio-spaces" id="markdown-toc-video-without-space--creating-a-separate-described-video---if-descriptions-do-not-fit-in-audio-spaces">Video Without Space – Creating a Separate Described Video - If Descriptions Do <em>Not</em> Fit in Audio Spaces</a></li> <li><a href="#other-options" id="markdown-toc-other-options">Other Options</a></li> </ul> </li> <li><a href="#tips-for-doing-description-yourself" id="markdown-toc-tips-for-doing-description-yourself">Tips for Doing Description Yourself</a> <ul> <li><a href="#writing" id="markdown-toc-writing">Tips for Writing Descriptions</a></li> <li><a href="#recording" id="markdown-toc-recording">Tips for Recording Descriptions</a></li> <li><a href="#combining" id="markdown-toc-combining">Tips for Combining Audio Files</a></li> <li><a href="#vtt-file" id="markdown-toc-vtt-file">VTT File</a></li> </ul> </li> </ul> </div> </nav> <h2 id="introduction">Introduction</h2> <p><em>Who:</em> Description provides content to people who are blind and others who cannot see the video adequately.</p> <p><em>What:</em> Description explains visual information needed to understand the content. (For example, “Pat opens a small box, looks at a diamond engagement ring, and cries”.) It can be provided as:</p> <ul> <li><strong>integrated description</strong> — description is included in the main speakers’ scripts</li> <li><strong>alternative video</strong> — description is included in a separate video</li> <li><strong>separate file</strong> — description is in a timed text file or synched audio file; must be supported by the media player</li> </ul> <details><summary> <p>More about types of description:</p> </summary> <div> <ul> <li><strong>integrated description</strong> <em>(example below)</em> <ul> <li>one video with one audio track</li> <li>description is naturally woven into the script for the main speaker(s)</li> <li>usually best for most training videos, yet not most stories</li> </ul> </li> <li><strong>alternative video</strong> <em>(example below)</em> <ul> <li>two videos: one without description, one with description</li> <li>description is included in one audio track</li> <li>description is usually by a different speaker so it is easily distinguishable from the main audio content</li> </ul> </li> <li><strong>separate file</strong> <ul> <li>one video with main audio track, <strong><em>and</em></strong></li> <li>description is provided in a separate audio track <strong><em>or</em></strong> a timed text file</li> <li>must be supported by the media player</li> </ul> </li> </ul> </div> </details> <p><em>Examples:</em></p> <ul> <li> <p>Integrated: <a href="https://www.youtube.com/watch?v=JUfmCvdzqbM">Training video with the description integrated in what the trainer is saying (YouTube)<br /><img src="/WAI/content-images/media-guide/eg-integrated-description.png" alt="" class=" normal video" /></a></p> </li> <li> <p>Alternative video: <a href="https://www.youtube.com/watch?v=F3A1VffiOH4">Alternative story video with audio description in a different voice (YouTube)<br /><img src="/WAI/content-images/media-guide/using-description.jpg" alt="" class=" normal video" /></a></p> </li> </ul> <p style="color:#686868; line-height:100%; font-size:0.875rem;">These videos are also available from the W3C website: <a href="https://www.w3.org/2020/10/TPAC/w3cx-challenging-assumptions.html#talk" style="color:#686868">training video (web page)</a>, <a href=" https://media.w3.org/wai/perspective-videos/text-to-speech-ad.mp4" style="color:#686868">story video (MP4 file size 28MB)</a>.</p> <h3 id="terminology">Terminology</h3> <p class="no_toc">Description of visual information provided via audio is called “audio description” in Web Content Accessibility Guidelines (WCAG). In some regions and documents it is called “video description” or “described video”.</p> <p>This resource uses “described video” in some places as a shortened form of “a video that includes description of the visual information in audio”.</p> <h2 id="checklist">Does My Media Need Description?</h2> <p>This section tells you:</p> <ul> <li>What is required in the WCAG standard at Level A, AA, and AAA. <em>(<a href="/WAI/media/av/planning/#wcag-standard">WCAG</a> is introduced in the Planning page of this resource.)</em></li> <li>What is needed to meet user needs, beyond WCAG. If there are no “A”s, then it is not required in WCAG.</li> </ul> <aside class="box box-highlighted" id="checklist-ao"><header class="box-h box-h-highlighted"> Audio-only (e.g., podcast): </header><div class="box-i"> <ul> <li>For pre-recorded and live: <ul> <li>Description is not needed because there is no visual information.</li> </ul> </li> </ul> </div></aside> <aside class="box box-highlighted" id="checklist-video"><header class="box-h box-h-highlighted"> Video: </header><div class="box-i"> <p><strong>Does the video have visual information</strong> that is needed to understand what the video is communicating?</p> <ul> <li>If no (for example, it is only a person talking): <ul> <li>Description is not needed. Consider <a href="/WAI/media/av/planning/#none">informing users</a>.</li> </ul> </li> <li>If yes: <ul> <li>For pre-recorded: <ul> <li>Description is needed to provide the important visual information to people who are blind and listen to the video.</li> <li>Description <strong><em>or</em></strong> a <a href="/WAI/media/av/transcripts/">descriptive transcript</a> is <strong><em>required</em></strong> in WCAG at Level A.</li> <li>Description is <strong><em>required</em></strong> in WCAG at Level AA.</li> </ul> </li> <li>For live: <ul> <li>Description is needed to provide the important visual information to people who are blind.</li> <li>Description is not required to meet WCAG.</li> </ul> </li> </ul> </li> </ul> </div></aside> <p><br /></p> <p><strong>WCAG excerpts</strong> with emphasis added, additions in [brackets], and links to more information in “Understanding WCAG”:</p> <ul> <li><a href="https://www.w3.org/WAI/WCAG22/Understanding/audio-only-and-video-only-prerecorded.html">A 1.2.1 Audio-only and Video-only</a> (Prerecorded): For… Prerecorded Video-only: Either an alternative for time-based media [descriptive transcript] <strong><em>or</em></strong> an audio track [of description] is provided that presents equivalent information for prerecorded video-only content.</li> <li><a href="https://www.w3.org/WAI/WCAG22/Understanding/audio-description-or-media-alternative-prerecorded.html">A 1.2.3 Audio Description or Media Alternative</a> (Prerecorded): An alternative for time-based media [transcript] <strong><em>or</em></strong> audio description of the prerecorded video content is provided for synchronized media…</li> <li><a href="https://www.w3.org/WAI/WCAG22/Understanding/audio-description-prerecorded.html">AA 1.2.5 Audio Description</a> (Prerecorded): Audio description is provided for all prerecorded video content in synchronized media.</li> <li><a href="https://www.w3.org/WAI/WCAG22/Understanding/extended-audio-description-prerecorded.html">AAA 1.2.7 Extended Audio Description</a> (Prerecorded): Where pauses in foreground audio are insufficient to allow audio descriptions to convey the sense of the video, extended audio description is provided for all prerecorded video content in synchronized media.</li> </ul> <h2 id="description-considerations-skills-and-tools">Description Considerations, Skills, and Tools</h2> <p>When accessibility is considered <em>before</em> videos are produced, it significantly cuts down on cost and effort to develop description. For some types of video (such as some training videos), description of the visual information can be seamlessly integrated by the speakers as the video is planned and created, and you don’t need separate description, thus there is no additional cost.</p> <p>Information on planning for description in <em>new videos</em> is in the “Creating Audio and Video Content” page, <a href="/WAI/media/av/av-content/#plan-description">Plan for Description of Visual Information section</a>.</p> <p>To add description to <em>an existing video</em>, you’ll either need skills and tools to:</p> <ul> <li>write it</li> <li>create a VTT file with the timed descriptions</li> </ul> <p>Or:</p> <ul> <li>write it</li> <li>narrate it</li> <li>record it</li> <li>integrate it in new audio and/or video files</li> </ul> <p>Many organizations choose to outsource their description.</p> <h2 id="what-method-of-description">What Method of Description?</h2> <p>What method to use for description depends on your video content and the media player that you use. First, figure out these issues about your video content, timing, and player:</p> <ul> <li> <p><strong>Integrated</strong> — For new videos, can the speakers describe the relevant visual information as the video is recorded? This works for well for some videos, such as presentations and instructional videos. For examples, see the “Creating Audio and Video Content” page, <a href="/WAI/media/av/av-content/#integrate-description">Integrated Description section</a>.</p> </li> <li> <p><strong>Media player support</strong> — Information about media player functionality is in the Accessible Media Players page under <a href="/WAI/media/av/player/#existing-players">Existing Players</a>. Does the media player, platform, or plug-in that you are using provide functionality for:</p> <ul> <li>description from a text file?</li> <li>a separate audio track for description?</li> </ul> </li> </ul> <p><a id="space"> </a></p> <ul> <li><strong>Space in audio</strong> — Is there enough space in the main audio for the description? That is, are there sufficient pauses throughout the narration or speaking where the relevant description will fit? For example, <ul> <li>If the only description needed is at the beginning of the video where these is a text title and background music, then: Yes, there is enough space.</li> <li>If the speaker talks continually without pausing, then: No, there is not enough space for description.</li> </ul> </li> </ul> <p><strong><em>Use the information from above to answer the following questions</em></strong> in order to determine what method to provide description for your video. The options listed first are usually the best, yet you can choose another option.</p> <aside class="box box-highlighted" id="method-tree"><header class="box-h box-h-highlighted"> Description method: </header><div class="box-i"> <ul> <li>Is it a new video <em>and</em> can the speakers describe the visual information in the main audio? <ul> <li>If yes, provide <strong>integrated description</strong> (no separate description is needed),<br /> <em><strong>or</strong></em> another option below.</li> <li>If no, will you use a media player that provides functionality for description from a text file? <ul> <li>If yes, provide description in a <strong>timed text file</strong>,<br /> <em><strong>or</strong></em> another option below.</li> <li>If no, will you use a media player that supports a separate audio track for the description, <em>and</em> is there enough space in the main audio for the description? <ul> <li>If yes, provide description in a <strong>separate audio file</strong>,<br /> <em><strong>or</strong></em> provide a <strong>separate described video</strong>.</li> <li>If no, provide a <strong>separate described video</strong>.</li> </ul> </li> </ul> </li> </ul> </li> </ul> </div></aside> <h2 id="options-for-creating-description">Options for Creating Description</h2> <p>Depending on your video situation, do one of the options below — as determined from the “What Description to Provide for My Video?” section above.</p> <h3 id="integrated--creating-integrated-description">Integrated – Creating Integrated Description</h3> <p>This approach works for some new videos. The process to develop a video with integrated description is basically:</p> <ol> <li>When writing the script, make sure all relevant visual information is included. See <a href="#writing">Tips for Writing Descriptions below</a> and examples in Accessible Audio and Video Content, <a href="/WAI/media/av/av-content/#integrate-description">Integrate description section</a>.</li> <li>Before finalizing the video, check to confirm that all relevant visual information is covered in the audio.</li> </ol> <h3 id="text--creating-description-in-a-text-file">Text – Creating Description in a Text File</h3> <p>This approach only works when the media player that you’re using supports text-based description that is read aloud. And, either the description fits in the space of the main audio, or the player provides functionality to pause during description. It requires someone to create a timed text file — minimal skills are needed; tools are not required, yet, tools make it faster and easier.</p> <p>The process to develop descriptions in a text file is basically:</p> <ol> <li>Write out the descriptions. See <a href="#writing">Tips for Writing Descriptions below</a>.</li> <li>Add the timestamps for the descriptions in the file format used by the media player. It is usually <a href="#vtt">WebVTT like the example below</a>.</li> </ol> <p>(Make sure the descriptions file is included with the video.)</p> <p>If the descriptions do not fit into the main audio space, provide instructions to users to set their player to pause the video during the description. For example:</p> <aside class="box"><header class="box-h "> To set the video to pause for description of visual information:</header><div class="box-i"> <p><img src="/WAI/content-images/media-guide/player-preferences.png" alt="" class="" style="float: right; height: 7em; padding-left 7px;'" /></p> <ul> <li>Select “Preferences”, then “Descriptions”.<br /> The “Description Preferences” box opens.</li> <li>Under “Text-based description”, select the checkbox for “Automatically pause video when description starts”.</li> <li>Select the Save button.</li> </ul> </div></aside> <h3 id="audio-only--creating-description-in-a-separate-audio-file-only">Audio Only – Creating Description in a Separate Audio File Only</h3> <p>This approach only works when there is enough space in the main audio for the description, <em>and</em> the media player supports a separate audio track for the description. This requires skills and software for audio recording and audio editing.</p> <p>The process to develop description in a separate audio file is basically:</p> <ol> <li>Write out the descriptions. See <a href="#writing">Tips for Writing Descriptions below</a>.</li> <li>Record the descriptions. See <a href="#recording">Tips for Recording Descriptions below</a>.</li> <li>Ensure the descriptions play in the audio spaces with the main video.</li> <li>Provide a caption file of the description. <a href="#vtt">Example VTT file of audio description</a></li> </ol> <p>(Ensure the files are integrated with the player on the web page.)</p> <h3 id="video-with-space--creating-a-separate-described-video---if-descriptions-fit-in-audio-spaces">Video with Space – Creating a Separate Described Video - If Descriptions Fit in Audio Spaces</h3> <p>This applies if the descriptions do fit in the spaces, as described in <a href="#space">Space in audio above</a>_. It requires skills and software for audio recording and video editing. Depending on the player that you are using, you might need video software to regenerate the video.</p> <p>The process to develop a separate audio file is basically:</p> <ol> <li>Write out the descriptions. See <a href="#writing">Tips for Writing Descriptions below</a>.</li> <li>Record the descriptions. See <a href="#recording">Tips for Recording Descriptions below</a>.</li> <li>Create a new audio file by combining the original audio and the new description audio. See <a href="#combining">Tips for Combining Audio Files below</a>.</li> <li>Provide the file(s):</li> </ol> <ul> <li><em><strong>If</strong></em> your player uses separate video and audio tracks,<br />you’re done.</li> <li><em><strong>If</strong></em> your player uses a single video file that includes the audio,<br />generate the new described video with the audio file that you just created.</li> </ul> <p>(Make sure on the web page where the video is available, the described version uses the correct version that you just created.)</p> <h3 id="video-without-space--creating-a-separate-described-video---if-descriptions-do-not-fit-in-audio-spaces">Video Without Space – Creating a Separate Described Video - If Descriptions Do <em>Not</em> Fit in Audio Spaces</h3> <p>If all the descriptions do <strong>not</strong> fit in the spaces <em>(as described in <a href="#space">Space in audio above</a></em>), you’ll need to develop a separate audio file and also edit the visual track. This requires skills and software for audio recording, audio editing, and video editing.</p> <p>The process to develop a separate audio file and edit the visual track is basically:</p> <ol> <li>Write out the descriptions. See <a href="#writing">Tips for Writing Descriptions below</a>.</li> <li>Record the descriptions. See <a href="#recording">Tips for Recording Descriptions below</a>.</li> <li>Create a new audio file by combining the original audio and the new description audio. See <a href="#combining">Tips for Combining Audio Files below</a>.</li> <li>Create a new video: <ul> <li><em><strong>If</strong></em> you have source video with longer scenes <em>(as described in Accessible Audio and Video Content, <a href="/WAI/media/av/av-content/#time-for-description">Time for description section</a>)</em>, recut the scenes longer to fill in the visual space where you need to accommodate the time for the description.</li> <li><em><strong>If not or if you’re adding to an existing video</strong></em>, you will need to leave a static image in the video while the description is playing in the audio. </li> </ul> </li> </ol> <p>(Make sure on the web page where the video is available, the described version uses the correct version that you just created.)</p> <h3 id="other-options">Other Options</h3> <ul class="no_toc"> <li>Extended Description with SMIL — The only markup-based method for providing extended audio descriptions is to use SMIL 3.0. Support for SMIL is very limited. Implementations would most likely require plug-ins and/or heavily customized approaches.</li> <li>Provide functionality for the video to pause for the description — This is not suggested in most cases because it requires extra coding and provides a less-than-optimum user experience.</li> </ul> <details id="tips"><summary> <h2 id="tips-for-doing-description-yourself">Tips for Doing Description Yourself</h2> </summary> <div> <h3 id="writing">Tips for Writing Descriptions</h3> <ul class="no_toc"> <li>Describe the visual elements that are important to understand what the video is communicating. Imagine that you are describing the video to someone who cannot see it — what do you say? You don’t need to describe every detail or things that are apparent from the audio.</li> <li>Describe objectively, without interpretation, censorship, or comment.</li> <li>Write description in present tense, active voice, and third-person narrative style.</li> </ul> <p>Generally, all text in the video should be included in the main audio (integrated description) or in the separate description. For example, title text at the beginning of the video, links and e-mail addresses shown at the end, speakers’ names in text, and text in a presentation. The text does not have to be included verbatim (exactly word-for-word), yet all of the information conveyed by the text needs to be available in the main audio, in the separate description, or clearly with the video.</p> <p>More guidance on writing descriptions is available on the web, for example: <a href="https://dcmp.org/learn/227">Description Tip Sheet <svg focusable="false" aria-label="External Site" class="icon-external-link "><use xlink:href="/WAI/assets/images/icons.svg#icon-external-link"></use></svg></a> and <a href="https://www.descriptionkey.org/how_to_describe.html">How to Describe <svg focusable="false" aria-label="External Site" class="icon-external-link "><use xlink:href="/WAI/assets/images/icons.svg#icon-external-link"></use></svg></a>.</p> <h3 id="recording">Tips for Recording Descriptions</h3> <ul class="no_toc"> <li>Use a voice, style, and delivery that is distinguishable from other voices used in the video.</li> <li>Use a neutral voice that does not convey emotions.</li> <li>When recording a single file with timed descriptions, voice the descriptions at the same time as the visual content, or right before the visual content. Don’t put the description after the visual content.</li> <li>See <a href="/WAI/media/av/av-content/#audio">guidance on audio content</a>.</li> </ul> <h3 id="combining">Tips for Combining Audio Files</h3> <ul class="no_toc"> <li> <p>Put descriptions at the same time as the visual content, or right before the visual content. Don’t put the description after the visual content.</p> </li> <li> <p>Make the description clear above other noises. When mixing the descriptions with the main audio, lower the main audio level when the description plays and raise the description audio level. When the description is finished playing, lower the description audio level and raise the main audio level to its normal setting. Repeat this process (known as “ducking”) for every description instance.</p> </li> </ul> </div> </details> <h3 id="vtt-file">VTT File</h3> <aside class="box" id="vtt"><header class="box-h "> Example VTT file of audio description</header><div class="box-i"> <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>WEBVTT 00:00:04.000 --> 00:00:07.980 <v Audio Descriptions>A man sitting at a desk starts watching a video on his computer. 00:00:17.260 --> 00:00:20.780 <v Audio Descriptions>The video on his computer shows a person speaking to the camera. 00:00:20.780 --> 00:00:23.140 <v Audio Descriptions>It is playing with no audio. 00:00:26.880 --> 00:00:29.620 <v Audio Descriptions>The man watching the video has a hearing aid. </code></pre></div></div> </div></aside> <nav class="pager" aria-label="Previous/Next Page" style="clear: both;"> <ul><li class="pager--item previous"> <a href="/WAI/media/av/player/"> <svg focusable="false" aria-hidden="true" class="icon-arrow-left pager--item-icon"><use xlink:href="/WAI/assets/images/icons.svg#icon-arrow-left"></use></svg> <span class="pager--item-text"> <span class="pager--item-text-direction">Previous:</span> <span class="pager--item-text-target">Media Player</span> </span> </a> </li><li class="pager--item next"> <a href="/WAI/media/av/captions/"> <svg focusable="false" aria-hidden="true" class="icon-arrow-right pager--item-icon"><use xlink:href="/WAI/assets/images/icons.svg#icon-arrow-right"></use></svg> <span class="pager--item-text"> <span class="pager--item-text-direction">Next:</span> <span class="pager--item-text-target">Captions/Subtitles</span> </span> </a> </li> </ul></nav><aside class="box box-icon box-space-above" id="helpimprove" aria-label="feedback"><header class="box-h box-h-icon box-h-space-above box-h-icon"> <svg focusable="false" aria-hidden="true" class="icon-comments "><use xlink:href="/WAI/assets/images/icons.svg#icon-comments"></use></svg> <h2> Help improve this page </h2></header><div class="box-i"><p>Please share your ideas, suggestions, or comments via e-mail to the publicly-archived list <a href="mailto:wai@w3.org?body=%5Binclude%20a%20relevant%20email%20Subject%5D%0A%0A%5Bput%20comment%20here...%5D%0A%0AI%20give%20permission%20to%20share%20this%20to%20a%20publicly-archived%20e-mail%20list.">wai@w3.org</a> or via GitHub.</p> <div class="button-group"> <a href="mailto:wai@w3.org?body=%5Binclude%20a%20relevant%20email%20Subject%5D%0A%0A%5Bput%20comment%20here...%5D%0A%0AI%20give%20permission%20to%20share%20this%20to%20a%20publicly-archived%20e-mail%20list." class="button"><span>E-mail</span></a><a href=" https://github.com/w3c/wai-website/edit/main/pages/design-develop/media-guide/description.md " class="button"><span>Fork & Edit on GitHub</span></a><a href="https://github.com/w3c/wai-website/issues/new?template=content-issue.yml&wai-resource-id=wai-media-guide&wai-url=https://www.w3.org/WAI/media/av/description/" class="button"><span>New GitHub Issue</span></a></div></div></aside> <a class="button button-backtotop" href="#top"><span><svg focusable="false" aria-hidden="true" class="icon-arrow-up "><use xlink:href="/WAI/assets/images/icons.svg#icon-arrow-up"></use></svg> Back to Top</span></a> </main> </div> <footer id="wai-site-footer" class="page-footer default-grid" aria-label="Page"> <div class="inner"><p><strong>Updated:</strong> 17 September 2024. <a href="/WAI/media/av/changelog/">Latest changes</a>.<br /> First published September 2019.</p><p><strong>Editor:</strong> <a href=" https://www.w3.org/People/Shawn">Shawn Lawton Henry</a>. <a href="/WAI/media/av/acknowledgements/">Acknowledgements</a> lists contributors and credits.</p> <p>Developed by the Education and Outreach Working Group (<a href=" https://www.w3.org/WAI/EO/">EOWG</a>). Originally drafted as part of the <a href="https://www.w3.org/WAI/WCAGTA/">WCAG TA Project</a> funded by the <abbr title="United States">U.S.</abbr> Access Board. Revised as part of the <a href="https://www.w3.org/WAI/expand-access/">WAI Expanding Access project</a> funded by the Ford Foundation.</p> </div> </footer> <footer class="site-footer grid-4q" aria-label="Site"> <div class="q1-start q3-end about"> <div> <p><a class="largelink" href="https://www.w3.org/WAI/" lang="en" dir="auto" translate="no">W3C Web Accessibility Initiative (WAI)</a></p> <p>Strategies, standards, and supporting resources to make the Web accessible to people with disabilities.</p> </div> <div class="social" lang="en" dir="auto" translate="no"> <ul> <li><a href="https://w3c.social/@wai"><svg focusable="false" aria-hidden="true" class="icon-mastodon "><use xlink:href="/WAI/assets/images/icons.svg#icon-mastodon"></use></svg> Mastodon</a></li> <li><a href="https://www.linkedin.com/company/w3c-wai/"><svg focusable="false" aria-hidden="true" class="icon-linkedin "><use xlink:href="/WAI/assets/images/icons.svg#icon-linkedin"></use></svg> LinkedIn</a></li> <li><a href="https://www.w3.org/WAI/feed.xml"><svg focusable="false" aria-hidden="true" class="icon-rss "><use xlink:href="/WAI/assets/images/icons.svg#icon-rss"></use></svg> Feed</a></li> <li><a href="https://www.youtube.com/channel/UCU6ljj3m1fglIPjSjs2DpRA/playlists/"><svg focusable="false" aria-hidden="true" class="icon-youtube "><use xlink:href="/WAI/assets/images/icons.svg#icon-youtube"></use></svg> YouTube</a></li> <li><a href="https://www.w3.org/WAI/news/subscribe/" class="button">Get News in Email</a></li> </ul> </div> <div lang="en" dir="auto" translate="no"> <p>Copyright © 2024 World Wide Web Consortium (<a href="https://www.w3.org/">W3C</a><sup>®</sup>). See <a href="/WAI/about/using-wai-material/">Permission to Use WAI Material</a>.</p> </div> </div> <div lang="en" dir="auto" translate="no" class="q4-start q4-end"> <ul style="margin-bottom:0"> <li><a href="/WAI/about/contacting/">Contact WAI</a></li> <li><a href="/WAI/sitemap/">Site Map</a></li> <li><a href="/WAI/news/">News</a></li> <li><a href="/WAI/sitemap/#archive">Archive</a></li> <li><a href="/WAI/about/accessibility-statement/">Accessibility Statement</a></li> <li><a href="/WAI/translations/"> Translations</a></li> <li><a href="/WAI/roles/">Resources for Roles</a></li> </ul> </div> </footer> <script src="/WAI/assets/scripts/details4everybody.js?1732542395990846989"></script>  <script src="/WAI/assets/scripts/svg4everybody.js?1732542395990846989"></script> <script> svg4everybody(); </script><script> var translationStrings = {}; </script> </body> </html>