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?1732321439590790613"; document.body.appendChild(element); } window.addEventListener("load", downloadJSAtOnload, false); </script> <link rel="stylesheet" href="/WAI/assets/css/style.css?1732321439590790613"> <title> Captions/Subtitles | Web Accessibility Initiative (WAI) | W3C</title> <meta name="generator" content="Jekyll v4.3.3" /> <meta property="og:title" content="Captions/Subtitles" /> <meta name="author" content="W3C Web Accessibility Initiative (WAI)" /> <meta property="og:locale" content="en" /> <meta name="description" content="Helps you understand and create captions (also called “subtitles”) for audio and video media accessibility." /> <meta property="og:description" content="Helps you understand and create captions (also called “subtitles”) for audio and video media accessibility." /> <link rel="canonical" href="https://www.w3.org/WAI/media/av/captions/" /> <meta property="og:url" content="https://www.w3.org/WAI/media/av/captions/" /> <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="Captions/Subtitles" /> <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 captions (also called “subtitles”) for audio and video media accessibility.","headline":"Captions/Subtitles","image":"https://www.w3.org/WAI/content-images/media-guide/social.png","url":"https://www.w3.org/WAI/media/av/captions/"}</script>  <link rel="alternate" type="application/rss+xml" href="/WAI/feed.xml"> </head> <body id="top" class="page-captions-subtitles "> <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/captions/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/captions/" aria-current="page"><span>Captions/Subtitles</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/" class="page-link"><span>Description</span></a></li> <li> <a lang="en" href="/WAI/media/av/captions/" aria-current="page" 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/captions/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/cc.svg" alt="" class="title-image right" style="height: 2em;"> Captions/Subtitles </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>Captions (called “subtitles” in some areas) provide content to people who are Deaf and hard-of-hearing. Captions are a text version of the speech and non-speech audio information needed to understand the content. They are synchronized with the audio and usually shown in a media player when users turn them on.</p> <p>This page helps you understand and create captions and subtitles.</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="#captions-and-subtitles" id="markdown-toc-captions-and-subtitles">Captions and Subtitles</a></li> <li><a href="#live-captions" id="markdown-toc-live-captions">Live Captions</a></li> </ul> </li> <li><a href="#checklist" id="markdown-toc-checklist">Does My Media Need Captions?</a></li> <li><a href="#skills-and-tools" id="markdown-toc-skills-and-tools">Skills and Tools</a></li> <li><a href="#automatic-captions-are-not-sufficient" id="markdown-toc-automatic-captions-are-not-sufficient">Automatic Captions are Not Sufficient</a></li> <li><a href="#creating-captions" id="markdown-toc-creating-captions">Creating Captions</a> <ul> <li><a href="#caption-file-format" id="markdown-toc-caption-file-format">Caption File Format</a></li> <li><a href="#caption-tools" id="markdown-toc-caption-tools">Caption Tools</a></li> <li><a href="#transcribing-audio-to-text" id="markdown-toc-transcribing-audio-to-text">Transcribing Audio to Text</a></li> </ul> </li> <li><a href="#positioning-and-styling-captions" id="markdown-toc-positioning-and-styling-captions">Positioning and Styling Captions</a></li> </ul> </div> </nav> <h2 id="introduction">Introduction</h2> <p><em>Who:</em> Captions (also called “intralingual subtitles”) provide content to people who are Deaf and others who cannot hear the audio. They are also used by people who process written information better than audio.</p> <p><img src="/WAI/content-images/media-guide/captions.png" alt="" class=" normal right" /></p> <p><em>What:</em> Captions are a text version of the speech and non-speech audio information needed to understand the content. They are displayed within the media player and are synchronized with the audio.</p> <p>Most are “closed captions” that can be hidden or shown by people watching the video. They can be “open captions” that are always displayed and cannot be turned off.</p> <h3 id="captions-and-subtitles">Captions and Subtitles</h3> <p>The terms “captions” and “subtitles” are used for the same thing in different regions of the world. This resource uses:</p> <ul> <li><em>Captions</em> for the same language as the spoken audio.</li> <li><em>Subtitles</em> for spoken audio translated into another language.</li> </ul> <p>Some regions use <em>subtitles</em> for both the same language as the audio and for the translation. Sometimes they are distinguished as <em>intralingual subtitles</em> (same language) and <em>interlingual subtitles</em> (different language).</p> <p>Subtitles are implemented the same way as captions. Subtitles/interlingual subtitles are usually only the spoken audio (for people who can hear the audio but do not know the spoken language). They can be a translation of the caption content, including non-speech audio information.</p> <p>Captions are needed for accessibility, whereas subtitles in other languages are not directly an accessibility accommodation.</p> <h3 id="live-captions">Live Captions</h3> <p>Live captions are usually done by professional real-time captioners or Communication Access Realtime Translation (CART) providers. Live captions can be done in-person or remotely. That is, the person doing the captioning/CART does not have to be at the same location as the live action; they can be doing the live captions by listening to the audio over a phone or Internet connection.</p> <p>If you have live captions and you post a recording, you will probably need to do minor editing for accuracy.</p> <p>This rest of this page addresses developing captions for pre-recorded media.</p> <h3 class="no_toc" id="interactive-transcripts-from-captions">Interactive Transcripts from Captions</h3> <p>Caption files are used by some media players to provide <em>interactive transcripts</em>. Interactive transcripts highlight text phrases as they are spoken. Users can select text in the transcript and go to that point in the video. Some players provide interactive transcript functionality.</p> <p><img src="/WAI/content-images/media-guide/interactive-transcript.png" alt="" /></p> <h3 class="no_toc" id="notes">Notes</h3> <p>For optimum accessibility, provide a separate caption file of the description of visual information (called audio description, video description, or described video).</p> <p><strong>Captions and transcripts include the same text, so one can be used to develop the other.</strong></p> <h2 id="checklist">Does My Media Need Captions?</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: <ul class="alt"> <li>Captions are useful for people who are hard of hearing to get the richness of listening to the audio and fill in what they don’t hear well by reading the captions.<br />Captions are not required to meet WCAG. (Transcripts are at Level A.)</li> </ul> </li> <li>For live: <ul class="alt"> <li>Captions are useful for people who are hard of hearing to get the richness of listening to the audio and fill in what they don’t hear well by reading the captions.<br />Live text stream or accurate script of the audio available when live is in WCAG at Level AAA.</li> </ul> </li> </ul> </div></aside> <aside class="box box-highlighted" id="checklist-vo"><header class="box-h box-h-highlighted"> Video-only (no audio content): </header><div class="box-i"> <ul> <li>For pre-recorded and live: <ul> <li>Captions are not needed because there is no audio information.</li> </ul> </li> </ul> </div></aside> <aside class="box box-highlighted" id="checklist-va"><header class="box-h box-h-highlighted"> Video with audio content: </header><div class="box-i"> <p>Does the video have audio information that is needed to understand what the video is communicating?</p> <ul> <li>If no (for example, it is just background music): <ul> <li>Captions are not needed because there is no important audio content. Consider <a href="/WAI/media/av/planning/#none">informing users</a>.</li> </ul> </li> <li>If yes: <ul> <li>For pre-recorded: <ul class="alt"> <li>Captions are needed to provide the audio content to people who are Deaf or hard of hearing.<br /> Captions are <em><strong>required</strong></em> in WCAG at Level A.</li> </ul> </li> <li>For live: <ul class="alt"> <li>Captions are needed to provide the audio content to people who are Deaf or hard of hearing.<br /> Captions are <em><strong>required</strong></em> in WCAG at Level AA.</li> </ul> </li> </ul> </li> </ul> </div></aside> <p><br /></p> <p><strong>WCAG excerpts</strong> with links to more information in “Understanding WCAG”:</p> <ul> <li><a href="https://www.w3.org/WAI/WCAG22/Understanding/captions-prerecorded.html">A 1.2.2 Captions</a> (Prerecorded): Captions are provided for all prerecorded audio content in synchronized media…</li> <li><a href="https://www.w3.org/WAI/WCAG22/Understanding/captions-live.html">AA 1.2.4 Captions</a> (Live): Captions are provided for all live audio content in synchronized media.</li> </ul> <h2 id="skills-and-tools">Skills and Tools</h2> <p>Creating captions requires typing up the audio (“transcribing”) and formatting it in a file with timestamps. Transcribing an audio file is fairly difficult and takes quite a bit of time for people who don’t have the software and skill for it. The file format for captions are simple, yet it’s tedious to add timestamps, especially without software or service for developing caption files.</p> <p>Creating high-quality captions requires knowledge of which non-speech audio information should be included in the captions. It’s more art than science — for example, it’s not always clear which non-speech audio information to include and how to communicate it in text.</p> <p>Even correcting an automatic caption files takes quite a bit of time for people who don’t do it regularly.</p> <p>However, people who have the software, skills, and experience in developing captions, can develop them much faster.</p> <p>For these reasons, many organizations choose to outsource their captions.</p> <h2 id="automatic-captions-are-not-sufficient">Automatic Captions are Not Sufficient</h2> <p>Automatically-generated captions do not meet user needs or accessibility requirements, unless they are confirmed to be fully accurate. Usually they need significant editing.</p> <p>There are tools that use speech recognition technology to turn a soundtrack into a timed caption file. For example, some common video websites provide automatic captions. However, often the automatic caption text is wrong and does not match the spoken audio — sometimes in ways that change the meaning (or are embarrassing). For example, missing just one word such as “not” can make the captions contradict the actual audio content.</p> <aside class="box box-simple box-aside"><header class="box-h box-h-simple box-h-aside"> Example of bad automatic captions (that cause a fire)</header><div class="box-i"> <p><img src="/WAI/content-images/media-guide/food-fire.jpg" alt="food on fire under broiler" class=" normal right" /> <em>Spoken audio:</em><br />"Broil on high for <strong>4 to 5 minutes</strong>. You should <strong>not</strong> preheat the oven."<br /> <em>Automatic caption:</em><br />"Broil on high for <strong>45 minutes</strong>. You should <strong>know to</strong> preheat the oven."</p> </div></aside> <p>Automatic captions can be used as a starting point for developing accurate captions and transcripts.</p> <h2 id="creating-captions">Creating Captions</h2> <h3 id="caption-file-format">Caption File Format</h3> <p>The most common format for captions on the web is <a href="https://www.w3.org/TR/webvtt/">WebVTT</a>: The Web Video Text Tracks Format.</p> <aside class="box"><header class="box-h "> Example VTT file with speakers identified</header><div class="box-i"> <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>WEBVTT 00:11.000 --> 00:13.000 <v Rajwinder Kaur>Welcome to the podcast. 00:13.000 --> 00:17.000 <v Shawn Henry>Thank you for this opportunity to share information about accessibility. 00:17.000 --> 00:20.000 <v Rajwinder>Would you start by telling us a little about your role at W3C? 00:20.000 --> 00:24.000 <v Shawn>I work within the Web Accessibility Initiative, W-A-I, pronounced "way". </code></pre></div></div> </div></aside> <p>Other caption formats are: SRT and Timed Text Markup Language (<a href="https://www.w3.org/TR/ttml2/">TTML</a>).</p> <h3 id="caption-tools">Caption Tools</h3> <p>Most people use software or services to help develop captions. There are several free captioning software programs and online services available.</p> <p>Several free and fee-based tools create automatic captions that you can use as a starting point. For example, a common video website includes automatic captions and tools for you to edit the captions. <strong>You will need to edit automatic captions for accuracy.</strong></p> <p>If you already have transcription of the audio into text, there are free tools that will generate a captions file with timestamps. You will need to edit it for line breaks as described in another page of this resource, Transcribing Audio to Text: <a href="/WAI/media/av/transcribing/#more-on-captions">More on Captions</a>.</p> <p>Most caption-editing tools can export a plain text transcript.</p> <p><img src="/WAI/content-images/media-guide/caption-editing.png" alt="" style="width: 50%; max-width: 500px" /><br /><em>The screen capture shows one tool for editing captions, in the area underneath the video.</em></p> <h3 id="transcribing-audio-to-text">Transcribing Audio to Text</h3> <p>For specific guidance on what to type up, see another page in this resource: <a href="/WAI/media/av/transcribing/">Transcribing Audio to Text</a>.</p> <h2 id="positioning-and-styling-captions">Positioning and Styling Captions</h2> <p>There are options for authors to position and style captions. Support in browsers and other media players is inconsistent and sometimes unreliable. Most web videos just use the player’s default presentation style, which is usually white characters in a black box.</p> <p>Some media players enable users to set preferences for how and where captions are displayed, including text style, text size, colors, and position of the captions.</p> <nav class="pager" aria-label="Previous/Next Page" style="clear: both;"> <ul><li class="pager--item previous"> <a href="/WAI/media/av/description/"> <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">Description</span> </span> </a> </li><li class="pager--item next"> <a href="/WAI/media/av/transcripts/"> <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">Transcripts</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/captions.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/captions/" 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?1732321439590790613"></script>  <script src="/WAI/assets/scripts/svg4everybody.js?1732321439590790613"></script> <script> svg4everybody(); </script><script> var translationStrings = {}; </script> </body> </html>