Ten Simple Steps Toward Universal Design of Online Courses

Implementing the principles of universal design in online learning means anticipating the diversity of students that may enroll in your course and planning accordingly. These ten key elements will greatly enhance the accessibility and usability of your course for students with and without disabilities.

1) Content first, then design.

Photo of professor planning coursePlanning online courses with accessibility AND usability in mind can save hours of time down the line. Here is a suggested process for planning your online course.

  1. Determine what elements and content you will include in your course.
  2. Use outlines or concept maps to plan flow of content.
  3. Familiarize yourself and/or seek training to learn what is possible with the course management system you are using.
  4. Develop a navigation scheme that is based on your outline or concept map.
  5. Consider the other 9 tips below as you develop your content.
  6. After you have completed these steps, begin to post content.

 

2) Provide simple, consistent navigation.

Image of Course Menu from WebCT Course

  • Be consistent throughout your course.
  • Use concise, meaningful text for links.
  • To the extent possible, avoid requiring students to drill down multiple times to reach your content.
  • Provide a table of contents for easy navigation to all components of your course
  • Resource Highlight:

    http://www.jimthatcher.com/webcourse4.htm

 

3) Include an accommodation statement.

  • Include an accommodation statement in your syllabus and in other introductory materials.
  • Make sure that the link to your disability services office website is included.

At the beginning of every course, I think every teacher should make the learning environment safe for her students...to come to her if they're having some concerns...I learned as a brand new professor that if I didn't tell someone, 'If you have a problem, come to me,' that many times the students waited until the very end of course when they were making a C and they wanted to make an A, and then they came.

Jennifer Hune, Professor, UALR  

4) Choose CMS tools carefully.

While many of the tools that are a part of most popular course management systems support helpful instructional strategies, they may present barriers for some students. An awareness of the potential barriers may help you determine when to use, when to avoid, and when to provide alternatives to these tools.

Testing and Quiz Tools

Image of Quiz from WebCT

  • Students who use assistive technology - Currently, some of the testing tools have compatibility problems with some screen reader technologies. This occasionally results in the screen reader program crashing during an exam. A good practice would be to have a mock exam available for students to try so that they will know ahead of time if their assistive technology will work with your exam. If it does not, an alternate version of the exam will need to be provided.
  • Students receiving the accommodation of "extended time" - Because students with disabilities are often allowed the accommodation of "extended time on exams", it is important to be able to provide this accommodation in an online setting as well. In most course management systems, it is possible to adjust an individual student's exam length, but it is not always simple to do this. In some cases it is necessary to set up a different exam for the student who needs extended time. Consult with your IT staff on how to set this up when you have a student who is eligible for this accommodation.

Suggested practice:

Make a practice exam available for students to try to make sure your testing format is compatible with their technology.

 

White Board

  • Students with vision loss - When using this tool, remember that students who are blind will not have access to what you write on the board. Because it creates an image instead of text, a screen reader will not be able to capture that text and read it. Some students who use magnification software may also have difficulty seeing what is written on the whiteboard. Be sure to have alternate formats of the content provided on the white board for these students.

Real-Time Chat

  • Students who are blind - The chat features associated with most course management systems are incompatible with screen reader technology.
  • Students with learning disabilities - Because of the fast pace of chats, students with learning disabilities that affect reading are at a decided disadvantage when it comes to participating in real-time chats. These students may also be reluctant to provide input into the chat due to concerns about their reading and writing skills.
  • Students for whom English is a second language - The barriers described above also apply to these students. This category includes some students who are deaf who use American Sign Language as their primary language.
  • All students - Finally, chat also presents a problem for the many students who take online courses because of their complex schedules. One of the advantages of online courses lies in their asynchronous nature. When students are required to be at their computer at specific times to participate in class discussions, the convenience of online learning is reduced.

Suggested Practice:

Because of the many barriers that the chat tool presents, it is often recommended that it be used as an optional tool only. Acceptable uses might be using chat as a way for students to access a professor during office hours or as a method for students to work together on a project—as long as alternatives are available such as phone, discussion board, or email.

CMS-Based Email

  • Students who are blind - Navigating the email tool in some course management systems requires more 'clicks' or keystrokes than should be necessary to access email. Consider giving students the option to receive course email through their regular email account or set up a course email list using an accessible platform.

New Window Feature

  • Students using screen readers - Most course management systems are set up in multiple frames. Each frame is like a separate browser window. To the visual user, it looks like one big window, but if you are using a screen reader to access the site, it is like navigating through several windows. When professors set up their course so that content opens in a new window it adds to the confusion because it becomes necessary to locate yet another window.
  • Students using other assistive technologies - Students with learning disabilities sometimes use text-to-speech software that may require them to reset their software when a new window opens. Keeping the use of new windows to a minimum reduces the effort needed to navigate your course.

Suggested Practice:

One reason that instructors choose to have contents open in a new window is that it makes the content more "printer friendly". Problems printing content from a CMS result from the fact that it is in multiple frames. Teach students using a PC to right click on the content they wish to print and choose print. This will allow them to print only the content in that frame.

5) Model and teach good discussion board etiquette.

Image of Discussion Board in WebCT

  • Encourage use of good discussion topics.
    • Like this: Question about Assignment #2
    • Not like this: Question
  • Take advantage of threaded discussion
    • Many students are in the habit of creating a new topic heading rather than replying to the previous one. Teach students the advantage of keeping the discussion board organized so that they can scan by topic. Good use of threaded discussions greatly reduces the need for all students, especially those using screen readers, to open messages in order to determine their relevance.

    Suggested Practice:

    Provide students with tips for posting to the discussion board. You are welcome to take these and modify them for your use.

    Discussion Board Guidelines

 

6) Use color with care.

Provide good color contrast.

  • Black text on a white or light background is the most readable.
  • Patterns and images behind text make it more difficult to read.
  • If you are creating an HTML document to post in your course, consider using CSS to assign colors. This allows the user to change the way colors are viewed if desired.

Do not use color alone to convey meaning.

  • Students who are color blind - The use of color to convey meaning may result in your images or information not being accessible to students who are color blind.
  • Students who prefer to work from printed documents - Some students may choose to print materials using a black and white printer. The images would not be meaningful once printed.
  • Another way that color is sometimes used to convey meaning is to differentiate items in a list. For example, a professor may write the following: "All assignments in red must be completed in APA style." This poses a problem for students who are blind and students who are color blind. The use of color is not discouraged altogether. There are definite advantages for other students. It is possible to meet the needs of all of these students by adding a symbol along with the color change to indicate meaning.

7) Provide accessible document formats.

HTML

  • Pages designed in well-coded HTML offer the ideal format for providing documents over the Internet.
  • The use of Cascading Style Sheets (CSS) for formatting and design enhances usability even further.
  • If you want to design your own pages, but do not know HTML or CSS, a good Web Page Design application can help.
    • Macromedia Dreamweaver™ is recommended as the program that creates the most user-friendly code in terms of accessibility.

      www.webaim.org

MS Word™

  • Use formatting tools correctly.
    • When you create a word processing document using the formatting tools correctly, you are one step closer to having an accessible web page.
    • Another advantage of this feature is that you can immediately create a table of contents for your document.
  • Saving as Web Page
    • When you use the "Save as Web Page" feature in MS Word™, the application automatically inserts Microsoft™ proprietary code, making the page slower to load and less friendly to screen reader users.
    • Another problem with this added code is that it makes it much more difficult for someone who knows HTML to make changes to or maintain your web page.
    • Here are some programs that can help you "clean up" the code created by MS Word™:

    • Resource Highlight:

    www.webaim.org/techniques/word

Adobe Acrobat™ PDF Documents

  • PDF files are only as accessible as the document from which they were created.
  • PDF files created before Acrobat 4.0 are totally inaccessible as they are simply images of the original document.
  • Some PDF files created more recently are also only images because they have been created by scanning the original document as an image.
  • Because of the many problems with accessibility of PDF, it is still recommended that an alternate file format be posted along with the PDF—preferably HTML.
  • If you have a PDF document and do not have it in another format, you can get it converted to text by using the www.adobe.com/products/acrobat/access_onlinetools.html.

Resource Highlight:

www.webaim.org/techniques/acrobat

8) Choose fonts carefully.

  • Choose a sans serif font such as Arial or Helvetica for your text. These fonts are easier to read for most people but especially for those with low vision.
  • Make sure font sizes are large enough to read comfortably.
  • Limit the amount of text provided in graphics because images may not magnify gracefully enough to be readable by those using magnification software.
    • For example, this graphic that says "Homework Corner" is clear to a sighted person, but when it is magnified, as shown below, it becomes pixilated and the outlined font makes it more difficult to read.
    • Homework Corner Graphic Shows use of ornate font
      Homework Corner Graphic magnified to show pixelated edges
  • When coding font size in HTML, choose relative sizes (small, medium, large or ems) instead of absolute sizes (pixels).

Resource Highlight:

The American Printing House for the Blind has conducted research on the elements of a font make it most readable by people with low vision. They have incorporated their findings in the development of a font called APHont.

You can download this font from their website: http://www.aph.org/products/aphont.html

9) Convert PowerPoint™ to accessible HTML.

Consider This First

Before you begin reading this section, stop and think for a moment about your use of PowerPoint™ as a medium for providing information to students online. We are all guilty sometimes of getting trapped inside the box instead of thinking outside of it. We use PowerPoint™ in class, so we automatically think about how to use it online.

When converting PowerPoint to a video format, make sure that the player can be operated by using keystrokes as well as the mouse. Keystrokes are preferred by some people with disabilities that limit manual dexterity and people with vision loss.

Conversion Options

Image of PowerPoint MenuIf you determine that you do want to post your PowerPoint™ slides online, your options are as follows:

  1. Use a conversion tool that creates an accessible HTML version of your slide presentation
  2. Provide your slides as a PowerPoint™ file with no conversion
    • Provide students with a link to the
      http://www.microsoft.com/downloads/
    • If slides are primarily text, create and provide an outline version of your PowerPoint presentation.
    • If slides are primarily images, be prepared to provide a detailed description of them if a student who is blind enrolls in your class.
  3. Provide PowerPoint content in a video format.

10) If it's auditory make it visual; if it's visual make it auditory.

Image of pie chartFinally, because student learning styles vary, providing opportunities for students to engage with materials in a variety of ways makes the course richer for everyone. Incorporating these diverse strategies may be time-consuming, so this section is divided into two levels.

  • Level 1 items are those that should be considered when a course is being developed and implemented before it goes online.
  • Level 2 are those items that course designers should work toward as the course is further developed. If you have a student who is deaf, hard of hearing, blind, or who has low vision, enroll in your course these elements will need to be implemented right away.

Level 1

  • Use graphs, charts, drawings and photos whenever possible to augment text.
  • Add "alt text" for photos, charts and images used in your course. "Alt text" should describe briefly the nature of the visual element.
    • Code example: <img src="images/myphoto.jpg" alt="Photo of your professor at her computer" / >
  • Add an empty "alt" tag for any images that are purely aesthetic.
    • Code example: <img src="graybar.gif" alt="" />
  • Prepare typed transcripts of audio and video clips.

 

Level 2

Image of video clip with captions

  • Provide captions for video clips.
    www.webaim.org/techniques/captions
  • Provide audio descriptions for visual elements in video clips.
    http://ncam.wgbh.org/richmedia/tutorials/audiodesc.htmlexternal link
  • Provide detailed descriptions of charts, photos, and images that are vital to your course.
    • For example, a graph that is part of the research you are describing in your course content should be described so that someone who cannot see the graph, still has access to the data provided.
    • You may need to seek assistance when writing your descriptions so that they will be optimally beneficial to students with vision loss.


End of Tutorial. Return to interactive version of this tutorial.