Accessible Content

This guide contains most of what you need to know about adding content and media to your course so that all of your students will be able to access and use it with as much ease as possible.

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
—Tim Berners-Lee, W3C Director and inventor of the World Wide Web

You might have seen the guidelines listed on this page before in the form of accessibility training; however, what is often not emphasized is that the practices that comprise accessible content are a subset of the practices that make high-quality, usable content that everyone can enjoy. For example, many of the efforts you would employ to ensure accessibility for the blind are also useful for people who read and take notes on a tablet.

By virtue of your status as an online course instructor, you are among the ranks of online content creators. As you build your online course, be aware of the following information to create the best experience possible for all of your students.

Electronic Text

Electronic text is what we read on the glowing rectangles we stare at each day. It can be highlighted, copied, and pasted from one program to another. It’s easy to take this innovation for granted, but it’s truly the backbone of the Web and the medium through which access to information is made possible for people with accessibility needs.

Formatting

The primary thing you need be aware of is the formatting of the text you create. This simply means telling whatever software you are using what a particular piece of text’s “job” is in your document. Highlighting and specifying text as a “heading” or a “bulleted list” are examples.

This is important for a number of geeky reasons, but by far the most important one is that the software used by people with visual and cognitive accessibility needs use this information to help them navigate through a page. You might be thinking, “But I always make my headings 18-point font and bold!” Visually, that’s fine. However, but we need to consider design beyond just how how text looks. Without specifying a formatting or style role for the text, screen reading software just recognizes a big blob of paragraph text.

In Microsoft Word and Google Docs, the menu for assigning a role to text is called “Styles.” In Blackboard, it’s called “Format.” The standard way to use this tool is to highlight some text, click the styles/format button, and select a role for the text, e.g., “Heading 1” or “Paragraph.” Figure 1 shows the location of the styles/formatting tool in these commonly used programs. (Note: Some things, like bulleted lists, have their own separate buttons in most text editor menus.)

Styles & Formatting in common apps
Figure 1. Styles or Formatting menus in common word processing applications and in Blackboard’s text editor

Color, Contrast, and Fonts

Aside from formatting your text, color and contrast are also something to consider. You can never go wrong with black text on a white background, but if you want to use different colors, make sure there is a high degree of contrast between the background and foreground. In other words, use a very light color for one and a very dark color for the other. Not doing so will at best give your students a headache and at worst make your text unreadable for students with visual conditions that affect color and contrast acuity. (See Figure 2 for examples of good and bad contrast.) We recommend using WebAIM’s Color Contrast Checker if you want to make sure that you have a high enough degree of contrast for your text.

If you’re like me, you can easily spend hours looking at and selecting fonts for a project on which you are working. Just be cautious about using “novelty” fonts, i.e., ones that have been designed to look like handwriting or are more decorative. They may be extremely hard for some people to read, so you should use novelty fonts sparingly for headings but not paragraph text.

Color Contrast Chart
Figure 2. Good and bad examples of color contrast for electronic text

Text Presentation

Where and how you post your text content online for your students matters in terms of readability, usability, and accessibility. In general, you want to keep the number of steps students have to take to get to your text as few as possible.

Text less than a page
Add text directly into your course with Blackboard’s text editor instead of making students download a half-page Word or PDF file. Plus, your course will be easier to update in the future.
Text more than a page

Avoid putting text directly into your course using Blackboard’s text editor. Blackboard’s default text settings are not ideal for prolonged reading. Instead, compose your text as a Google Doc, make the file viewable for anyone with a link to it, then add a web link to the Google Doc in Blackboard (either in your course menu or within an item).

A whole lot of text throughout the course
Some instructors have a large amount of of their own text they have written or have permission to use. In these cases, CTEL can work with you to put this text into Google Sites, WordPress or Scalar. See the Content Management page for more details.

PDF Files

The PDF format was created by Adobe to simulate a printed page and reproduce printed copies accurately on any electronic device. Since then, PDF has become a ubiquitously used go-to format to ensure a recipient can read a document. Unfortunately, the way the PDF format was designed is not compatible with accessibility software. This doesn’t mean that PDF can’t be accessible, but it takes extra effort (and sometimes extra software) to ensure that they are.  The easiest way to ensure accessibility and full usability is to not use a PDF at all. Instead, you can create an item in Blackboard, a web page, or a Google Doc is the most hassle-free way to ensure you aren’t excluding any students.

That said, sometimes all you have is a PDF. In those cases, please try the following recommendations.

Files generated from a MS Word file or some other program
See if you can highlight, copy, and paste the text of the PDF into a Google Doc. If you can do that, then there’s a chance your PDF might be accessible, but why not be sure and just link to your new Google Doc version instead? The rules from the section above still apply, so make sure you apply styles/formatting to headings, bulleted lists, etc. If you weren’t able to copy and paste any text or copying and pasting resulted in really messed up formatting, see the next section regarding PDF’s from scanned paper.
Scanned paper documents
These are a real bear. If you have scanned PDF files, there’s a very good chance that they actually contain no electronic text at all! Instead, what you see on the screen that looks like electronic text is just a photograph of the original page. Besides not being accessible in any way, they take a long time to print, take up more data storage space than an electronic text equivalent, are unsearchable, and cause issues for students who read and annotate text on an electronic device. Fortunately, you have some recourse:

  • If you received the scanned PDF from a publisher or somewhere else, find out if they have it available in HTML (a web page) or some other format.
  • If the PDF came from a full-text library database search a few years ago, search for it again. The provider might have updated their files to have electronic text versions.
  • If you generated this PDF yourself from a scan-to-email photocopier, contact CTEL or the Disability Services Center. We can run it through some text recognition software to convert it. If you have a lot of files like this, let us know, and we’ll collaborate with you to find a solution.
Mystery format
Send a copy of your PDF files to CTEL or the Disability Services Center if you’re uncertain about their format. We’ll test them with some accessibility software to see how they perform.
NOTE
PDF’s exported from Google Docs are NEVER accessible. Even when you followed the electronic text conventions above. Either link directly to the Google Doc, or save it as an MS Word file and post the .docx

Non-Text Media

“Non-text media” encompasses digital images, audio, video, and interactive elements. These types of media require that various steps be taken to ensure that all students can access the information contained within them. Many of these steps are necessary for students with accessibility needs, but they will also make interacting with your course’s content better for all students. For example, any text alternative for non-text media counts as an additional form of presenting information. Also, some students find it helpful to turn video captions on to help them focus or if English is not their native language.

Alt-Text & Functional Equivalence

Alt-text is an umbrella term that once referred to a specific HTML attribute, but it has since come to encompass a number of methods to provide textual alternatives to digital media. Typically, alt-text is associated with still images (.jpg, .png, etc.), but it can also be used in association with interactive media that does not provide built-in, accessible navigation. Note that if you’re using an image that is entirely decorative and irrelevant to the text, you do not have to provide alt-text.

Where Do I Put Alt-Text?

How you provide alt-text depends on the tool you’re using, but most if not all software or web services that allow you to insert images provide some way of adding it. When you insert an image, look for a text field labeled alt-text, description, or caption, and put your alt-text there. Alternatively, if the main text of the page or document you are creating explicitly addresses and describes that image, you can enter “Image described in detail in main text” or something similar. Just be clear that there’s alt-text for the image, and direct people to it.

What Should I Write?

Context matters. In order to be valid, alt-text needs to be “functionally equivalent,” which means the provided alt-text does the same job as the image. Therefore, you need to communicate the same information in your alt-text that you’re using an image to communicate visually Take a look at the slideshow to the right for an example.

What About Charts, Graphs, and Diagrams?

In many cases, a hierarchical text outline can take the place of diagrams; however, also be aware of the instructional context of your image. If you’re introducing a new concept, give a regular functional description of the chart or graph. or if you’re having students analyze a chart or graph as part of an assignment, quiz, or exam, a functional description may give away the answer. In the latter context, use a detailed, literal description of the chart that will enable someone who can’t see the image to reconstruct it in their mind or through other means. Consider the (fake) chart in Figure 3 and its corresponding functional and literal text descriptions as an example.

Fake Chart
Figure 3. Fake chart that corresponds with the example functional and literal text descriptions.
Functional Description: “This graph illustrates a strong correlation between the age of the visitor and the number of repeat visits to the website. The older the visitor, the less likely they were to visit the site again.”

Literal Description: “The x axis, which is labeled ‘visitor age,’ ranges from 18 to 75. The y-axis is labeled ‘number of visits.’ The majority of the data points are clustered in the lower-left side of the graph with a thin line of points trailing along the x axis to the right. Interpret the graph.”

Images of Text

An image of text is exactly that: A .jpg, .png, etc. that has what looks like electronic text in it but is instead a picture. You can tell the difference by attempting to highlight or search for the text listed in the image—it won’t appear in your search results, nor can you select it. Also, text in an image looks a little blurry around the edges compared to electronic text. If you have to use an image of text, write out that text as the image’s alt-text description.
This is electronic text.
Not Electronic Text

Video

If you’re using video in your course, it must be captioned. If your video is from a third-party, it’ll likely have captions already.

If you’re using the University of Maine system’s video hosting application, Kaltura, its automated captioning process will attempt to recognize the speech in your video and generate captions and a transcript. You’ll want to review the video’s caption file and correct any misinterpreted text within it. For simple videos of you lecturing, you may only have to make small corrections.

Before you start recording, consider the following:

  • Vocally describe any visual information being displayed on screen, including images and text. Your description doesn’t have to be a detailed, literal one, but it does need to be functionally equivalent.
  • Captions are preferable to transcripts. What’s the difference? Captions appear a bit at a time in synchronization with the video, while a transcript is a file that contains the textual version of everything said. A transcript is suitable for a basic “talking head” video or audio recording, but if you’re communicating any visual information in the video that changes over the course of the recording (like a slideshow), that information may be lost or difficult to discern in a transcript.
  • If you are unsure about something, reach out to us! We’ll help you come up with a plan for making sure your videos are accessible.

Audio

Audio clips with spoken words should be accompanied by a transcript. You can save yourself time and increase the quality of your recording by writing a script before you begin recording. If you follow it closely, it can be used as-is as a transcript.

If you’re using Kaltura to record an audio clip or podcast, it’ll attempt to automatically generate a transcript; however, you’ll need to check it over and fix any misidentified words. For more information on recording audio and video, consult our Kaltura page.


Feedback
css.php