Portland Community College | Portland, Oregon

Keyboard accessibility

If you are using a different video player, please test it to make sure it can be used by those who cannot use a mouse.

• Whatever the operation or behavior, make sure a mouse is not required.
• Use the following keyboard keys to navigate and interact with the web page all of its content:
  • Tab
  • Arrow keys
  • Enter
  • Spacebar
  • Try to navigate to the video player.
• Keyboard commands clearly provided (and common operating system and browser keyboard commands) may also be used
• Could you complete the course without using a mouse?

Captioning Key

Captioning has its own set of grammatical rules. While an accurate transcript on it’s own will be greatly appreciated by your students, you may want to take your efforts a step further by referencing the Captioning Key.  Topics addressed in the key include:

• Where to add line breaks
• Presentation rate
• Sound effects
• Speaker Identification

How to caption using YouTube

You can record from a webcam directly into YouTube or upload a video. Initially a new YouTube account has a 15 minute video length limit, but you can extend that time-limit by following these instructions.

1. Set up a YouTube account (if you don’t already have one.)
2. Log in to your YouTube account.
3. Upload your video.
4. Add captions. (See also: written directions from Youtube Help)

How to caption using My Media

Kaltura will automatically generate captions for a video you upload to My Media. You can edit these for accuracy or replace them with another caption file.

• In the My Media tab, click the pencil icon to the right of the video you want to edit. The button will be labeled “edit (File name)”
• Select the Captions tab
• Select either “edit captions” or “upload caption file”
• Guide on how to Edit Captions

Other methods for generating captions

Amara

For videos hosted online that you do not own, you can add captions using Amara Public. To create text-to-speech audio description files for use with able player, select “Metadata: Audio Description” as the language and download your completed descriptions as a .vtt.

1. Go to Amara and create an account.
2. Start captioning
3. How to Transcribe a video

More Options

Here are a few tools for creating captions for videos that you have saved on your computer.

• Jubler and Aegisub are free, open-source captioning tools for windows, Mac OS, and Linux.
• Otter.ai – If you have an Otter license, you can create an auto-generated transcript
  • Select “import” to upload a video or audio file
  • Wait for the recording to process – you will receive an email notification
  • Edit your transcript for accuracy. Add appropriate punctuation and line breaks.
  • Download your transcript as an .srt file. See below for methods of attaching this file to your video.

For additional methods, see the Captioning Key.

How to add captions to a Google Drive video

Unlike Youtube and My Media, google drive does not automatically generate a caption track for your uploaded videos. You can add captions that you have created elsewhere to your google drive video.

• Log into Google Drive
• Navigate to the folder containing your video
• Right click on the name of your video and select “Manage Caption Tracks”
• Select “Add new caption tracks”

What to describe:

• Describe the visual elements that are the most essential to the viewer’s ability to follow, understand, and appreciate the program’s curricular content.
• Describe from general (global) to specific (local).
• Describe additional details as time permits, but don’t try to fill every last moment with description.
• Describe shape, size, texture, or color as appropriate to the comprehension or appreciation of content.
• Consistently identify people and characters by name or obvious physical attribute (if no name is provided).
• Describe discernable attributes and expressive gestures, but don’t interpret emotion or reasoning.
• Convey scene changes and the passage of time if it aids in the comprehension of the program.
• If time permits, describe montages of images (moving or still) that often serve a supporting role.

How to describe:

• Use vocabulary that is meaningful to students who are blind or visually impaired.
• Describe visual action or movement in terms of the viewer’s body.
• Describe shapes, sizes, and other essential attributes of objects by comparison to objects that are familiar to the intended audience.
• Deliver description in present tense, active voice, and in third-person narrative style.
  Speak clearly and at a rate that can be understood. Use the existing program audio as a guide.
• Avoid describing over audio that is essential to comprehension (do so only when necessary).
• Voice descriptions in conjunction with or before (but never after) the relevant visual content is onscreen.
• Match vocabulary to the program, avoiding jargon.
• Wait until technical vocabulary has been introduced in the program before using it in description.
• Voice descriptions in complete sentences if possible.
• Describe objectively, without interpretation, censorship, or comment.
• Describe the source of sounds that are not immediately recognizable in the program context.

Instructor: suggestions for a successful session

• For Live Transcription:
  • Contact Melanie.deleon@pcc.edu from Accessible Ed & Disability Resources to request a transcriber. (We use a service called TypeWell which provides a meaning-for-meaning transcript. We do use CART services when appropriate)
  • Set up a session to practice this before students arrive and while technical assistance (like the Faculty Help Desk) is available.
  • In a Zoom meeting that you are hosting click Closed Caption, located in the bottom control panel, and select Assign a participant to type.
  • In the participants window, hover over your transcriber’s name and click More and Assign to type closed Caption
• “Re-state” math problems by typing them into the whiteboard or chat before completing the problem.

Student: suggestions for a successful session

• Make arrangements with your instructor for a transcriber at least a few business days before the session.
• After entering/logging into the session, choose “Show Closed Captioning” (Ctrl/Cmd + F8) from the Collaborate Window menu, to open the captioning window. After it’s open, just wait for captioning to begin.
• Don’t close the transcribing window- you will lose the transcript history.
• Ask your instructor or the moderator of the session to Record the session. That will record all the captions, even if you closed the captioning window mid-session.

Header Content

• In D2L, open the page where you want to embed a video using Able Player.
• Click the “edit html” button.
• Click the “Html source editor button” (<\>)
• Near the top of the document, between the head tags, place the following code:

<!-- Dependencies -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/shared/videos/ableplayer/thirdparty/js.cookie.js"></script>

<!-- CSS -->
<link rel="stylesheet" href="/shared/videos/ableplayer/build/ableplayer.min.css" type="text/css"/>

<!-- JavaScript -->
<script src="/shared/videos/ableplayer/build/ableplayer.min.js"></script>

Youtube Video

• Find the video ID for your youtube video. This can be found within the web address for that video.
  • The id for “https://youtu.be/73kQkY4QBU8” is “73kQkY4QBU8”
  • The id for https://www.youtube.com/watch?v=a9I8tPqIgWA is “a9I8tPqIgWA”
  • The id for “https://www.youtube.com/watch?v=73kQkY4QBU8&list=PLRfHZ9wXKs6c8eQjHWk8eRVBfHamVw9lp” is “73kQkY4QBU8”
• In the body of your html file, add the following code where you would like the video to appear, replacing the value data-youtube-id:

<div style="margin: auto; max-width: 640px; width: 95%;">
<video id="video1" data-able-player="" data-skin="2020" preload="auto" data-youtube-id="a9I8tPqIgWA">
<!--Caption tracks go here -->
</video>
</div>

Vimeo Video

1. In the header section of your html, add the following code:
   <!-- Vimeo JavaScript -->
<script src="https://player.vimeo.com/api/player.js"></script>
2. Find the video id. This will be in the web address for the video.
   • The ID for https://vimeo.com/214065299 is “214065299”
3. In the body of your html file, add the following code where you would like the video to appear, replacing the video id
   <div style="margin: auto; max-width: 640px; width: 95%;">
<video id="video1" data-able-player data-skin="2020" preload="auto" data-vimeo-id="214065299">
<!--Caption tracks go here -->
</video>
</div>

Local Video

1. Upload your file directly to your course shell under “manage files”
2. In the body of your html file, add the following code where you would like the video to appear, replacing the source path to match the location of your video.

<div style="margin: auto; max-width: 640px; width: 95%;">
<video id="video1" data-able-player="" preload="auto" width="480" height="360">
<source type="video/mp4" src="/content/enforced/123456-my-course/Videos/MyLecture.mp4" />
<!--Caption tracks go here -->
</video>
</div>

Add Captions

1. Upload your caption files in .vtt format directly to your course shell under “manage files”
2. Before the closing video tag (</video>) add the following line of code, replacing the source path to match the location of your file:
   <track kind="captions" src="/content/enforced/123456-my-course/Accommodations/MyLecture.vtt"  />
3. You can include captions in multiple languages. Use the following code for each language, adjusting the language code and labels:
   <track kind="captions" src="/content/enforced/123456-my-course/Accommodations/MyLecture.vtt" srclang="en" label="English"  />

Add Audio Description

Able Player allows for text-to-speech audio description, using a captions file.

1. Upload your audio description in .vtt format directly to your course shell under “manage files”
2. Before the closing video tag (</video>) add the following line of code, replacing the source path to match the location of your file:
   <track kind="descriptions" src="/content/enforced/123456-my-course/Accommodations/MyLectureDesc.vtt" />