YouTube’s Closed Captions and How You Can Make Them Better!

You can flag YouTube videos for captioning? Yep, and the law is on your side!

YouTube has more than one billion auto-captioned videos. They’ve been developing tools to engage the community in an effort to make those captions more accurate. Some channels let users contribute titles, descriptions, subtitles and closed captions to their videos, and now it is possible for users to flag uncaptioned videos and help with quality control.

Users can flag videos that don’t meet CVAA mandates. The law requires video programming that is captioned on TV to also be captioned when distributed on the internet. You can report a video when captions are inaccurate, abusive or straight-up missing.

Many digital resources are required by law to be captioned. When you find a video on YouTube and the captions are missing or inaccurate, report it. That would be a great service to the community, and potentially to your students too.

Here’s how you do it:

On the bottom right corner of the video screen there is an ellipsis icon. That is the button you press to report a video.

 

There are a number of reasons to report a video. Captioning is one of them.

 

Once you flag a video for a captions issue, you can specify it.

 

Customizing your word.emerson site with CSS

When using a WordPress blog (either on word.emerson or emerson.build) for a course, the theme you choose will provide certain options for customization. To make style changes beyond those options, you will need to dip into the site’s CSS. Note: If you choose to use CSS to customize your site beyond the options provided by your theme, you will be responsible for writing and troubleshooting your own code. ITG will respond to any requests for help that come in from members of the Emerson community, but our support of custom CSS is limited.

CSS (Cascading Stylesheets) code is what tells your browser how the content on the current page should look. It’s a powerful tool to have in your belt if you’re going to be publishing content on the web. To get started with CSS, I recommend taking some time to do one (or more) of the tutorials available on the web. Here’s a couple ones I’ve seen to get you started:

Making new styles for your site

Once you have some general CSS knowledge, it’s time to use that to customize your site!

If you’re planning to use CSS to change colors of any elements on your site, you should ensure that the colors you’re choosing have enough contrast to help all viewers of your site read your content. Sites like Color Safe – accessible web color combinations and the WebAIM Color Contrast Checker can help with this.

(Note: The following part of the post assumes you’re using Google’s Chrome browser. If you’re using a different browser, take a look at the information on WordPress.com’s Support site for how to access the developer tools for your browser.)

Access your site’s homepage (for word.emerson blogs, that’ll be something like “word.emerson.edu/YOURSITE”). Right click (or Ctrl + click if your mouse isn’t set up for right-clicking) on the part of the page you want to style. Choose “Inspect” from the menu that opens. This will open a new window showing the html structure of the page. The element you want should already be highlighted in the Inspect / Developer Tools window. If not, you’ll have to look through the elements to find it.

When you hover over an element in the Inspect window, the corresponding part of the website will be highlighted. This will also show you if the item has an id or a class associated with it. In the screenshot below, the subtitle of the ITG blog site is highlighted in the Inspect window (the right side of the screenshot) and on the blog page (left side). The html shows a paragraph with id “site-description” (the “p id=”site-description” part), which is listed as “p#site-description” on the left side of the screenshot. The “p#site-description” selector is what we would use to apply custom css to the blog’s subtitle.

Side by side view of the ITG blog subtitle and the html code for it

(Tip: Try to be as specific as possible when using CSS selectors to avoid your style being applied to other, unintended elements.)

In Chrome, the Inspect / Developer Tools window allows you to try out styles without making actual changes to the site. Note: the Inspect/Developer Tools window does not save changes to the site. Leaving the page or refreshing it will wipe out all the changes you’ve made. You should always copy the styles you like to another program, like Notepad or Text/Edit. For this reason, I recommend only working on the styles for one element at a time.

The Dev Tools window has a sidebar with a tab for “Styles”. Click the “+”/”New Style Rule” button to create a style for the currently selected item. Click the newly created style to begin typing your CSS code. In this instance, I typed “font-style: italic;” in order to italicize the subtitle. You should see the change on the original window with your website. You can toggle your new rule on or off by clicking the checkbox to the left of it.

New style on:

Side by side view of active CSS code and the effect on the page

New style off:

Side by side view of inactive CSS style and the effect on the page

Again, these changes are not actually saved on your site yet. Make sure you have your new styles copied to another program before proceeding.

Saving custom styles to your site

While logged in, access your site’s homepage if you’re not already there. Click the “Customize” button in the black bar at the top of the page. Some themes and later versions of WordPress have an option to input Custom CSS built in by default. You’ll see it listed as something like “CSS”, “Additional CSS”, etc.

If you don’t see an option under “Customize”, close the Customizer (by clicking the “X” above “You are customizing”) and visit your site’s Dashboard instead. Click “Plugins” and search for “CSS”. You should see a listing for “Simple Custom CSS”. Activate that plugin. Once that’s activated, you’ll see a new option under the “Appearance” menu in the Dashboard which is “Custom CSS”. Click that.

Whether you’re using Customize or the Simple Custom CSS plugin, you should see a box to enter in your CSS. Do so and save. The next time you visit your site, you should see the changes you made reflected there.

Further Reading

There’s a lot of other information about CSS and styling web pages and WordPress out there. Here are a few sites to do more reading on this subject:

Building Accessible Content in Canvas and Beyond

Universal Design for Learning (UDL) is all about accessibility in teaching and learning. In my last blog post, I wrote about how to make your learning activities more UDL friendly. In this post, I’d like to focus on what you can do to make your online content in Canvas as accessible as possible for those who might have limited or no vision.

You might be thinking, “I don’t have any students with visual impairments so this doesn’t apply to me.” However, time and time again, accessible design has proven to be simply better design. Furthermore, many of these habits are also in line with basic web standards. So if you are building a web site for example, a more accessible web site is also going to be a web site that is primed for search engine optimization. Finally, and most importantly, if you do ever have a student who needs an accommodation, you will be prepared and not left scrambling to fix your Canvas course.

The good news is that making your Canvas course content accessible is very easy. Although I am focusing on Canvas in this post, these skills are easily transferred to other platforms such as WordPress or Microsoft Word.

Note: I’m assuming that you are familiar with editing text in Canvas. If you are not, you may find this overview video of the Rich Content Editor helpful, as well the Rich Content Editor section of the Canvas Instructor Guide.

Tag your headers as headers

Headers allow a sighted person to scan text, gather some basic information at a glance, and perhaps skip to a specific section. Header tags make this same type of behavior possible with a screen reader. Otherwise, a screen reader would just read an entire text from beginning to end without any organization mechanism. The key is that your text doesn’t just look like a header but is actually coded as header. If you simply adjust font size and make things bold, this does not mean anything to a screen reader. It might look like a header to a sighted reader but it will be recognized as just regular text. In HTML code, a header tag looks something like this:

<h1>This is the header</h1>

To tag a header as a header in Canvas, simply highlight the text and select an appropriate header from the drop-down menu in the Rich Content Editor:

screenshot of format dropdown menu in the Rich Content Editor

Keep your header tags in numerical order

Header tags need to go in sequential order starting with Header 1.  You cannot skip from a Header 1 tag to a Header 4 tag. Canvas might allow you to do this. However, if your page were to be run through an accessibility checker, it would be marked with an error. In Canvas, names of pages or assignments are always tagged as Header 1. That is why Header 1 is not an option in the drop down menu. Therefore your first header tag must be Header 2.

You may be tempted to choose header tags based on appearance. Don’t! Once you have the appropriate tag selected, you can then play with the formatting to change the font size or make it bold, underlined, or italicized. Just make sure that the format of the text is Header and not Paragraph. If you are in edit mode in Canvas and you click into or highlight the text, it will display the format in the drop down menu as in the image below:

screenshot of a header highlighted in Canvas in the Rich Content Editor and a Header 2 tag appearing from the Format dropdown menu

At the bottom of the editing window, you will also see an HTML tag that is being used. In the image above, an <h2> tag appears to correspond with the Header 2 (as opposed to <p> which would indicate Paragraph, or normal text).

Include Alt Text for Images

Images can provide helpful information to a reader. For those who cannot view the images, it’s important to provide some alternative text (or Alt text) to give the reader an idea of what they cannot see. Once you have your image on your Canvas Page (or any other area where the Rich Content Editor appears), select the image by clicking on it with your mouse. Then, click on the Image icon in the toolbar:

screenshot of the Canvas image icon in the Rich Content Editor toolbar

After clicking on the icon, the following pop up should appear:

screenshot of pop up window in Canvas where alt text can be entered

Type in the Alt text for your image (by default, the file name will appear there). Then, click Update.

For additional information on how to write good Alt text, check out the Alternative Text section on the WebAIM website. If you are using an image for decorative purposes, you can include blank quotation marks ("") in place of Alt text. This will tell the screen reader to skip over the image.

Use Descriptive Language for Hyperlinks

When a screen reader hits a hyperlink, it notifies the reader that the text is a hyperlink and then reads the name of the link. It’s always best for the visible text of the hyperlink to be descriptive rather than the exact web address. For example, if I wanted to reference ITG’s website, I would write it and link to it as follows: the Instructional Technology Group’s website (instead of http://www.emerson.edu/itg). The reader can still access the exact address if need be but does not have to wait for the entire address to be read. Also, if the link ever broke, the reader would have more contextual information to work off of should they need to find the website on their own. Check out WebAIM’s section on Links and Hypertext for additional information.

Tag Lists

Another type of formatting option that you might use is the bulleted or numbered list. These tags appear as follows in the Canvas Rich Text Editor:

screenshot Rich Content Editor toolbar with unordered and numbered list icons highlighted

I would encourage you to use these tags when it makes sense, rather than listing things without any tags. Perhaps you weren’t thinking of your text as a list, but if you’re describing a series of steps or perhaps have a list of definitions or names, why not tag it as a list? It’s going to make your text look more organized visually and will provide another way for a screen reader to make sense of your text.

Go Easy with Colors and Graphics

Color might not make a difference to a screen reader but for someone with limited vision, color contrast is important. You are going to get the best contrast using black text on a white background. You should also avoid associating the color of text with meaning since you may have students who are color blind. Finally, definitely stay away from any graphics that may be seizure inducing. When it comes to UDL and web design, clean and simple is key.

 

As you can see, all of these tips are fairly easy to incorporate. Perhaps you have used them before for aesthetic purposes. Now that you understand a little bit more about why they’re important, I hope that you will incorporate them more thoughtfully as you create content in Canvas. As always, feel free to reach out to us if you need help with the above steps.

Interested in learning more about accessibility? Check out the following Lynda.com resources:

 

Median User Testing April 6th and 7th

""

Emerson College is looking for a video streaming service to replace Median. Help us choose the best option while enjoying some tasty treats! Participants can enter to win a high-end wireless headset and portable stereo speaker.

 

Thursday April 6th from 10am-4pm in the Library Electronic Classroom

AND

Friday April 7th from 10am-4pm in Walker 418

 

What can I win for user testing?

A JBL Flip 4 Wireless Portable Stereo Speaker:
""

A Jabra MOVE Wireless Bluetooth Headphones:

""

Why get rid of Median?

We debuted Median in 2008 because there were no products available that did exactly what Emerson needed. At this point, the market for educational video streaming has matured and there are many good solutions available.

When is this happening?

Median will still be up and running through Summer 2017. We hope to have new uploads using the new system at that point while still keeping Median running.

When are you turning Median off?

No decisions have been made about that yet.

What happens to all my stuff?

We don’t yet know what the exact process will be for migrating content – it will depend on the system the community chooses. We will make information available as soon as we can!

Who will help me, and when?

ITG and IT will be running all sorts of trainings, as well as helping faculty one on one. Again, stay tuned for details!

What will I like about a new system?

Our hopes for a new system include:

  • Easier and more reliable uploads from anywhere
  • In-depth analytics that include how and from where your audience is engaging with your content
  • Ability to record screencasts
  • Improved branding, like the ability to choose your own thumbnail
  • Integration with Canvas