Student Orgs / en Accessible Videos /resource/videos/accessible-videos <span class="field field--name-title field--type-string field--label-hidden">Accessible Videos</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span>careya2</span></span> <span class="field field--name-created field--type-created field--label-hidden"><time datetime="2025-04-21T12:27:57-05:00" title="Monday, April 21, 2025 - 12:27" class="datetime">Mon, 04/21/2025 - 12:27</time> </span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"> <p>The Web Content Accessibility Guidelines version 2.2 require four pieces for a video to be considered accessible. In brief, those guidelines are:</p> <ul><li>Captions at 99%+ accuracy</li><li>Spoken audio descriptions of relevant materials in videos</li><li>Captioned audio descriptions of the spoken audio descriptions in videos</li><li>Transcript that includes video captions and audio description captions</li></ul> <p>In the page below, you’ll find resources and instructions to complete all these steps. To view a fully accessible video, check out this&nbsp;<a href="https://www.perkins.org/resource/accessible-instructional-materials-digital-classroom/">sample video with spoken and captioned audio descriptions with full transcript</a>.</p> <h2 id="checklist">99% Accurate Captions</h2> <p>Creating accurate captions is a critical piece of creating an accessible video. A free resource from Cielo24 explains all you need to know about captions in their&nbsp;<a href="https://uofi.app.box.com/s/ga9i4qzlduez2866ayzis3j5yzapk5uv">Captioning Compliance Checklist</a>.</p> <h2>Captioning in Kaltura</h2> <p>If you have a video uploaded in Kaltura/My Media in Canvas, you can access the captions from the video's edit page in My Media. More information on how to correct captions can be found in the UIS Knowledge Base article on&nbsp;<a href="https://help.uillinois.edu/TDClient/38/uis/KB/ArticleDet?ID=1">Closed Captions for Videos in Kaltura</a>.</p> <h2 id="tools">Other Captioning Tools</h2> <ul><li><a href="/resource/captioning-youtube">Adding captions to videos hosted on YouTube</a></li><li><a href="https://amara.org/en/">Adding captions to third-party videos with Amara</a></li></ul> <h2 id="transcripts">Creating Transcripts from an .srt File</h2> <p>Transcripts are a similarly crucial element of accessible video presentation. After you've created an accurate captions file, it's very easy to convert this into a transcript.</p> <ol><li>Upload your captions to&nbsp;<a href="https://subtitletools.com/convert-subtitles-to-plain-text-online">Subtitle Tools</a></li><li>Ensure "Empty line between cues" is unchecked and click Extract text</li><li>Click the Download link to save your transcript</li></ol> <p>At this point, you have a functional .txt transcript file, but the text from each cue in the subtitle file will be on its own line. This could cause it to be difficult to read for some assistive technology. You can merge these into a single block of text with Word's find and replace features to make it more readable.</p> <ol><li>Download the text file and open it in Word<ul><li>You'll be met with a File Conversion dialog. Ensure that UTF-8 is selected.</li></ul></li><li>Use Find and Replace (Ctrl + H) to remove the endlines by putting&nbsp;<code>^p</code>&nbsp;in the Find field and either nothing or a single space in the Replace field.<ul><li>Often, files created through YouTube have spaces and/or non-breaking spaces at the end of each line, which will not be removed along with the endlines. To remove non-breaking spaces you can use&nbsp;<code>^s</code>, and to remove instances of multiple spaces, you can simply put two spaces in the Find field and one space in the Replace field. Repeat as necessary.</li></ul></li><li>Ensure that new speakers begin a new paragraph. (You can Ctrl + F for&nbsp;<code>&gt;&gt;</code>&nbsp;to quickly locate them.) If desired, break into paragraphs further.</li></ol> <h2 id="audio-descriptions">Audio Descriptions with Captions</h2> <p>Audio descriptions are an audio track or transcripts that describe the visuals you see on a screen. You should create captions for the audio descriptions in the same way that you would provide them for the audio included with the video.</p> <p>To understand what a difference audio descriptions can make for a student, please view these two frozen clips below.</p> <h3>Disney’s Frozen Scene with Subtitles and without Audio Description</h3> <p>Embed:&nbsp;<a href="https://www.youtube.com/watch?v=SsEySqC-bO0">Frozen - Trailer with Subtitles</a></p> <h3>Disney’s Frozen Scene with Subtitles and Audio Description</h3> <p>Embed:&nbsp;<a href="https://www.youtube.com/watch?v=O7j4_aP8dWA">Frozen - Trailer with Audio Description</a></p> <p>The simplest way to include audio descriptions is to build the audio descriptions into your video lectures from the beginning. For instance, if you are creating a Light Board video where you are drawing a graph on the board, simply explain what you are drawing as you are doing it. If you are narrating a PowerPoint lecture, describe what is on the screen. If text is all that is on your slide, make sure you speak all the text.</p> <p>DigitalGov created an excellent resource that explains the different&nbsp;<a href="https://digital.gov/2014/06/30/508-accessible-videos-how-to-make-audio-descriptions/">options for including audio tracks</a>.</p> </div> <div class="field field--name-field-resource-type field--type-entity-reference field--label-above"> <div class="field__label">Resource type</div> <div class="field__items"> <div class="field__item"><a href="/resources/videos" hreflang="en">videos</a></div> </div> </div> Mon, 21 Apr 2025 17:27:57 +0000 careya2 33438199 at PDF Accessibility: The Tags Panel /resource/documents/pdf-accessibility-tags-panel <span class="field field--name-title field--type-string field--label-hidden">PDF Accessibility: The Tags Panel</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span>careya2</span></span> <span class="field field--name-created field--type-created field--label-hidden"><time datetime="2025-04-21T12:21:50-05:00" title="Monday, April 21, 2025 - 12:21" class="datetime">Mon, 04/21/2025 - 12:21</time> </span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"> <p>The Tags Panel displays the primary structure of the document. While the&nbsp;Order Panel&nbsp;provides tools to restructure what content is grouped together, how it is labeled, and when it is read, the Tags Panel gives more granular control over the latter two aspects. The order of the tags is the reading order of the document, moreso than that displayed by the Order Panel, and each tag serves a specific semantic purpose (besides grouping tags like&nbsp;<code>&lt;Part&gt;</code>&nbsp;and&nbsp;<code>&lt;Sect&gt;</code>). Some of the structures formed by these tags require strict adherence to that structure; more information about them can be found on the&nbsp;Complex Tag Structures&nbsp;page.</p> <p>Some important functions of the Tags Panel are:</p> <ul><li>Dragging and dropping content and tags to change the structure</li><li>Right Click &gt; New Tag</li><li>Editing a tag's properties by Right Click &gt; Properties<ul><li>Type allows you to change what tag is used</li><li>The Actual Text field can be used to correct poorly scanned text</li><li>Alternate Text can be provided for figures and formulae.</li></ul></li><li>Right Click &gt; Copy Contents to Clipboard can be useful for identifying and correcting poorly scanned text</li></ul> <p>While it can get tedious for longer documents, the best way to check over the tags is simply to select the first one and use the arrow keys to go through each tag that's present and check that it is in the correct order and is properly representing the content. You may find that the document is structured with many section tags. These don't have any semantic purpose, so their presence is not problematic, but it if they make it difficult to traverse the tags, you can pull the content out and delete them.</p> <h2 id="tagging-paragraphs">Tagging paragraphs</h2> <p>Paragraphs often get split across columns or pages, resulting in a halting of the reading in the middle of the paragraph. Thus, these should be combined such that each visual paragraph is contained within a single paragraph tag. Sometimes, paragraphs contain other content such as inline math or footnote references that require their own tags. In these cases, break the text using the order panel so that it can sit around the inline content and include them all in order in one&nbsp;<code>&lt;P&gt;</code>&nbsp;tag (see below example).</p> <figure class="wp-block-image"><img src="/sites/default/files/2022-05/paragraph-tagging_labeled.png" alt="A paragraph with its constituent tags labeled. It contains text interspersed with equations. The equations are tagged separately from the tag content." class="wp-image-25212"></figure> <figure class="wp-block-image"><img src="/sites/default/files/2022-05/paragraph-tag-structure.png" alt="The tag structure of the previous paragraph, showing that it is all contained in order in a single paragraph tag." class="wp-image-25213"></figure> <p>In extreme situations, preserving visual paragraphs in tag form may require the repositioning of other elements in the reading order. In one PDF we remediated, there was a paragraph that spanned three pages because each page also contained a large graph. The graphs were adjusted to sit elsewhere in the tags panel, after the paragraphs in which they were referenced, and the paragraph was combined into a single tag.</p> <h2 id="footnotes">Footnotes</h2> <p>Footnotes are a curious case, as their usual reading flow for a sighted user does not quite match the experience of a screen reader user or anyone else navigating the document by keyboard. There is no definite standard on where they should be placed in the reading order, whether at the end of the page or read after the paragraph in which they are referenced. The <a href="/digital-accessibility/about/dart">Digital Accessibility Remediation Team (DART)</a> uses the latter positioning when remediating PDFs, as it lends itself to a more natural reading order.</p> <p>The superscript that refers to the footnote should be tagged as&nbsp;<code>&lt;Reference&gt;</code>, and the footnote itself should be tagged as&nbsp;<code>&lt;Note&gt;</code>.&nbsp;</p> <h2 id="inaccurate-text">Correcting Inaccurate Text</h2> <p>For some documents, particularly scans, the text recognized by the OCR may not match the text in the document. In these instances, you can use the Actual Text field in the tag's properties to provide accurate text. This can also be used to correct other elements like hyphens that are inserted as a consequence of line wrapping. These hyphens should be tagged as a&nbsp;<code>&lt;span&gt;</code>&nbsp;element, and the Actual Text should contain a soft hyphen character (<a href="https://unicode-table.com/en/#00AD">U+00AD</a>) to denote it as a connective element rather than a textual element.</p> <h2 id="citation">Article Citation</h2> <p>The following articles were used as examples. Modifications to the PDF structure were made for illustrative purposes.</p> <p>Souleiman, Y. (2021). <a href="https://doi.org/10.5897/AJMCSR2020.0865">Convergences and numerical analysis of a contact problem with normal compliance and unilateral constraint</a>. African Journal of Mathematics and Computer Science Research, 14(1), 13-23.</p> <p>Copyright © 2022 Author(s) retain the copyright of this article.</p> <p>This article is published under the terms of the&nbsp;<a href="https://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution License 4.0</a></p> </div> <div class="field field--name-field-resource-type field--type-entity-reference field--label-above"> <div class="field__label">Resource type</div> <div class="field__items"> <div class="field__item"><a href="/resources/documents" hreflang="en">documents</a></div> </div> </div> Mon, 21 Apr 2025 17:21:50 +0000 careya2 33438198 at PDF Accessibility /resource/documents/pdf-accessibility <span class="field field--name-title field--type-string field--label-hidden">PDF Accessibility</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span>careya2</span></span> <span class="field field--name-created field--type-created field--label-hidden"><time datetime="2025-04-21T12:16:04-05:00" title="Monday, April 21, 2025 - 12:16" class="datetime">Mon, 04/21/2025 - 12:16</time> </span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"> <p>The PDF is a curious case for accessibility. On one hand, it has the potential to be a useful standard for both accessible reading and for printing. On the other, it is rarely utilized in an accessible manner and has many obscure issues and odd behaviors that can lead to problems.</p> <p>As such, it is often much easier to make a <a href="/resource/documents/microsoft-word-checklist" data-type="wiki">Word</a> document accessible than a PDF, so we encourage you to prioritize using Word documents, web pages, or Canvas pages over PDFs whenever appropriate. However, in a university context, readings such as articles and book chapters are often PDFs, so it's important to know how to convert an inaccessible PDF into an accessible one.</p> <h2 id="course-reserves">Utilize Course Reserves</h2> <p>When constructing your course, one resource that is invaluable for procuring accessible versions of readings is the Library's <a href="https://libguides.uis.edu/c.php?g=1163319&amp;p=8492535">Course Reserves</a>. Every PDF requested through this system is remediated by the Digital Accessibility Remediation Team (DART) to ensure that it complies with the relevant accessibility guidelines.</p> <h2 id="structure">How PDF is Structured</h2> <p>Unlike Word, where the content and structure are one and the same, PDFs' content can be represented programmatically in a completely separate manner from the way it appears visually. A scanned book chapter may contain many pages of paragraphs, but may only be encoded as images in the PDF itself.</p> <p>Accessibility in PDF revolves around matching the backend representation to the frontend content. To do this, PDF uses tags as semantic containers for its content, similar to how HTML is structured. These tags describe what kind of content they contain so that screen readers understand what is on the page. Their order also determines the order in which the contents are read by assistive technology or tabbed through if navigating with a keyboard. Thus, PDF remediation can be thought of as having two primary components, representation and reading order.</p> <p>For proper representation, it's important to understand the main types of tags that are commonly found in PDFs. A selection of these are explained in the table below.</p> <figure class="wp-block-table"><table><thead><tr><th><strong>Tag(s)</strong></th><th><strong>Description</strong></th></tr></thead><tbody><tr><td><code>&lt;P&gt;</code></td><td>A paragraph tag, used for any body text</td></tr><tr><td><code>&lt;H1&gt;</code>, <code>&lt;H2&gt;</code>, etc.</td><td>Headings of various levels, used to provide navigational structure to a document</td></tr><tr><td><code>&lt;Figure&gt;</code></td><td>An image, requires alternate text that describes its contents</td></tr><tr><td><code>&lt;Formula&gt;</code></td><td>Acts just like a figure, but conveys that it contains a formula.</td></tr><tr><td><code>&lt;Caption&gt;</code></td><td>Denotes text serving as a caption to a figure, table, etc.</td></tr><tr><td><code>&lt;Span&gt;</code></td><td>Inline text that differs from its surrounding text, has various uses</td></tr><tr><td><code>&lt;Part&gt;</code>, <code>&lt;Sect&gt;</code></td><td>Part and section tags are simply containers for organization of other tags</td></tr><tr><td><code>&lt;Note&gt;</code></td><td>Used to denote an endnote or footnote</td></tr><tr><td><code>&lt;Reference&gt;</code></td><td>A text citation that refers elsewhere in the document, like the superscripts referring to footnotes</td></tr><tr><td><code>&lt;Table&gt;</code>, <code>&lt;TR&gt;</code>, <code>&lt;TH&gt;</code>, <code>&lt;TD&gt;</code></td><td>Tags used for tables; see below</td></tr><tr><td><code>&lt;List&gt;</code>, <code>&lt;LI&gt;</code>, <code>&lt;Lbl&gt;</code>, <code>&lt;LBody&gt;</code></td><td>Tags used for lists; see Tables and Lists for more information</td></tr></tbody></table></figure> <h2 id="process">Remediation Process</h2> <p>Given PDF's complexity, there are likely a number of ways to approach making a document accessible, but over time we've found the following process to be the most thorough and straightforward.</p> <ol><li>Run the accessibility checker and, if needed, the Make Accessible tool.</li><li>Go through the document twice with the <a href="/node/33437254" data-type="[EN] resource" data-id="33437254">Order Panel</a>.<ul style="padding: 0 0 0 3em"><li>Initial tagging pass</li><li>Reading order pass</li></ul></li><li>Go through the <a href="/node/33437250" data-type="[EN] resource" data-id="33437250">Tags Panel</a> to check for malformed structures and to combine tags if needed.</li><li>Add alternate text to images</li></ol> <h3 id="tools">Accessibility tools</h3> <p>Two important tools you'll need to use for checking PDF accessibility are the checker itself (part of the Accessibility tool) and the Make Accessible action in the Action Center tool. Both of these can be found under the Tools tab of Acrobat DC.</p> <p>The accessibility checker will function much like those in Office, listing out common issues and highlighting them if they're clicked on. It also has a couple useful right click options, including Explain, which will pull up <a href="https://helpx.adobe.com/acrobat/using/create-verify-pdf-accessibility.html">Adobe's help website</a> to the description of the error, and Show in Tags Panel, which opens the Tags panel and selects the offending tag. When you run the checker, it will give you a dialog box of options. You can just leave the defaults applied and click Start Checking.</p> <p>There will be two items that require a manual check in all documents. These are logical reading order, which is discussed on the Order Panel page, and color contrast. Color contrast will generally not be an issue given most readings are black and white, but in color documents, you may want to check that it is sufficient and edit the colors if needed with the Edit PDF tool.</p> <p>Note: The Edit PDF tool should be used sparingly and early in the process, as it can cause issues with the PDF content potentially not being at parity with the tagged representation. It can also pose copyright issues if significant changes are made. Generally if these are made for the purpose of ensuring accessibility, this is acceptable, but changes that alter the primary content or for another purpose beyond accessibility may be copyright violations.</p> <p>If the document you're using was prepared in a way that included tags, you may be able to move on to the Order Panel passes, but if you get an untagged PDF error (or if you run into significant issues with the existing tags) you'll need to run the Make Accessible action. This tool takes you through a series of dialog boxes to prepare the document for remediation.</p> <ol><li>A description dialog allows you to provide metadata about the document. The only necessary field is the Title, which will be read by a screen reader when the document is focused.</li><li>The Recognize Text box will appear. Ensure that the document language listed matches the document.</li><li>Acrobat will ask if you want to detect form fields. Unless your document is a fillable form, choose No, Skip this Step.</li><li>Ensure that the reading language listed matches the document as before.</li><li>If Acrobat recognizes any images in your document, it will allow you to enter alt text. It's common for the initial recognition to either catch additional elements that shouldn't be images or to ignore images that are present, so it is often better to just choose Save and Close, as you can return to this after you've checked over the structure.</li><li>It will run the accessibility checker as described above.</li></ol> <p>Note: Resolving all of the accessibility checker does NOT necessarily mean that your document is accessible. It only can check if certain prescribed structures are correct. It cannot check whether those structures are accurate depictions of the document's content. Thus, it is important to understand the remediation processes detailed on the following two pages.</p> <h3 id="pages">Remediating the document</h3> <p>The use of the Order and Tags panels are significant topics by themselves, so they have their own pages dedicated to that information:</p> <ul><li>Using the Order Panel</li><li>Using the Tags Panel</li></ul> <h3 id="alt-text">Adding alternate text</h3> <p>There are two options for adding alt text to an image. The first is to right click any of the alt text errors in the accessibility checker and choose Fix, which will open a small dialog that allows you to jump between images and provide each of them alt text. The second is to right click the tag in the Tags Panel and open the properties menu. There, you will be able to add your alternate text in the respective field.</p> <h3 id="assistance">Remediation assistance</h3> <p>If you have any further questions about PDF, feel free to reach out to the <a href="mailto: oda@uis.edu">Office of Digital Accessibility</a>.</p> </div> <div class="field field--name-field-resource-type field--type-entity-reference field--label-above"> <div class="field__label">Resource type</div> <div class="field__items"> <div class="field__item"><a href="/resources/documents" hreflang="en">documents</a></div> </div> </div> Mon, 21 Apr 2025 17:16:04 +0000 careya2 33438197 at