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.
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.
- Provide a table of contents for easy navigation
to all components of your course
- Resource Highlight:
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
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.
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.
- 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.
- 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.
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
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
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.
- When coding font size in HTML, choose relative sizes (small,
medium, large or ems) instead of absolute sizes (pixels).
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.
If you determine that you do want to post your PowerPoint™ slides
online, your options are as follows:
- Use a conversion tool that creates an accessible
HTML version of your slide presentation
your slides as a PowerPoint™ file
- 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.
- Provide PowerPoint content
in a video format.
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.
- Provide audio descriptions for visual elements in video clips.
- 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.