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 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.
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.)
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.
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.
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.
“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.
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
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 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.