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?1732807903713432608"; document.body.appendChild(element); } window.addEventListener("load", downloadJSAtOnload, false); </script> <link rel="stylesheet" href="/WAI/assets/css/style.css?1732807903713432608"> <title> Audio Content and Video Content | Web Accessibility Initiative (WAI) | W3C</title> <meta name="generator" content="Jekyll v4.3.3" /> <meta property="og:title" content="Audio Content and Video Content" /> <meta name="author" content="W3C Web Accessibility Initiative (WAI)" /> <meta property="og:locale" content="en" /> <meta name="description" content="Describes accessibility considerations when planning, scripting, storyboarding, recording, and producing audio and video media." /> <meta property="og:description" content="Describes accessibility considerations when planning, scripting, storyboarding, recording, and producing audio and video media." /> <link rel="canonical" href="https://www.w3.org/WAI/media/av/av-content/" /> <meta property="og:url" content="https://www.w3.org/WAI/media/av/av-content/" /> <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="Audio Content and Video Content" /> <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":"Describes accessibility considerations when planning, scripting, storyboarding, recording, and producing audio and video media.","headline":"Audio Content and Video Content","image":"https://www.w3.org/WAI/content-images/media-guide/social.png","url":"https://www.w3.org/WAI/media/av/av-content/"}</script>  <link rel="alternate" type="application/rss+xml" href="/WAI/feed.xml"> </head> <body id="top" class="page-audio-content-and-video-content "> <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/av-content/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/av-content/" aria-current="page"><span>Audio Content & Video Content</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/" aria-current="page" class="page-link"><span>Audio Content & Video Content</span></a></li><li> <a lang="en" href="/WAI/media/av/description/" 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/av-content/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/av-content.svg" alt="" class="title-image right" style="height: 2em;"> Audio Content and Video Content </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>This page describes accessibility considerations when planning, scripting, storyboarding, recording, and producing audio and video.</p> <p>It covers <strong>common accessibility barriers</strong> including:</p> <ul> <li><a href="#plan-description">missing description of visual information</a> (such as text in the video) for people who cannot see the video</li> <li><a href="#sensory">requiring sight to understand the content</a> of the video</li> <li><a href="#readable">making text in the video hard for some people to see </a> because there is not enough contrast between the text and the background colors</li> </ul> </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></li> <li><a href="#audio" id="markdown-toc-audio">Audio</a> <ul> <li><a href="#create-high-quality-audio--recording-setup" id="markdown-toc-create-high-quality-audio--recording-setup">Create high-quality audio – <em>recording setup</em></a></li> <li><a href="#use-low-background-audio--recording-post-production-wcag-aaa" id="markdown-toc-use-low-background-audio--recording-post-production-wcag-aaa">Use low background audio – <em>recording, post-production</em> (WCAG AAA)</a></li> <li><a href="#speak-clearly-and-slowly--speakers" id="markdown-toc-speak-clearly-and-slowly--speakers">Speak clearly and slowly – <em>speakers</em></a></li> <li><a href="#give-people-time-to-process-information--speakers-post-production" id="markdown-toc-give-people-time-to-process-information--speakers-post-production">Give people time to process information – <em>speakers, post-production</em></a></li> <li><a href="#use-clear-language--script" id="markdown-toc-use-clear-language--script">Use clear language – <em>script</em></a></li> <li><a href="#sensory" id="markdown-toc-sensory">Provide redundancy for sensory characteristics – <em>script</em> (WCAG A)</a></li> </ul> </li> <li><a href="#video" id="markdown-toc-video">Video</a> <ul> <li><a href="#avoid-causing-seizures--storyboarding-post-production-wcag-a" id="markdown-toc-avoid-causing-seizures--storyboarding-post-production-wcag-a">Avoid causing seizures – <em>storyboarding, post-production</em> (WCAG A)</a></li> <li><a href="#consider-speaker-visibility--storyboarding-recording-post-production" id="markdown-toc-consider-speaker-visibility--storyboarding-recording-post-production">Consider speaker visibility – <em>storyboarding, recording, post-production</em></a></li> <li><a href="#readable" id="markdown-toc-readable">Make overlay text readable – <em>storyboarding, post-production</em> (WCAG AA, AAA)</a></li> <li><a href="#plan-for-sign-language--storyboarding-script-recording-wcag-aaa" id="markdown-toc-plan-for-sign-language--storyboarding-script-recording-wcag-aaa">Plan for sign language – <em>storyboarding, script, recording</em> (WCAG AAA)</a></li> <li><a href="#plan-description" id="markdown-toc-plan-description">Plan for description of visual information – <em>storyboarding, recording</em> (WCAG A, AA)</a></li> </ul> </li> </ul> </div> </nav> <h2 id="introduction">Introduction</h2> <p>This page addresses accessibility considerations when planning, scripting, storyboarding, recording, and producing audio and video.</p> <p>Some of the guidance below is related to requirements in Web Content Accessibility Guidelines (WCAG) and has links to a separate resource. <em>(The Planning page of this resource introduces the <a href="/WAI/media/av/planning/#wcag-standard">WCAG Standard</a>.)</em> Other guidance is good practice.</p> <p>Additional guidance is in the resource <a href="/WAI/teach-advocate/accessible-presentations/">Making Events Accessible - Checklist for meetings, conferences, training, and presentations that are remote/virtual, in-person, or hybrid</a>:</p> <ul> <li><a href="/WAI/teach-advocate/accessible-presentations/#preparing-slides-and-projected-material-speakers">Preparing Slides and Projected Material</a></li> <li><a href="/WAI/teach-advocate/accessible-presentations/#during-the-presentation-speakers">During the Presentation</a></li> </ul> <h2 id="audio">Audio</h2> <h3 id="create-high-quality-audio--recording-setup">Create high-quality audio – <em>recording setup</em></h3> <ul> <li>Use high-quality microphone(s) and recording software.</li> <li>When feasible, record in a room that is isolated from all external sounds.</li> <li>Avoid rooms with hard surfaces, such as tile or wood floors.</li> </ul> <h3 id="use-low-background-audio--recording-post-production-wcag-aaa">Use low background audio – <em>recording, post-production</em> (WCAG AAA)</h3> <p>When the main audio is a person speaking and you have background music, set the levels so people with hearing or cognitive disabilities can easily distinguish the speaking from the background.</p> <p>Specifically, make the background sounds at least 20 decibels lower than the foreground speech content (with the exception of occasional sounds that last for only one or two seconds).</p> <p>Avoid sounds that can be distracting or irritating, such as some high pitches and repeating patterns.</p> <p><span style="color:#585858; font-style:italic;">More information is in <a href="https://www.w3.org/WAI/WCAG22/Understanding/low-or-no-background-audio.html">Understanding Success Criterion 1.4.7: Low or No Background Audio (AAA)</a>.</span></p> <h3 id="speak-clearly-and-slowly--speakers">Speak clearly and slowly – <em>speakers</em></h3> <p>Speak clearly. This is important for people wanting to understand the content, and for captioners.</p> <p>Speak as slowly as appropriate. This will enable listeners to understand better, and make the timing better for captions and sign language.</p> <h3 id="give-people-time-to-process-information--speakers-post-production">Give people time to process information – <em>speakers, post-production</em></h3> <p>Pause between topics.</p> <h3 id="use-clear-language--script">Use clear language – <em>script</em></h3> <p>Avoid or explain jargon, acronyms, and idioms. For example, expressions such as “raising the bar” can be interpreted literally by some people with cognitive disabilities and can be confusing.</p> <h3 id="sensory">Provide redundancy for sensory characteristics – <em>script</em> (WCAG A)</h3> <p>Make your information work for people who cannot see and/or cannot hear.</p> <p>For example, instead of saying:</p> <blockquote>Attach this to the green end.</blockquote> <p>Say:</p> <blockquote>Attach the small ring to the green end, which is the larger end.</blockquote> <p><span style="color:#585858; font-style:italic;">More information that primarily addresses web pages, yet is relevant to audio and video, is in <a href="https://www.w3.org/WAI/WCAG22/Understanding/sensory-characteristics.html">Understanding Success Criterion 1.3.3: Sensory Characteristics (A)</a>.</span></p> <h2 id="video">Video</h2> <h3 id="avoid-causing-seizures--storyboarding-post-production-wcag-a">Avoid causing seizures – <em>storyboarding, post-production</em> (WCAG A)</h3> <p>Avoid anything that flashes more than three times in any one second period.</p> <p><span style="color:#585858; font-style:italic;">More information is in <a href="https://www.w3.org/WAI/WCAG22/Understanding/three-flashes.html">Understanding Success Criterion 2.3.2: Three Flashes (AAA)</a> and <a href="https://www.w3.org/WAI/WCAG22/Understanding/three-flashes-or-below-threshold.html">Understanding Success Criterion 2.3.1: Three Flashes or Below Threshold (A)</a></span></p> <h3 id="consider-speaker-visibility--storyboarding-recording-post-production">Consider speaker visibility – <em>storyboarding, recording, post-production</em></h3> <p>Some people use mouth movement to help understand spoken language. When feasible, ensure that the speaker’s face is visible and in good light.</p> <h3 id="readable">Make overlay text readable – <em>storyboarding, post-production</em> (WCAG AA, AAA)</h3> <p>For any text, consider the font family, size, and contrast between the text and background.</p> <p><span style="color:#585858; font-style:italic;">More information is in <a href="https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html">Understanding Success Criterion 1.4.3: Contrast (Minimum) (AA)</a> and <a href="https://www.w3.org/WAI/WCAG22/Understanding/contrast-enhanced">Understanding Success Criterion 1.4.6: Contrast (Enhanced) (AAA)</a>.</span></p> <h3 id="plan-for-sign-language--storyboarding-script-recording-wcag-aaa">Plan for sign language – <em>storyboarding, script, recording</em> (WCAG AAA)</h3> <p>Often sign languages are provided as an overlay in the bottom right corner of videos. For example: <a href="https://www.youtube.com/watch?v=TCq3ru9HQSc">NHS 111 British Sign Language (BSL) Advert (YouTube)<br /><img src="/WAI/content-images/media-guide/sign-example.jpg" alt="" class=" normal video" /></a></p> <p>Plan for the video not to include important information that would be obstructed by a sign language overlay.</p> <p>For other guidance including recording, see another page of this resource: <a href="/WAI/media/av/sign-languages/">Sign Languages</a></p> <h3 id="plan-description">Plan for description of visual information – <em>storyboarding, recording</em> (WCAG A, AA)</h3> <p><em>Description</em> provides content to people who are blind and others who cannot see the video adequately. It describes the visual information needed to understand the content, <strong>including text displayed in the video</strong>.</p> <p>Plan to either:</p> <ul> <li>Integrate description into the main audio content,<br /><em><strong>or</strong></em></li> <li>Record the audio and video with timing to accommodate separate description.</li> </ul> <h4 id="integrate-description">Integrate description</h4> <p>For some videos, such as presentations and instructional videos, the best way to handle description is not to need it at all — that is, all the visual information that users need to understand the content is integrated in the main audio. This is called “integrated description”. When planned in advance, this is fairly simple for many videos on the web. For example:</p> <table> <tr> <th scope="col">Instead of the speaker saying:</th> <th scope="col">The speaker can say:</th> </tr> <tr> <td>As you can see on this chart, sales increased significantly from the first quarter to the second quarter.</td> <td>This chart shows that sales increased significantly, from 1 million in the first quarter to 1.3 million in the second quarter.</td> </tr> <tr> <td>Whip the mixture until it looks like this.</td> <td>Whip the mixture until the oil, vinegar, and spices are well combined.</td> </tr> <tr> <td>Attach this to the green end.</td> <td>Attach the small ring to the green end, which is the larger end.</td> </tr> </table> <p>Here is an example <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> <p>If you want guidance on what to include in description, see the “Description of Visual Information” page, <a href="/WAI/media/av/description/#writing">Tips for Writing Description section</a>.</p> <h4 id="time-for-description">Time for description</h4> <p>For some types of videos, such as dramas, the description of the visual information cannot be smoothly handled by the speakers in the main video. For those videos, the description will be separate.</p> <p>Where the description is fairly short, plan space in the audio to add the description.</p> <p>Where the description is longer than you want to leave space in the main audio, you can record extra time in the scene to accommodate the description without having to pause the scene. That is, the same scene is shorter in the main video. In the described version, that same scene is a little longer at the beginning or the end of it. For example:</p> <table> <tr> <th scope="col">Narration</th> <th scope="col">Main Video Scene Duration</th> <th scope="col">Described Video Scene Duration</th> <th scope="col">Description</th> </tr> <tr> <td><q>Captions are also handy for people who want to watch video in loud environments.</q></td> <td>3 seconds</td> <td>7 seconds</td> <td>A man is watching the captioned video with a group of people chatting away next to him.</td> </tr> <tr> <td><q>Or where you need to be very, very quiet.</q></td> <td>2 seconds</td> <td>5 seconds</td> <td>Turns out that they are in a library. The group is shushed by the librarian.</td> </tr> </table> <p>An example of this is the <a href="/WAI/perspective-videos/captions/">Web Accessibility Perspectives: Video Captions</a> video. The main video is 48 seconds long. The described version is 1 minute and 18 seconds long, yet there are no pauses in the visual aspect of the video.</p> <h4 id="more-about-description">More about description</h4> <p>More information is in the next page of this resource: <a href="/WAI/media/av/description/">Description of Visual Information</a>.</p> <nav class="pager" aria-label="Previous/Next Page" style="clear: both;"> <ul><li class="pager--item previous"> <a href="/WAI/media/av/planning/"> <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">Planning</span> </span> </a> </li><li class="pager--item next"> <a href="/WAI/media/av/description/"> <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">Description</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/av-content.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/av-content/" 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?1732807903713432608"></script>  <script src="/WAI/assets/scripts/svg4everybody.js?1732807903713432608"></script> <script> svg4everybody(); </script><script> var translationStrings = {}; </script> </body> </html>