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
1) Content first, then design.
courses with accessibility AND usability in mind can save hours of
time down the line. Here is a suggested process for planning your online
- Determine what elements and content you will include in your course.
- Use outlines or concept maps to plan flow of content.
- Familiarize yourself and/or seek training to learn what is possible
with the course management system you are using.
- Develop a navigation scheme that is based on your
outline or concept map.
- Consider the other 9 tips below as you develop your content.
- After you have completed these steps, begin to post content.
Back to Top
2) Provide simple, consistent navigation.
- 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.
Back to Top
JimThatcher.com: Tutorial on Accessible Navigation
3) Include an accommodation statement.
- Include an accommodation statement in your syllabus and in other
- Make sure that the link to your disability services office website
Back to Top
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
- 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
Because students with disabilities are often allowed the accommodation
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.
Make a practice exam available for students to try to make sure your testing format is compatible with their technology.
- 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.
- Students who are blind - The chat features associated with
most course management systems are incompatible with screen reader
- 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.
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.
- 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
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
- 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.
One reason that instructors choose to have contents
open in a new window is that it makes the content more "printer
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.
- 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.
discussion board example in WebCT
Back to Top
Provide students with tips for posting to the discussion board. You are welcome to take these and modify them for your use.
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
- 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.
- Here is an example of a map where color was used
to convey meaning and another showing how it was improved to increase
- 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, as illustrated in this example:
Back to Top
7) Provide accessible document formats.
- 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.
Resource Highlight :
Project PACE Web Access
- 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.
formatting in MS Word™
- 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
- 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™:
Tutorial: Microsoft Word Accessibility Techniques
Adobe Acrobat™ PDF Documents
- PDF files are only as accessible as the document from which they
- 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
- If you have a PDF document and do not have it in another format, you can get it converted to text by using the
Online Conversion Tools provided by Adobe.
Back to Top
Printer-friendly formats of this tutorial:
Ten Steps Toward UD (HTML)
Ten Steps Toward UD (RTF)
Ten Steps Toward UD (PDF)
Acrobat PDF Accessibility
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 students using magnification
- 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
- When coding font size in HTML, choose relative sizes (small,
medium, large or ems) instead of absolute sizes (pixels).
Back to Top
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: American
Printing House for the Blind
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. The following page may help you determine if you
want to use PowerPoint™ in your online course:
Does Presenting Online Content with PowerPoint™ Serve
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.
If you determine that you do want to post your PowerPoint™ slides
online, your options are as follows:
Provide your slides as a PowerPoint™ file
- Use a conversion tool that creates an accessible
HTML version of your slide presentation
Provide PowerPoint content in a video format.
- Provide students with a link to the
- 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.
Back to Top
10) If it's auditory make it
visual; if it's visual make it auditory.
Finally, 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.
- 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.
- Provide captions for video clips.
WebAIM Tutorial: Captions
- Provide audio descriptions for visual elements in video clips.
NCAM Tutorial: Creating Audio Descriptions for Rich Media
- 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.
Describing Graphs for Accessibility
End of Tutorial.
Back to Top