{"id":74,"date":"2025-10-02T21:34:08","date_gmt":"2025-10-02T21:34:08","guid":{"rendered":"https:\/\/pressbooks.hcfl.edu\/hccdigitalaccessibility\/?post_type=chapter&#038;p=74"},"modified":"2026-04-22T17:27:30","modified_gmt":"2026-04-22T17:27:30","slug":"multimedia-accessibility-essentials","status":"publish","type":"chapter","link":"https:\/\/pressbooks.hcfl.edu\/digitalaccessibility\/chapter\/multimedia-accessibility-essentials\/","title":{"raw":"Making Multimedia Accessible","rendered":"Making Multimedia Accessible"},"content":{"raw":"<h2>Making Multimedia Accessible<\/h2>\r\nAccessible multimedia helps ensure that all students can engage with course materials, including video, audio, images, and interactive activities. When multimedia is designed with accessibility in mind, more learners can perceive, operate, and understand course content. This chapter introduces practical strategies for creating accessible multimedia for college courses.\r\n\r\nThis chapter explains how to make video, audio, images, and interactive materials more accessible for college learners. It introduces core practices such as captioning, transcripts, audio descriptions, alternative text, keyboard access, and accessibility testing before publication.\r\n\r\n[embed]https:\/\/www.youtube.com\/embed\/iWO5N3n1DXU[\/embed]\r\n\r\n[h5p id=\"11\"]\r\n<div class=\"textbox textbox--learning-objectives\"><header class=\"textbox__header\">\r\n<h3 class=\"textbox__title\">Learning Objectives<\/h3>\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n<ul>\r\n \t<li>Identify the main accessibility requirements for video, audio, images, and interactive multimedia.<\/li>\r\n \t<li>Explain when captions, transcripts, and audio descriptions are needed.<\/li>\r\n \t<li>Write appropriate alternative text for meaningful images and use empty alternative text for decorative images.<\/li>\r\n \t<li>Evaluate H5P and other interactive media for keyboard and screen reader accessibility.<\/li>\r\n \t<li>Apply accessibility review practices before publishing multimedia in a course.<\/li>\r\n \t<li>Explain the purpose of Able Player in accessible media design.<\/li>\r\n \t<li>Embed a captioned video using Able Player in Pressbooks.<\/li>\r\n \t<li>Apply CSS fixes to resolve accessibility contrast issues.<\/li>\r\n \t<li>Understand how Canvas Studio can support more accessible video use in Canvas LMS.<\/li>\r\n<\/ul>\r\n<\/div>\r\n<\/div>\r\n<div class=\"textbox textbox--key-terms\"><header class=\"textbox__header\">\r\n<h3 class=\"textbox__title\">Key Terms<\/h3>\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n<dl>\r\n \t<dt>Alternative Text<\/dt>\r\n \t<dd>A short text description that communicates the purpose or meaning of an image for people who cannot see it.<\/dd>\r\n \t<dt>Audio Description<\/dt>\r\n \t<dd>Additional narration that explains important visual information in a video when that information is not otherwise available through dialogue or sound.<\/dd>\r\n \t<dt>Captions<\/dt>\r\n \t<dd>Text synchronized with video that represents spoken dialogue and relevant audio information.<\/dd>\r\n \t<dt>Decorative Image<\/dt>\r\n \t<dd>An image that does not add instructional meaning and should use empty alternative text.<\/dd>\r\n \t<dt>Transcript<\/dt>\r\n \t<dd>A text version of spoken content and relevant audio details from a video or audio recording.<\/dd>\r\n \t<dt>Rolling Transcript<\/dt>\r\n \t<dd>A time-synced text version of spoken audio or video that automatically scrolls and highlights words as they are spoken. Unlike a static transcript, it updates in real time during playback, allowing users to read along as they listen.<\/dd>\r\n<\/dl>\r\n<\/div>\r\n<\/div>\r\n<h3>Why Accessible Multimedia Matters<\/h3>\r\nMultimedia can improve engagement and explain complex ideas, but it can also create barriers when access needs are overlooked. Students may need captions to follow spoken information, transcripts to review content, audio descriptions to understand key visuals, or keyboard access to complete an activity.\r\n\r\nDesigning for accessibility from the start supports a wider range of learners and reduces the need for last-minute remediation.\r\n<h3>Video Accessibility Requirements (WCAG 2.1 Level AA)<\/h3>\r\nTo ensure videos are accessible and meet <strong>WCAG 2.1 Level AA<\/strong>, several essential requirements must be met. These requirements support users who are deaf or hard of hearing, blind or low vision, or who rely on keyboard navigation.\r\n\r\n<hr \/>\r\n\r\n<h4>1. Core Requirements (Non-Negotiables)<\/h4>\r\nFor a video to meet Level AA, the following three elements are required:\r\n<ul>\r\n \t<li><strong>Captions (Success Criterion 1.2.2)<\/strong>\r\n<ul>\r\n \t<li>Accurate<\/li>\r\n \t<li>Synchronized with the audio<\/li>\r\n \t<li>Inclusive of speaker identification and meaningful sound effects<\/li>\r\n<\/ul>\r\n<\/li>\r\n \t<li><strong>Audio Description (Success Criterion 1.2.5)<\/strong>\r\nAudio description is required for prerecorded video content. This provides narration of essential visual information (e.g., on-screen text, actions, gestures, or scene changes) for users who are blind or have low vision.<\/li>\r\n \t<li><strong>Keyboard Accessibility (No Keyboard Traps)<\/strong>\r\n<ul>\r\n \t<li>Play, pause, and control the video<\/li>\r\n \t<li>Navigate the video player using only a keyboard, without becoming \u201ctrapped\u201d in the interface<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n\r\n<hr \/>\r\n\r\n<h4>2. Visual and Interaction Standards<\/h4>\r\nAccessibility also applies to how video content is presented and controlled:\r\n<table>\r\n<thead>\r\n<tr>\r\n<th>Feature<\/th>\r\n<th>Requirement<\/th>\r\n<\/tr>\r\n<\/thead>\r\n<tbody>\r\n<tr>\r\n<td><strong>Color Contrast<\/strong><\/td>\r\n<td>Text displayed in the video (excluding logos) must have a contrast ratio of at least <strong>4.5:1<\/strong>.<\/td>\r\n<\/tr>\r\n<tr>\r\n<td><strong>Flashing Content<\/strong><\/td>\r\n<td>Content must not flash more than three times per second to reduce the risk of seizures.<\/td>\r\n<\/tr>\r\n<tr>\r\n<td><strong>Playback Control<\/strong><\/td>\r\n<td>If a video plays automatically and lasts longer than 5 seconds, users must be able to pause, stop, or control playback.<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n\r\n<hr \/>\r\n\r\n<h4>3. Common Issues and Compliance Risks<\/h4>\r\nIn practice, some issues are more critical than others. While the goal is full compliance, the following distinctions are helpful:\r\n<ul>\r\n \t<li><strong>Minor Caption Errors<\/strong>\r\nSmall typos may be considered minor issues. However, errors that change meaning (e.g., \u201cnow\u201d vs. \u201cnot\u201d) can result in a failure.<\/li>\r\n \t<li><strong>Missing Audio Description<\/strong>\r\nThis is a <strong>significant compliance failure<\/strong>. If essential visual information is not available to users who cannot see the video, the content does not meet Level AA.<\/li>\r\n \t<li><strong>Inaccessible Video Player<\/strong>\r\nEven if the video itself is accessible, an inaccessible player (e.g., unusable with a keyboard or screen reader) makes the entire experience inaccessible.<\/li>\r\n<\/ul>\r\n\r\n<hr \/>\r\n\r\n<h4>4. A Practical Perspective on Accessibility<\/h4>\r\nWCAG guidelines aim to ensure <strong>equitable access<\/strong>, not just technical compliance. The key question to consider is:\r\n<blockquote>Does this video allow all users to access and understand the content equally?<\/blockquote>\r\nBarriers that prevent comprehension or interaction represent the highest accessibility risks.\r\n\r\n<hr \/>\r\n\r\n<h4>5. Practical Tip: Integrated Description<\/h4>\r\nOne effective strategy for reducing the need for separate audio description tracks is <strong>integrated description<\/strong>. This approach involves speakers naturally describing important visual elements as part of the narration.\r\n\r\nFor example:\r\n<ul>\r\n \t<li>Instead of showing a chart silently, the speaker explains the key trends aloud.<\/li>\r\n<\/ul>\r\n<div class=\"textbox textbox--summary\"><header class=\"textbox__header\">\r\n<p class=\"textbox__title\">Video Accessibility Summary<\/p>\r\n\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n\r\nTo meet <strong>WCAG 2.1 Level AA<\/strong>, videos must include accurate captions, audio description of important visual content, and full keyboard accessibility. Additional requirements\u2014such as sufficient color contrast, avoiding flashing content, and providing playback controls\u2014ensure usability for a wide range of users. While minor errors may occur, missing audio description or an inaccessible video player represents a significant compliance failure. Ultimately, the goal is to provide <strong>equal access<\/strong> so that all users can perceive, understand, and interact with video content effectively.\r\n\r\n<\/div>\r\n<\/div>\r\n<h3>Applying Video Accessibility in Course Design<\/h3>\r\nAccessible video supports learners who are deaf or hard of hearing, blind or have low vision, use screen readers, study in distracting environments, or benefit from multiple ways to access information.\r\n<h4>Captions<\/h4>\r\nAll instructional videos should include synchronized captions that are accurate, properly timed, and clear. Captions should reflect meaningful spoken content and identify speakers when needed.\r\n\r\nAutomatic captions may be used as a starting point, but they should be reviewed and corrected before publication.\r\n<h4>Transcripts<\/h4>\r\nProvide a complete text transcript for video and audio materials. A transcript helps students review material, search for key ideas, and access content when video playback is not practical.\r\n<ul>\r\n \t<li>Include speaker identification when relevant<\/li>\r\n \t<li>Correct punctuation and grammar<\/li>\r\n \t<li>Ensure readability for screen reader users<\/li>\r\n \t<li>Match the spoken content accurately<\/li>\r\n<\/ul>\r\n<h4>Audio Descriptions<\/h4>\r\nIf important visual information is not explained through narration, provide audio descriptions or revise the narration so visual content is also communicated in words.\r\n<h3>Using Able Player for Accessible Video in Pressbooks and Canvas<\/h3>\r\n<a href=\"https:\/\/wordpress.org\/plugins\/ableplayer\/\">Able Player<\/a> is an accessible media player designed to support captions, transcripts, keyboard navigation, and screen reader compatibility.\r\n\r\nThis tool allows you to add accurate, synchronized captions to YouTube videos that you do not own. It is widely used in Pressbooks and can also support more inclusive media workflows when video content is shared in learning environments.\r\n\r\nYou can process video captions using ChatGPT to generate properly formatted VTT files, which can then be hosted on GitHub. From there, ChatGPT can also assist in creating the necessary embed code (shortcode) to integrate the captioned video into HTML.\r\n<h4>Why Use Able Player?<\/h4>\r\n<ul>\r\n \t<li>Provides synchronized captions and interactive transcripts<\/li>\r\n \t<li>Supports full keyboard navigation<\/li>\r\n \t<li>Works with screen readers and assistive technologies<\/li>\r\n \t<li>Allows users to control playback speed and display preferences<\/li>\r\n \t<li>Improves compliance with WCAG 2.1 Level AA accessibility standards<\/li>\r\n<\/ul>\r\n<h4>Using Able Player in Pressbooks<\/h4>\r\nIn Pressbooks, Able Player can be embedded using a shortcode. This allows you to include captions and a transcript for your video. The example video in our chapter <a href=\"https:\/\/pressbooks.hcfl.edu\/digitalaccessibility\/chapter\/open-educational-resources-ai-digital-accessibility\/\">Open Educational Resources, AI, &amp; Digital Accessibility<\/a> demonstrates Able Player effectively. In that video, the word <em>Go<\/em> appeared incorrectly in the original captions at 5:37, so the VTT file was edited to remove the error.\r\n<figure><img class=\"wp-image-960\" src=\"http:\/\/pressbooks.hcfl.edu\/digitalaccessibility\/wp-content\/uploads\/sites\/61\/2025\/10\/Untitled-1024x544.png\" alt=\"Video capture with the captions on and the word Go emphasized with a box drawn around it.\" width=\"723\" height=\"384\" \/><figcaption>Screenshot from author.<\/figcaption><\/figure>\r\n<h5>Step-by-Step: Embedding an Accessible Video<\/h5>\r\n<ol>\r\n \t<li>Locate a YouTube video appropriate for your content.<\/li>\r\n \t<li>Ensure captions are available or create a caption file in VTT format.<\/li>\r\n \t<li>Insert the Able Player shortcode into your chapter.<\/li>\r\n \t<li>Link the caption file and transcript container.<\/li>\r\n \t<li>Provide a cleaned and readable transcript below the player.<\/li>\r\n<\/ol>\r\n<h4>Fixing Able Player Contrast Issues in Pressbooks<\/h4>\r\nSome Pressbooks themes may display Able Player controls with insufficient color contrast. Accessibility checkers may flag these issues even when your content is correct. You can resolve this by applying a global CSS fix.\r\n<h5>Where to Add the CSS<\/h5>\r\n<ol>\r\n \t<li>Go to <strong>Appearance \u2192 Custom Styles<\/strong>.<\/li>\r\n \t<li>Scroll to <strong>Your Web Styles<\/strong>.<\/li>\r\n \t<li>Paste the CSS below.<\/li>\r\n \t<li>Save your changes.<\/li>\r\n<\/ol>\r\n<pre>.able .able-controller,\r\n.able .able-status-bar {\r\n  background-color: #222222 !important;\r\n}\r\n\r\n.able .able-controller button,\r\n.able .able-controller [role=\"button\"],\r\n.able .able-controller svg,\r\n.able .able-controller svg path {\r\n  color: #ffffff !important;\r\n  fill: #ffffff !important;\r\n}\r\n\r\n.able .able-status,\r\n.able .able-timer,\r\n.able .able-speed,\r\n.able .able-elapsedTime,\r\n.able .able-duration {\r\n  color: #d0d0d0 !important;\r\n}\r\n\r\n.able .able-controller button:hover,\r\n.able .able-controller button:focus {\r\n  background-color: #444444 !important;\r\n  outline: 2px solid #ffffff;\r\n  outline-offset: 2px;\r\n}<\/pre>\r\n<div class=\"textbox textbox--accessibility\"><header class=\"textbox__header\">\r\n<h3 class=\"textbox__title\">Accessibility Check<\/h3>\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n\r\nAccessibility tools may flag contrast issues in embedded media players. In Pressbooks, these can often be resolved using global CSS. Always ensure captions and transcripts are accurate, even when interface elements are controlled by plugins.\r\n\r\n<\/div>\r\n<\/div>\r\n<h4>Using Able Player in Canvas LMS<\/h4>\r\nCanvas does not include Able Player by default, but you can sometimes embed it using HTML if your institution supports external scripts or related tools.\r\n<h5>Options for Canvas Integration<\/h5>\r\n<ul>\r\n \t<li>Embed Able Player using HTML in the Rich Content Editor, if allowed.<\/li>\r\n \t<li>Host Able Player files on a web server and reference them.<\/li>\r\n \t<li>Use third-party tools that support accessible video playback.<\/li>\r\n<\/ul>\r\n<h5>Alternative for Canvas<\/h5>\r\n<ul>\r\n \t<li>Use Canvas Studio with corrected captions.<\/li>\r\n \t<li>Enable Interactive Rolling Transcript for videos when available.<\/li>\r\n \t<li>Provide a downloadable transcript when rolling transcripts are not available.<\/li>\r\n \t<li>Embed YouTube videos with manually edited captions when possible.<\/li>\r\n<\/ul>\r\n<h4>Adding Transcripts to YouTube Videos in Canvas Studio<\/h4>\r\nCanvas Studio provides another practical option for improving access to video content. In Canvas Studio, you can upload caption files in SRT or VTT format to media, including some videos you do not own. This makes Canvas Studio useful when you want to improve a YouTube video\u2019s accessibility in your course without rehosting the media yourself.\r\n\r\nFor training documentation, see <a href=\"https:\/\/community.instructure.com\/en\/kb\/articles\/660520-how-do-i-create-captions-for-media-in-canvas-studio\">How do I create captions for media in Canvas Studio?<\/a>\r\n<h5>When to Use This Option<\/h5>\r\n<ul>\r\n \t<li>You are embedding or sharing a YouTube video through Canvas Studio.<\/li>\r\n \t<li>The existing automatic captions are inaccurate or incomplete.<\/li>\r\n \t<li>You have created or cleaned a caption file in SRT or VTT format.<\/li>\r\n \t<li>You want students to access more accurate text support while viewing the video in Canvas.<\/li>\r\n<\/ul>\r\n<h5>Step-by-Step: Uploading a Transcript or Caption File in Canvas Studio<\/h5>\r\n<ol>\r\n \t<li>Open <strong>Canvas Studio<\/strong> from your Canvas course or global navigation.<\/li>\r\n \t<li>Select the video you want to update.<\/li>\r\n \t<li>Open the media details or caption settings for that video.<\/li>\r\n \t<li>Choose the option to <strong>upload captions<\/strong>.<\/li>\r\n \t<li>Select your prepared <strong>SRT<\/strong> or <strong>VTT<\/strong> file from your computer.<\/li>\r\n \t<li>Upload the file and confirm that the correct language is selected.<\/li>\r\n \t<li>Preview the video to verify timing, punctuation, line breaks, and speaker clarity.<\/li>\r\n \t<li>Revise the file and re-upload it if needed.<\/li>\r\n<\/ol>\r\n<h4>Interactive Rolling Transcript in Canvas Studio<\/h4>\r\nCanvas Studio allows instructors to provide an interactive rolling transcript for their videos. The transcript dynamically syncs with the media, highlighting spoken text in real time as the video or audio plays. This allows students to follow along visually and auditorily at the same time, improving comprehension, focus, and retention\u2014especially for learners who are deaf or hard of hearing. This feature is only functional when captions are available in Canvas Studio. It can also work for third-party YouTube videos if a caption file has been uploaded.\r\n<figure class=\"wp-block-image alignnone size-full\"><img class=\"wp-image-1344 size-full\" src=\"http:\/\/pressbooks.hcfl.edu\/digitalaccessibility\/wp-content\/uploads\/sites\/61\/2025\/10\/Screenshot-2026-04-21-100045.png\" alt=\"Canvas Studio interface showing a video player on the left with captions and a synchronized transcript panel with timestamps and highlighted text on the right.\" width=\"781\" height=\"384\" \/><figcaption>Screenshot of the Canvas Studio interface, showing a video player with captions on the left and a rolling transcript with timestamps and the words \u201ca little bit of time today to look at some...\u201d highlighted on the right.\r\n<div class=\"video-container\" style=\"text-align: left; margin: 0; padding: 0;\"><iframe style=\"display: block; margin: 0; padding: 0;\" src=\"https:\/\/productmarketing.instructuremedia.com\/embed\/32388c5a-580c-40f0-85a2-6b4042ddcccb\" width=\"640\" height=\"360\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\">\r\n<\/iframe><\/div>\r\n<div><\/div>\r\n<div class=\"h5p-container\">[h5p id=\"41\"]<\/div>\r\nFor training documentation, see <a href=\"https:\/\/community.instructure.com\/en\/kb\/articles\/662932-how-do-i-manage-video-options-in-the-rich-content-editor?utm_source=community-search&amp;utm_medium=organic-search&amp;utm_term=How+do+I+manage+video+options+in+the+Rich+Content+Editor%3F\">How to manage video options in the Rich Content Editor<\/a>.\r\n<div class=\"textbox textbox--accessibility\"><header class=\"textbox__header\">\r\n<h3 class=\"textbox__title\">Accessibility Check<\/h3>\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n\r\nUploading a caption file is an important step, but it does not replace quality review. Check that captions are synchronized, correctly punctuated, and clear to read. When possible, also provide a clean transcript below the video so learners can review the content in a text-based format.\r\n\r\n<\/div>\r\n<\/div>\r\n<h4>Best Practices for Transcript and Caption Quality<\/h4>\r\n<ul>\r\n \t<li>Correct spelling, punctuation, and capitalization before uploading.<\/li>\r\n \t<li>Identify speakers when more than one person is talking.<\/li>\r\n \t<li>Include meaningful non-speech audio when it supports understanding.<\/li>\r\n \t<li>Break long lines into readable caption segments.<\/li>\r\n \t<li>Review the finished captions in Canvas Studio rather than assuming the file imported perfectly.<\/li>\r\n<\/ul>\r\n<h5>Why This Matters<\/h5>\r\nStudents use transcripts and captions in different ways. Some rely on them for full access, while others use them to review, study, search for terms, or follow along in noisy or quiet environments. Adding accurate caption files in Canvas Studio helps make video-based instruction more inclusive and easier to use.\r\n<div class=\"textbox textbox--instructor-tip\"><header class=\"textbox__header\">\r\n<h3 class=\"textbox__title\">Instructor Tip<\/h3>\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n\r\nIf you start with an automatically generated transcript, treat it as a draft. Clean the text first, save it as an SRT or VTT file, upload it to Canvas Studio, and then watch the video once more to verify that the captions display correctly.\r\n\r\n<\/div>\r\n<\/div>\r\n<h3>Accessible Images<\/h3>\r\n<figure><img src=\"https:\/\/commons.wikimedia.org\/wiki\/Special:FilePath\/Closed%20captioning%20symbol.svg\" alt=\"Closed captioning symbol showing two large letter C shapes inside a screen outline, used to indicate that captions are available for video content.\" \/><\/figure>\r\nClosed captioning icon used to indicate that captions are available for video content. <em><a href=\"https:\/\/commons.wikimedia.org\/wiki\/File:Closed_captioning_symbol.svg\">Closed captioning symbol<\/a><\/em>, via <a href=\"https:\/\/commons.wikimedia.org\/\">Wikimedia Commons<\/a>, Public Domain.\r\n<ul>\r\n \t<li>Write descriptive alternative text for meaningful images.<\/li>\r\n \t<li>Use empty alternative text (<code>alt=\"\"<\/code>) for decorative images.<\/li>\r\n \t<li>Provide nearby explanation for charts or diagrams.<\/li>\r\n \t<li>Avoid images of text when readable text can be used.<\/li>\r\n<\/ul>\r\n<h3>H5P Interactive Content<\/h3>\r\n<ul>\r\n \t<li>Use descriptive labels for buttons and controls.<\/li>\r\n \t<li>Ensure activities can be completed using only a keyboard.<\/li>\r\n \t<li>Provide alternative text for images used in H5P.<\/li>\r\n \t<li>Avoid interactions that rely only on color or dragging.<\/li>\r\n \t<li>Test activities with keyboard navigation and screen readers.<\/li>\r\n<\/ul>\r\n<h3>Audio Content Guidelines<\/h3>\r\n<ol>\r\n \t<li>Provide a complete transcript.<\/li>\r\n \t<li>Ensure audio clarity with minimal background noise.<\/li>\r\n \t<li>Identify speakers when multiple people are speaking.<\/li>\r\n \t<li>Use descriptive file names and metadata.<\/li>\r\n \t<li>Organize audio content logically.<\/li>\r\n<\/ol>\r\n<div class=\"textbox textbox--exercises\"><header class=\"textbox__header\">\r\n<h3 class=\"textbox__title\">Accessibility Check Before Publishing<\/h3>\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n<ul>\r\n \t<li>Confirm heading levels are logical.<\/li>\r\n \t<li>Ensure links use descriptive text.<\/li>\r\n \t<li>Review captions for accuracy.<\/li>\r\n \t<li>Confirm transcripts are complete.<\/li>\r\n \t<li>Test interactive content with a keyboard.<\/li>\r\n \t<li>Verify that images have appropriate alt text.<\/li>\r\n<\/ul>\r\n<\/div>\r\n<\/div>\r\n<div class=\"textbox textbox--summary\"><header class=\"textbox__header\">\r\n<h3 class=\"textbox__title\">Chapter Summary<\/h3>\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n\r\nAccessible multimedia is essential for inclusive course design. Videos should include captions and transcripts, important visuals should be described, images need meaningful alternative text, and interactive content should support keyboard access and assistive technologies.\r\n\r\n<\/div>\r\n<\/div>\r\n<div class=\"textbox textbox--key-takeaways\"><header class=\"textbox__header\">\r\n<h3 class=\"textbox__title\">Key Takeaways<\/h3>\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n<ul>\r\n \t<li>Able Player enhances accessibility by supporting captions, transcripts, and keyboard navigation.<\/li>\r\n \t<li>Canvas Studio can improve access to shared video by allowing caption file uploads.<\/li>\r\n \t<li>Alternative text should communicate the instructional purpose of images.<\/li>\r\n \t<li>Interactive multimedia must support keyboard navigation.<\/li>\r\n \t<li>Accessibility checks should occur before multimedia is published.<\/li>\r\n<\/ul>\r\n<\/div>\r\n<\/div>\r\n<div class=\"textbox textbox--exercises\"><header class=\"textbox__header\">\r\n<h3 class=\"textbox__title\">Review Questions<\/h3>\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n<ol>\r\n \t<li>Why are automatic captions alone not sufficient for accessibility?<\/li>\r\n \t<li>When should an image use descriptive alt text versus empty alt text?<\/li>\r\n \t<li>What is the difference between captions and transcripts?<\/li>\r\n \t<li>Why is keyboard access important for interactive tools?<\/li>\r\n \t<li>How can Canvas Studio improve the accessibility of video content?<\/li>\r\n<\/ol>\r\n<\/div>\r\n<\/div>\r\n<div class=\"textbox textbox--exercises\"><header class=\"textbox__header\">\r\n<h3 class=\"textbox__title\">Applied Activity<\/h3>\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n\r\nSelect one multimedia item from a course you teach or support. Review it for accessibility. Revise at least two of the following:\r\n<ul>\r\n \t<li>captions<\/li>\r\n \t<li>transcript<\/li>\r\n \t<li>alternative text<\/li>\r\n \t<li>heading structure<\/li>\r\n \t<li>keyboard access<\/li>\r\n \t<li>link text<\/li>\r\n<\/ul>\r\nWrite a short reflection explaining how the changes improved accessibility.\r\n\r\n<\/div>\r\n<\/div>\r\n<div class=\"textbox textbox--exercises\"><header class=\"textbox__header\">\r\n<h3 class=\"textbox__title\">Further Reading<\/h3>\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n<ul>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/media\/av\/\">W3C: Making Audio and Video Accessible<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/media\/av\/captions\/\">W3C: Captions and Subtitles<\/a><\/li>\r\n \t<li><a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/images\/\">W3C: Images Accessibility Tutorial<\/a><\/li>\r\n \t<li><a href=\"https:\/\/help.h5p.com\/hc\/en-us\/articles\/7505649072797-Content-types-recommendations\">H5P Accessibility Information<\/a><\/li>\r\n \t<li><a href=\"https:\/\/community.instructure.com\/en\/kb\/articles\/660520-how-do-i-create-captions-for-media-in-canvas-studio\">Canvas Studio: How do I create captions for media in Canvas Studio?<\/a><\/li>\r\n \t<li><a href=\"https:\/\/community.instructure.com\/en\/kb\/articles\/662932-how-do-i-manage-video-options-in-the-rich-content-editor?utm_source=community-search&amp;utm_medium=organic-search&amp;utm_term=How+do+I+manage+video+options+in+the+Rich+Content+Editor%3F\">Canvas Studio: How do I manage video options in the Rich Content Editor?<\/a><\/li>\r\n<\/ul>\r\n<\/div>\r\n<\/div>\r\n<div class=\"textbox\"><header class=\"textbox__header\">\r\n<h3 class=\"textbox__title\">Licenses and Attribution<\/h3>\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n<h4>CC Licensed Content, Original<\/h4>\r\nThis educational material includes AI-generated content from ChatGPT by OpenAI. The original content created by Josh Hill, Neida Abraham, and Emiliana Olavarrieta from Hillsborough College is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License (<a href=\"https:\/\/creativecommons.org\/licenses\/by-nc\/4.0\/deed.en\">CC BY-NC 4.0<\/a>).\r\n\r\nAll images in this textbook generated with DALL\u00b7E are licensed under the terms provided by OpenAI.\r\n<h4>Other Licensed Content<\/h4>\r\n<em><a href=\"https:\/\/commons.wikimedia.org\/wiki\/File:Closed_captioning_symbol.svg\">Closed captioning symbol<\/a><\/em>, via <a href=\"https:\/\/commons.wikimedia.org\/\">Wikimedia Commons<\/a>, Public Domain.\r\n\r\nScreenshot of a video titled Basic Chemistry Lab Equipment showing an instructor in a laboratory with transcript panel visible. Source: Canvas Studio. Used for educational purposes.\r\n\r\n<strong><a href=\"https:\/\/productmarketing.instructuremedia.com\/embed\/32388c5a-580c-40f0-85a2-6b4042ddcccb\">Video Caption Generation and Interactive Rolling Transcripts for Canvas<\/a><\/strong>\r\nInstructure Community\r\nAll rights reserved.\r\n\r\n<strong>Web Accessibility Perspectives: Video Captions<\/strong>\r\nW3C Web Accessibility Initiative (WAI)\r\nLicense: Standard YouTube License.\r\n\r\n<\/div>\r\n<\/div>\r\n<\/figcaption><\/figure>","rendered":"<h2>Making Multimedia Accessible<\/h2>\n<p>Accessible multimedia helps ensure that all students can engage with course materials, including video, audio, images, and interactive activities. When multimedia is designed with accessibility in mind, more learners can perceive, operate, and understand course content. This chapter introduces practical strategies for creating accessible multimedia for college courses.<\/p>\n<p>This chapter explains how to make video, audio, images, and interactive materials more accessible for college learners. It introduces core practices such as captioning, transcripts, audio descriptions, alternative text, keyboard access, and accessibility testing before publication.<\/p>\n<p><iframe loading=\"lazy\" id=\"oembed-1\" title=\"Web Accessibility Perspectives: Video Captions\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/iWO5N3n1DXU?feature=oembed&#38;rel=0\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<div id=\"h5p-11\">\n<div class=\"h5p-iframe-wrapper\"><iframe id=\"h5p-iframe-11\" class=\"h5p-iframe\" data-content-id=\"11\" style=\"height:1px\" src=\"about:blank\" frameBorder=\"0\" scrolling=\"no\" title=\"Web Accessibility Perspectives: Video Captions\"><\/iframe><\/div>\n<\/div>\n<div class=\"textbox textbox--learning-objectives\">\n<header class=\"textbox__header\">\n<h3 class=\"textbox__title\">Learning Objectives<\/h3>\n<\/header>\n<div class=\"textbox__content\">\n<ul>\n<li>Identify the main accessibility requirements for video, audio, images, and interactive multimedia.<\/li>\n<li>Explain when captions, transcripts, and audio descriptions are needed.<\/li>\n<li>Write appropriate alternative text for meaningful images and use empty alternative text for decorative images.<\/li>\n<li>Evaluate H5P and other interactive media for keyboard and screen reader accessibility.<\/li>\n<li>Apply accessibility review practices before publishing multimedia in a course.<\/li>\n<li>Explain the purpose of Able Player in accessible media design.<\/li>\n<li>Embed a captioned video using Able Player in Pressbooks.<\/li>\n<li>Apply CSS fixes to resolve accessibility contrast issues.<\/li>\n<li>Understand how Canvas Studio can support more accessible video use in Canvas LMS.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<div class=\"textbox textbox--key-terms\">\n<header class=\"textbox__header\">\n<h3 class=\"textbox__title\">Key Terms<\/h3>\n<\/header>\n<div class=\"textbox__content\">\n<dl>\n<dt>Alternative Text<\/dt>\n<dd>A short text description that communicates the purpose or meaning of an image for people who cannot see it.<\/dd>\n<dt>Audio Description<\/dt>\n<dd>Additional narration that explains important visual information in a video when that information is not otherwise available through dialogue or sound.<\/dd>\n<dt>Captions<\/dt>\n<dd>Text synchronized with video that represents spoken dialogue and relevant audio information.<\/dd>\n<dt>Decorative Image<\/dt>\n<dd>An image that does not add instructional meaning and should use empty alternative text.<\/dd>\n<dt>Transcript<\/dt>\n<dd>A text version of spoken content and relevant audio details from a video or audio recording.<\/dd>\n<dt>Rolling Transcript<\/dt>\n<dd>A time-synced text version of spoken audio or video that automatically scrolls and highlights words as they are spoken. Unlike a static transcript, it updates in real time during playback, allowing users to read along as they listen.<\/dd>\n<\/dl>\n<\/div>\n<\/div>\n<h3>Why Accessible Multimedia Matters<\/h3>\n<p>Multimedia can improve engagement and explain complex ideas, but it can also create barriers when access needs are overlooked. Students may need captions to follow spoken information, transcripts to review content, audio descriptions to understand key visuals, or keyboard access to complete an activity.<\/p>\n<p>Designing for accessibility from the start supports a wider range of learners and reduces the need for last-minute remediation.<\/p>\n<h3>Video Accessibility Requirements (WCAG 2.1 Level AA)<\/h3>\n<p>To ensure videos are accessible and meet <strong>WCAG 2.1 Level AA<\/strong>, several essential requirements must be met. These requirements support users who are deaf or hard of hearing, blind or low vision, or who rely on keyboard navigation.<\/p>\n<hr \/>\n<h4>1. Core Requirements (Non-Negotiables)<\/h4>\n<p>For a video to meet Level AA, the following three elements are required:<\/p>\n<ul>\n<li><strong>Captions (Success Criterion 1.2.2)<\/strong>\n<ul>\n<li>Accurate<\/li>\n<li>Synchronized with the audio<\/li>\n<li>Inclusive of speaker identification and meaningful sound effects<\/li>\n<\/ul>\n<\/li>\n<li><strong>Audio Description (Success Criterion 1.2.5)<\/strong><br \/>\nAudio description is required for prerecorded video content. This provides narration of essential visual information (e.g., on-screen text, actions, gestures, or scene changes) for users who are blind or have low vision.<\/li>\n<li><strong>Keyboard Accessibility (No Keyboard Traps)<\/strong>\n<ul>\n<li>Play, pause, and control the video<\/li>\n<li>Navigate the video player using only a keyboard, without becoming \u201ctrapped\u201d in the interface<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<hr \/>\n<h4>2. Visual and Interaction Standards<\/h4>\n<p>Accessibility also applies to how video content is presented and controlled:<\/p>\n<table>\n<thead>\n<tr>\n<th>Feature<\/th>\n<th>Requirement<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Color Contrast<\/strong><\/td>\n<td>Text displayed in the video (excluding logos) must have a contrast ratio of at least <strong>4.5:1<\/strong>.<\/td>\n<\/tr>\n<tr>\n<td><strong>Flashing Content<\/strong><\/td>\n<td>Content must not flash more than three times per second to reduce the risk of seizures.<\/td>\n<\/tr>\n<tr>\n<td><strong>Playback Control<\/strong><\/td>\n<td>If a video plays automatically and lasts longer than 5 seconds, users must be able to pause, stop, or control playback.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr \/>\n<h4>3. Common Issues and Compliance Risks<\/h4>\n<p>In practice, some issues are more critical than others. While the goal is full compliance, the following distinctions are helpful:<\/p>\n<ul>\n<li><strong>Minor Caption Errors<\/strong><br \/>\nSmall typos may be considered minor issues. However, errors that change meaning (e.g., \u201cnow\u201d vs. \u201cnot\u201d) can result in a failure.<\/li>\n<li><strong>Missing Audio Description<\/strong><br \/>\nThis is a <strong>significant compliance failure<\/strong>. If essential visual information is not available to users who cannot see the video, the content does not meet Level AA.<\/li>\n<li><strong>Inaccessible Video Player<\/strong><br \/>\nEven if the video itself is accessible, an inaccessible player (e.g., unusable with a keyboard or screen reader) makes the entire experience inaccessible.<\/li>\n<\/ul>\n<hr \/>\n<h4>4. A Practical Perspective on Accessibility<\/h4>\n<p>WCAG guidelines aim to ensure <strong>equitable access<\/strong>, not just technical compliance. The key question to consider is:<\/p>\n<blockquote><p>Does this video allow all users to access and understand the content equally?<\/p><\/blockquote>\n<p>Barriers that prevent comprehension or interaction represent the highest accessibility risks.<\/p>\n<hr \/>\n<h4>5. Practical Tip: Integrated Description<\/h4>\n<p>One effective strategy for reducing the need for separate audio description tracks is <strong>integrated description<\/strong>. This approach involves speakers naturally describing important visual elements as part of the narration.<\/p>\n<p>For example:<\/p>\n<ul>\n<li>Instead of showing a chart silently, the speaker explains the key trends aloud.<\/li>\n<\/ul>\n<div class=\"textbox textbox--summary\">\n<header class=\"textbox__header\">\n<p class=\"textbox__title\">Video Accessibility Summary<\/p>\n<\/header>\n<div class=\"textbox__content\">\n<p>To meet <strong>WCAG 2.1 Level AA<\/strong>, videos must include accurate captions, audio description of important visual content, and full keyboard accessibility. Additional requirements\u2014such as sufficient color contrast, avoiding flashing content, and providing playback controls\u2014ensure usability for a wide range of users. While minor errors may occur, missing audio description or an inaccessible video player represents a significant compliance failure. Ultimately, the goal is to provide <strong>equal access<\/strong> so that all users can perceive, understand, and interact with video content effectively.<\/p>\n<\/div>\n<\/div>\n<h3>Applying Video Accessibility in Course Design<\/h3>\n<p>Accessible video supports learners who are deaf or hard of hearing, blind or have low vision, use screen readers, study in distracting environments, or benefit from multiple ways to access information.<\/p>\n<h4>Captions<\/h4>\n<p>All instructional videos should include synchronized captions that are accurate, properly timed, and clear. Captions should reflect meaningful spoken content and identify speakers when needed.<\/p>\n<p>Automatic captions may be used as a starting point, but they should be reviewed and corrected before publication.<\/p>\n<h4>Transcripts<\/h4>\n<p>Provide a complete text transcript for video and audio materials. A transcript helps students review material, search for key ideas, and access content when video playback is not practical.<\/p>\n<ul>\n<li>Include speaker identification when relevant<\/li>\n<li>Correct punctuation and grammar<\/li>\n<li>Ensure readability for screen reader users<\/li>\n<li>Match the spoken content accurately<\/li>\n<\/ul>\n<h4>Audio Descriptions<\/h4>\n<p>If important visual information is not explained through narration, provide audio descriptions or revise the narration so visual content is also communicated in words.<\/p>\n<h3>Using Able Player for Accessible Video in Pressbooks and Canvas<\/h3>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/ableplayer\/\">Able Player<\/a> is an accessible media player designed to support captions, transcripts, keyboard navigation, and screen reader compatibility.<\/p>\n<p>This tool allows you to add accurate, synchronized captions to YouTube videos that you do not own. It is widely used in Pressbooks and can also support more inclusive media workflows when video content is shared in learning environments.<\/p>\n<p>You can process video captions using ChatGPT to generate properly formatted VTT files, which can then be hosted on GitHub. From there, ChatGPT can also assist in creating the necessary embed code (shortcode) to integrate the captioned video into HTML.<\/p>\n<h4>Why Use Able Player?<\/h4>\n<ul>\n<li>Provides synchronized captions and interactive transcripts<\/li>\n<li>Supports full keyboard navigation<\/li>\n<li>Works with screen readers and assistive technologies<\/li>\n<li>Allows users to control playback speed and display preferences<\/li>\n<li>Improves compliance with WCAG 2.1 Level AA accessibility standards<\/li>\n<\/ul>\n<h4>Using Able Player in Pressbooks<\/h4>\n<p>In Pressbooks, Able Player can be embedded using a shortcode. This allows you to include captions and a transcript for your video. The example video in our chapter <a href=\"https:\/\/pressbooks.hcfl.edu\/digitalaccessibility\/chapter\/open-educational-resources-ai-digital-accessibility\/\">Open Educational Resources, AI, &amp; Digital Accessibility<\/a> demonstrates Able Player effectively. In that video, the word <em>Go<\/em> appeared incorrectly in the original captions at 5:37, so the VTT file was edited to remove the error.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-960\" src=\"http:\/\/pressbooks.hcfl.edu\/digitalaccessibility\/wp-content\/uploads\/sites\/61\/2025\/10\/Untitled-1024x544.png\" alt=\"Video capture with the captions on and the word Go emphasized with a box drawn around it.\" width=\"723\" height=\"384\" srcset=\"https:\/\/pressbooks.hcfl.edu\/digitalaccessibility\/wp-content\/uploads\/sites\/61\/2025\/10\/Untitled-1024x544.png 1024w, https:\/\/pressbooks.hcfl.edu\/digitalaccessibility\/wp-content\/uploads\/sites\/61\/2025\/10\/Untitled-300x159.png 300w, https:\/\/pressbooks.hcfl.edu\/digitalaccessibility\/wp-content\/uploads\/sites\/61\/2025\/10\/Untitled-768x408.png 768w, https:\/\/pressbooks.hcfl.edu\/digitalaccessibility\/wp-content\/uploads\/sites\/61\/2025\/10\/Untitled-65x35.png 65w, https:\/\/pressbooks.hcfl.edu\/digitalaccessibility\/wp-content\/uploads\/sites\/61\/2025\/10\/Untitled-225x120.png 225w, https:\/\/pressbooks.hcfl.edu\/digitalaccessibility\/wp-content\/uploads\/sites\/61\/2025\/10\/Untitled-350x186.png 350w, https:\/\/pressbooks.hcfl.edu\/digitalaccessibility\/wp-content\/uploads\/sites\/61\/2025\/10\/Untitled.png 1291w\" sizes=\"auto, (max-width: 723px) 100vw, 723px\" \/><figcaption>Screenshot from author.<\/figcaption><\/figure>\n<h5>Step-by-Step: Embedding an Accessible Video<\/h5>\n<ol>\n<li>Locate a YouTube video appropriate for your content.<\/li>\n<li>Ensure captions are available or create a caption file in VTT format.<\/li>\n<li>Insert the Able Player shortcode into your chapter.<\/li>\n<li>Link the caption file and transcript container.<\/li>\n<li>Provide a cleaned and readable transcript below the player.<\/li>\n<\/ol>\n<h4>Fixing Able Player Contrast Issues in Pressbooks<\/h4>\n<p>Some Pressbooks themes may display Able Player controls with insufficient color contrast. Accessibility checkers may flag these issues even when your content is correct. You can resolve this by applying a global CSS fix.<\/p>\n<h5>Where to Add the CSS<\/h5>\n<ol>\n<li>Go to <strong>Appearance \u2192 Custom Styles<\/strong>.<\/li>\n<li>Scroll to <strong>Your Web Styles<\/strong>.<\/li>\n<li>Paste the CSS below.<\/li>\n<li>Save your changes.<\/li>\n<\/ol>\n<pre>.able .able-controller,\r\n.able .able-status-bar {\r\n  background-color: #222222 !important;\r\n}\r\n\r\n.able .able-controller button,\r\n.able .able-controller [role=\"button\"],\r\n.able .able-controller svg,\r\n.able .able-controller svg path {\r\n  color: #ffffff !important;\r\n  fill: #ffffff !important;\r\n}\r\n\r\n.able .able-status,\r\n.able .able-timer,\r\n.able .able-speed,\r\n.able .able-elapsedTime,\r\n.able .able-duration {\r\n  color: #d0d0d0 !important;\r\n}\r\n\r\n.able .able-controller button:hover,\r\n.able .able-controller button:focus {\r\n  background-color: #444444 !important;\r\n  outline: 2px solid #ffffff;\r\n  outline-offset: 2px;\r\n}<\/pre>\n<div class=\"textbox textbox--accessibility\">\n<header class=\"textbox__header\">\n<h3 class=\"textbox__title\">Accessibility Check<\/h3>\n<\/header>\n<div class=\"textbox__content\">\n<p>Accessibility tools may flag contrast issues in embedded media players. In Pressbooks, these can often be resolved using global CSS. Always ensure captions and transcripts are accurate, even when interface elements are controlled by plugins.<\/p>\n<\/div>\n<\/div>\n<h4>Using Able Player in Canvas LMS<\/h4>\n<p>Canvas does not include Able Player by default, but you can sometimes embed it using HTML if your institution supports external scripts or related tools.<\/p>\n<h5>Options for Canvas Integration<\/h5>\n<ul>\n<li>Embed Able Player using HTML in the Rich Content Editor, if allowed.<\/li>\n<li>Host Able Player files on a web server and reference them.<\/li>\n<li>Use third-party tools that support accessible video playback.<\/li>\n<\/ul>\n<h5>Alternative for Canvas<\/h5>\n<ul>\n<li>Use Canvas Studio with corrected captions.<\/li>\n<li>Enable Interactive Rolling Transcript for videos when available.<\/li>\n<li>Provide a downloadable transcript when rolling transcripts are not available.<\/li>\n<li>Embed YouTube videos with manually edited captions when possible.<\/li>\n<\/ul>\n<h4>Adding Transcripts to YouTube Videos in Canvas Studio<\/h4>\n<p>Canvas Studio provides another practical option for improving access to video content. In Canvas Studio, you can upload caption files in SRT or VTT format to media, including some videos you do not own. This makes Canvas Studio useful when you want to improve a YouTube video\u2019s accessibility in your course without rehosting the media yourself.<\/p>\n<p>For training documentation, see <a href=\"https:\/\/community.instructure.com\/en\/kb\/articles\/660520-how-do-i-create-captions-for-media-in-canvas-studio\">How do I create captions for media in Canvas Studio?<\/a><\/p>\n<h5>When to Use This Option<\/h5>\n<ul>\n<li>You are embedding or sharing a YouTube video through Canvas Studio.<\/li>\n<li>The existing automatic captions are inaccurate or incomplete.<\/li>\n<li>You have created or cleaned a caption file in SRT or VTT format.<\/li>\n<li>You want students to access more accurate text support while viewing the video in Canvas.<\/li>\n<\/ul>\n<h5>Step-by-Step: Uploading a Transcript or Caption File in Canvas Studio<\/h5>\n<ol>\n<li>Open <strong>Canvas Studio<\/strong> from your Canvas course or global navigation.<\/li>\n<li>Select the video you want to update.<\/li>\n<li>Open the media details or caption settings for that video.<\/li>\n<li>Choose the option to <strong>upload captions<\/strong>.<\/li>\n<li>Select your prepared <strong>SRT<\/strong> or <strong>VTT<\/strong> file from your computer.<\/li>\n<li>Upload the file and confirm that the correct language is selected.<\/li>\n<li>Preview the video to verify timing, punctuation, line breaks, and speaker clarity.<\/li>\n<li>Revise the file and re-upload it if needed.<\/li>\n<\/ol>\n<h4>Interactive Rolling Transcript in Canvas Studio<\/h4>\n<p>Canvas Studio allows instructors to provide an interactive rolling transcript for their videos. The transcript dynamically syncs with the media, highlighting spoken text in real time as the video or audio plays. This allows students to follow along visually and auditorily at the same time, improving comprehension, focus, and retention\u2014especially for learners who are deaf or hard of hearing. This feature is only functional when captions are available in Canvas Studio. It can also work for third-party YouTube videos if a caption file has been uploaded.<\/p>\n<figure class=\"wp-block-image alignnone size-full\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-1344 size-full\" src=\"http:\/\/pressbooks.hcfl.edu\/digitalaccessibility\/wp-content\/uploads\/sites\/61\/2025\/10\/Screenshot-2026-04-21-100045.png\" alt=\"Canvas Studio interface showing a video player on the left with captions and a synchronized transcript panel with timestamps and highlighted text on the right.\" width=\"781\" height=\"384\" srcset=\"https:\/\/pressbooks.hcfl.edu\/digitalaccessibility\/wp-content\/uploads\/sites\/61\/2025\/10\/Screenshot-2026-04-21-100045.png 781w, https:\/\/pressbooks.hcfl.edu\/digitalaccessibility\/wp-content\/uploads\/sites\/61\/2025\/10\/Screenshot-2026-04-21-100045-300x148.png 300w, https:\/\/pressbooks.hcfl.edu\/digitalaccessibility\/wp-content\/uploads\/sites\/61\/2025\/10\/Screenshot-2026-04-21-100045-768x378.png 768w, https:\/\/pressbooks.hcfl.edu\/digitalaccessibility\/wp-content\/uploads\/sites\/61\/2025\/10\/Screenshot-2026-04-21-100045-65x32.png 65w, https:\/\/pressbooks.hcfl.edu\/digitalaccessibility\/wp-content\/uploads\/sites\/61\/2025\/10\/Screenshot-2026-04-21-100045-225x111.png 225w, https:\/\/pressbooks.hcfl.edu\/digitalaccessibility\/wp-content\/uploads\/sites\/61\/2025\/10\/Screenshot-2026-04-21-100045-350x172.png 350w\" sizes=\"auto, (max-width: 781px) 100vw, 781px\" \/><figcaption>Screenshot of the Canvas Studio interface, showing a video player with captions on the left and a rolling transcript with timestamps and the words \u201ca little bit of time today to look at some&#8230;\u201d highlighted on the right.<br \/>\n<iframe loading=\"lazy\" style=\"display: block; margin: 0; padding: 0;\" src=\"https:\/\/productmarketing.instructuremedia.com\/embed\/32388c5a-580c-40f0-85a2-6b4042ddcccb\" width=\"640\" height=\"360\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><br \/>\n<\/iframe><\/p>\n<div id=\"h5p-41\">\n<div class=\"h5p-iframe-wrapper\"><iframe id=\"h5p-iframe-41\" class=\"h5p-iframe\" data-content-id=\"41\" style=\"height:1px\" src=\"about:blank\" frameBorder=\"0\" scrolling=\"no\" title=\"Video Caption Generation and Interactive Rolling Transcripts for Canvas | Feature Overview\"><\/iframe><\/div>\n<\/div>\n<p>For training documentation, see <a href=\"https:\/\/community.instructure.com\/en\/kb\/articles\/662932-how-do-i-manage-video-options-in-the-rich-content-editor?utm_source=community-search&amp;utm_medium=organic-search&amp;utm_term=How+do+I+manage+video+options+in+the+Rich+Content+Editor%3F\">How to manage video options in the Rich Content Editor<\/a>.<\/p>\n<p>Accessibility Check<\/p>\n<p>Uploading a caption file is an important step, but it does not replace quality review. Check that captions are synchronized, correctly punctuated, and clear to read. When possible, also provide a clean transcript below the video so learners can review the content in a text-based format.<\/p>\n<p>Best Practices for Transcript and Caption Quality<\/p>\n<p> \tCorrect spelling, punctuation, and capitalization before uploading.<br \/>\n \tIdentify speakers when more than one person is talking.<br \/>\n \tInclude meaningful non-speech audio when it supports understanding.<br \/>\n \tBreak long lines into readable caption segments.<br \/>\n \tReview the finished captions in Canvas Studio rather than assuming the file imported perfectly.<\/p>\n<p>Why This Matters<br \/>\nStudents use transcripts and captions in different ways. Some rely on them for full access, while others use them to review, study, search for terms, or follow along in noisy or quiet environments. Adding accurate caption files in Canvas Studio helps make video-based instruction more inclusive and easier to use.<\/p>\n<p>Instructor Tip<\/p>\n<p>If you start with an automatically generated transcript, treat it as a draft. Clean the text first, save it as an SRT or VTT file, upload it to Canvas Studio, and then watch the video once more to verify that the captions display correctly.<\/p>\n<p>Accessible Images<br \/>\n<img decoding=\"async\" src=\"https:\/\/commons.wikimedia.org\/wiki\/Special:FilePath\/Closed%20captioning%20symbol.svg\" alt=\"Closed captioning symbol showing two large letter C shapes inside a screen outline, used to indicate that captions are available for video content.\" \/><\/figcaption><\/figure>\n<p>Closed captioning icon used to indicate that captions are available for video content. <em><a href=\"https:\/\/commons.wikimedia.org\/wiki\/File:Closed_captioning_symbol.svg\">Closed captioning symbol<\/a><\/em>, via <a href=\"https:\/\/commons.wikimedia.org\/\">Wikimedia Commons<\/a>, Public Domain.<\/p>\n<ul>\n<li>Write descriptive alternative text for meaningful images.<\/li>\n<li>Use empty alternative text (<code>alt=\"\"<\/code>) for decorative images.<\/li>\n<li>Provide nearby explanation for charts or diagrams.<\/li>\n<li>Avoid images of text when readable text can be used.<\/li>\n<\/ul>\n<h3>H5P Interactive Content<\/h3>\n<ul>\n<li>Use descriptive labels for buttons and controls.<\/li>\n<li>Ensure activities can be completed using only a keyboard.<\/li>\n<li>Provide alternative text for images used in H5P.<\/li>\n<li>Avoid interactions that rely only on color or dragging.<\/li>\n<li>Test activities with keyboard navigation and screen readers.<\/li>\n<\/ul>\n<h3>Audio Content Guidelines<\/h3>\n<ol>\n<li>Provide a complete transcript.<\/li>\n<li>Ensure audio clarity with minimal background noise.<\/li>\n<li>Identify speakers when multiple people are speaking.<\/li>\n<li>Use descriptive file names and metadata.<\/li>\n<li>Organize audio content logically.<\/li>\n<\/ol>\n<div class=\"textbox textbox--exercises\">\n<header class=\"textbox__header\">\n<h3 class=\"textbox__title\">Accessibility Check Before Publishing<\/h3>\n<\/header>\n<div class=\"textbox__content\">\n<ul>\n<li>Confirm heading levels are logical.<\/li>\n<li>Ensure links use descriptive text.<\/li>\n<li>Review captions for accuracy.<\/li>\n<li>Confirm transcripts are complete.<\/li>\n<li>Test interactive content with a keyboard.<\/li>\n<li>Verify that images have appropriate alt text.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<div class=\"textbox textbox--summary\">\n<header class=\"textbox__header\">\n<h3 class=\"textbox__title\">Chapter Summary<\/h3>\n<\/header>\n<div class=\"textbox__content\">\n<p>Accessible multimedia is essential for inclusive course design. Videos should include captions and transcripts, important visuals should be described, images need meaningful alternative text, and interactive content should support keyboard access and assistive technologies.<\/p>\n<\/div>\n<\/div>\n<div class=\"textbox textbox--key-takeaways\">\n<header class=\"textbox__header\">\n<h3 class=\"textbox__title\">Key Takeaways<\/h3>\n<\/header>\n<div class=\"textbox__content\">\n<ul>\n<li>Able Player enhances accessibility by supporting captions, transcripts, and keyboard navigation.<\/li>\n<li>Canvas Studio can improve access to shared video by allowing caption file uploads.<\/li>\n<li>Alternative text should communicate the instructional purpose of images.<\/li>\n<li>Interactive multimedia must support keyboard navigation.<\/li>\n<li>Accessibility checks should occur before multimedia is published.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<div class=\"textbox textbox--exercises\">\n<header class=\"textbox__header\">\n<h3 class=\"textbox__title\">Review Questions<\/h3>\n<\/header>\n<div class=\"textbox__content\">\n<ol>\n<li>Why are automatic captions alone not sufficient for accessibility?<\/li>\n<li>When should an image use descriptive alt text versus empty alt text?<\/li>\n<li>What is the difference between captions and transcripts?<\/li>\n<li>Why is keyboard access important for interactive tools?<\/li>\n<li>How can Canvas Studio improve the accessibility of video content?<\/li>\n<\/ol>\n<\/div>\n<\/div>\n<div class=\"textbox textbox--exercises\">\n<header class=\"textbox__header\">\n<h3 class=\"textbox__title\">Applied Activity<\/h3>\n<\/header>\n<div class=\"textbox__content\">\n<p>Select one multimedia item from a course you teach or support. Review it for accessibility. Revise at least two of the following:<\/p>\n<ul>\n<li>captions<\/li>\n<li>transcript<\/li>\n<li>alternative text<\/li>\n<li>heading structure<\/li>\n<li>keyboard access<\/li>\n<li>link text<\/li>\n<\/ul>\n<p>Write a short reflection explaining how the changes improved accessibility.<\/p>\n<\/div>\n<\/div>\n<div class=\"textbox textbox--exercises\">\n<header class=\"textbox__header\">\n<h3 class=\"textbox__title\">Further Reading<\/h3>\n<\/header>\n<div class=\"textbox__content\">\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/media\/av\/\">W3C: Making Audio and Video Accessible<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/media\/av\/captions\/\">W3C: Captions and Subtitles<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/images\/\">W3C: Images Accessibility Tutorial<\/a><\/li>\n<li><a href=\"https:\/\/help.h5p.com\/hc\/en-us\/articles\/7505649072797-Content-types-recommendations\">H5P Accessibility Information<\/a><\/li>\n<li><a href=\"https:\/\/community.instructure.com\/en\/kb\/articles\/660520-how-do-i-create-captions-for-media-in-canvas-studio\">Canvas Studio: How do I create captions for media in Canvas Studio?<\/a><\/li>\n<li><a href=\"https:\/\/community.instructure.com\/en\/kb\/articles\/662932-how-do-i-manage-video-options-in-the-rich-content-editor?utm_source=community-search&amp;utm_medium=organic-search&amp;utm_term=How+do+I+manage+video+options+in+the+Rich+Content+Editor%3F\">Canvas Studio: How do I manage video options in the Rich Content Editor?<\/a><\/li>\n<\/ul>\n<\/div>\n<\/div>\n<div class=\"textbox\">\n<header class=\"textbox__header\">\n<h3 class=\"textbox__title\">Licenses and Attribution<\/h3>\n<\/header>\n<div class=\"textbox__content\">\n<h4>CC Licensed Content, Original<\/h4>\n<p>This educational material includes AI-generated content from ChatGPT by OpenAI. The original content created by Josh Hill, Neida Abraham, and Emiliana Olavarrieta from Hillsborough College is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License (<a href=\"https:\/\/creativecommons.org\/licenses\/by-nc\/4.0\/deed.en\">CC BY-NC 4.0<\/a>).<\/p>\n<p>All images in this textbook generated with DALL\u00b7E are licensed under the terms provided by OpenAI.<\/p>\n<h4>Other Licensed Content<\/h4>\n<p><em><a href=\"https:\/\/commons.wikimedia.org\/wiki\/File:Closed_captioning_symbol.svg\">Closed captioning symbol<\/a><\/em>, via <a href=\"https:\/\/commons.wikimedia.org\/\">Wikimedia Commons<\/a>, Public Domain.<\/p>\n<p>Screenshot of a video titled Basic Chemistry Lab Equipment showing an instructor in a laboratory with transcript panel visible. Source: Canvas Studio. Used for educational purposes.<\/p>\n<p><strong><a href=\"https:\/\/productmarketing.instructuremedia.com\/embed\/32388c5a-580c-40f0-85a2-6b4042ddcccb\">Video Caption Generation and Interactive Rolling Transcripts for Canvas<\/a><\/strong><br \/>\nInstructure Community<br \/>\nAll rights reserved.<\/p>\n<p><strong>Web Accessibility Perspectives: Video Captions<\/strong><br \/>\nW3C Web Accessibility Initiative (WAI)<br \/>\nLicense: Standard YouTube License.<\/p>\n<\/div>\n<\/div>\n","protected":false},"author":2,"menu_order":3,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-74","chapter","type-chapter","status-publish","hentry"],"part":24,"_links":{"self":[{"href":"https:\/\/pressbooks.hcfl.edu\/digitalaccessibility\/wp-json\/pressbooks\/v2\/chapters\/74","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.hcfl.edu\/digitalaccessibility\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.hcfl.edu\/digitalaccessibility\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.hcfl.edu\/digitalaccessibility\/wp-json\/wp\/v2\/users\/2"}],"version-history":[{"count":78,"href":"https:\/\/pressbooks.hcfl.edu\/digitalaccessibility\/wp-json\/pressbooks\/v2\/chapters\/74\/revisions"}],"predecessor-version":[{"id":1381,"href":"https:\/\/pressbooks.hcfl.edu\/digitalaccessibility\/wp-json\/pressbooks\/v2\/chapters\/74\/revisions\/1381"}],"part":[{"href":"https:\/\/pressbooks.hcfl.edu\/digitalaccessibility\/wp-json\/pressbooks\/v2\/parts\/24"}],"metadata":[{"href":"https:\/\/pressbooks.hcfl.edu\/digitalaccessibility\/wp-json\/pressbooks\/v2\/chapters\/74\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.hcfl.edu\/digitalaccessibility\/wp-json\/wp\/v2\/media?parent=74"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.hcfl.edu\/digitalaccessibility\/wp-json\/pressbooks\/v2\/chapter-type?post=74"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.hcfl.edu\/digitalaccessibility\/wp-json\/wp\/v2\/contributor?post=74"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.hcfl.edu\/digitalaccessibility\/wp-json\/wp\/v2\/license?post=74"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}