technology tip of the month Pointer and Clicker Article

 

metaphor

December 2000 - Accessible Online Course Design
By: Virgil Varvel
Keywords: accessibility, printer friendly, Web documents, online courses; Web design; enabling technology; usability; accessible; course design

printer Printer Friendly Version

Introduction

When designing an educational web site (or any web site for that matter), how often does one step away from what one knows and analyze the course from the perspective of one who is disabled? It is very easy to forget that such a perspective exists, and even easier to create a website that leaves behind the disabled. Yet, when a few simple rules are followed, an enabled environment can be created that provides all individuals with useful access to the information presented on any website.

Why Should Anyone Care?

It's almost difficult to acknowlege this question. A better question might be, why would someone ask this question? Nevertheless, there are several appealing reasons why someone should care about the accessibility of their web site.

  1. Because compassion and good sense should require it.
  2. From a business standpoint, the disabled are consumers, and if you ignore them, you lose their business.
  3. A well organized page, especially one with a text-only equivalent, is more accessible to search engines as well. If one wants an easily catalogued web site that may be selected in searches by a search engine, then one should design an accessible web site.
  4. All accessibility guidelines, not only make a web site more accessible to those with a disability, they make the web site more accessible to everyone. Cleaner code and more robust web sites result from taking the guidelines below into consideration.
  5. Because it may be the law. Don't underestimate the political power of the disabled. Many laws exist which may require your group to provide web accessible options to your web site. Since the expansive nature of the web is relatively new, there is little case law to consider, but that doesn't mean that the ADA and other regulations may eventually provide legal recourse to the disabled when a public web-site does not take them into account. This is especially true in the public education arena.

What Are the Issues and How Can These Issues Be Addressed

A variety of rules have been compiled by various sources, providing rules for addressing the various issues that disabilities bring into web site design. A link is provided at the bottom of this page to various guidelines pages that were used to compile this listing. The rules are discussed below, along with some others that were not found directly within any of the guidelines but which are nevertheless important considerations. Within each guideline, the issues addressed by that particular guideline are discussed.

Transcripts, captioning, or both - Today, more and more instructors are utilizing multimedia content within their online materials. From a pedagogical standpoint, the use of multimedia can provide a more vibrant learning aid to the student. However, the multimedia is only serving its purpose if the student can access the information. Sometimes, this access can be limited due to unforseen technological problems such as browser incompatibility, but this access can also be limited due to a disability. Therefore, the content should be modified or presented in various forms so that all students can have equivalent access. Multimedia such as an audio lecture or video should contain captioning, or be presented with an option to download and view transcripts. Such accomodations allow hard of hearing or deaf individuals to access the information in an alternative form. Furthermore, it is important to include notes such as emphasis and off camera audio descriptions so that the person reading the transcript can construct a feeling of the tone of the discussion and the interactions taking place.

Descriptive transcripts - Transcripts, as they are commonly used, provide a useful form of information for the deaf, however, they do little to help those with poor vision. Sometimes, multimedia content includes visual contextual cues that set the stage for the delivery of the content. Therefore, if video is being presented that includes contextual cues, an alternative audio stream should be presented in which the visually impaired can create a visual image of the video's surroundings based on the words given in the audio stream. This same principle holds true for graphs and charts. Always give a description of the graph or chart for the impaired viewer. Providing description is useful both for accessibility reasons, and for pedagogical reasons, as it provides alternative methods for information acquisition.

Image tags - Anyone with visual impairment will not be able to accurately see images presented on your web site, assuming they can even see them in the first place. In HTML, the alt attribute provides a fix to this problem. Usually, the alt attribute is described as being useful for those who have the images turned off by their browsers. Well, one of the largest groups of users who might be inclined to have images turned off is those who can't see the images in the first place. Also, some users turn images off because the time required to download a web page over a modem can be substantially reduced when the images are not downloaded. Using the "alt" attribute in HTML allows the programmer to provide an alternative text description of an image when the image is not displayed or when the image cannot be seen. This alternative text can range from a simple description of an image (making sure to bring out any key points within the image) to a description of the function of the image (such as a click here to return to the home page button). Descriptions of images are especially important in the case of a table, chart, or graph, in which information is usually provided only via visual interpretation.

Image Size - Usually, in web design, smaller (up to a point) is better. A smaller image size means a smaller file size and thus, the page can be downloaded faster. Sometimes, the images have to be made slightly larger if the image is conveying an important piece of information or if the image is being considered for artistic reasons. Even then, the image may still not be large enough for a visually impaired individual. Therefore, in addition to the captioning described above, consider including an option whereby the user can click on a link that will lead to a larger version of the image. The largest size of image that one wants to work with is 640X480 pixels, however, since anything larger is unlikely to fit on a single screen in most cases.

Color Blind Proof Images - Just because an image appears to show an image, doesn't mean that everyone with vision will be able to see it as it was meant to be seen. A large number of individuals are color blind, and this group may be the most often overlooked group, even on websites that take pains to insure that their site is accessible to all. To facilitate interpretations by the widest audience, don't use color combinations or transitions that might make properly seeing the image difficult for a color blind individual.

Image Maps - Image maps can provide a nice graphical way to maneuver around a web site, however, this can add difficulty to a disabled viewer. To alleviate any problems, use client-side maps with alternative tags for links. You might even go one step further and provide an alternative text-only version.

Avoid Frames if Possible - Frames are not as commonly used as they once were. More individuals are looking towards templates and tabled information displays. However, frames are not antiquated and can still appear to be very useful to relay information in an organized fashion. Unfortunately, many software packages tailored to the disabled student will not relay the information as it is intended. Usually when considering design, visual interpretations are used by the site designer. Instead, one needs to take a step back and view the site from multiple perspectives. Will someone with a text only browser be able to view the material presented on a page? Probably not if it is a framed page. Therefore, when considering site design, look for alternatives to the frame layout, or make sure you use the <NOFRAMES> attribute. You will likely come out with a site much more accessible to alternative users and you will also probably come out with a better looking site devoid of frames. When using NOFRAMES, make sure to keep the noframes content up to date when updating the framed material. This step can be easy to forget.

Carefully Design Tables - It was already mentioned that tables can be an alternative to frames on a page, but not all tables are equal. Some viewers read the information on the screen as a person would read a book. Everything on a given line is read from left to right, and then the next line is read. This method can render a tabled page meaningless as content from one cell of the table is merged randomly (based on the window size of the program) with content in the adjoining cell. Several methods can be used to fix these difficulties. Any alternative text only versions of the site can likewise be without tables. The user can be directed to browsers that support accurate voice readouts from tabled information. Also, the information can simply be restructured so that a line by line readout is sensible. Furthermore, summarize the tabled data so that one can garner the same information without having to view the table itself. Finally, where possible, use CSS instead of tables for formatting the information, however, keep in mind that page must still be readable by non-CSS browsers such as Netscape 3.0 and WebTV.

Links - Many screen readers allow the user to listen to links out of their intended context. Thus, always make your links descriptive of where they lead. Creating descriptive links is simply good practice for any web site design and can lead to a more appealing web site even for the non-disabled viewer. Furthermore, a graphical link provides little indication of the purpose of the link to a blind viewer. Therefore, always provide alt tags for image links that tell not only what the image is, but what clicking on the image will do.

Organize - Organize the site and the pages within it well. The better organized the information is, the easier it will be for an impaired viewer to navigate, and the easier it will be for anyone else to navigate as well. Once again, making a web site accessible, simply makes a better web site in many respects. When organizing a page, make use of HEADING tags and other intrinsic HTML organization features. These tags will help to further organize the page for better viewing by all.

Offline Provisions - It is highly likely that a person with a disability will take a longer length of time to read and interpret your web site than a non-disbled person. This longer time can mean a longer time online and this can cost the individual money. Instead of hampering the student with an extra fee for viewing the information, a provision can be setup for such an individual can download the information and access it offline. For the most part, such uses will not result in a copyright violation due to the exemptions given to students with disabilities. The end result is a student that can access the information locally over a longer period of time as suits that individual's needs, and a more accessible course.

Symbols - Avoid symbols. Not only do some browsers display special characters differently, some text to voice software packages will be unable to interpret the special character. Therefore, avoid &'s and #'s type characters except where necessary.

Scripts, Applets, Active X, and Plug-ins - Some browsers simply will not support some of the advanced features of a web site. Therefore, an alternative version should be used to support these individuals.

Alternate Versions - This last item may seem a little extreme to some, but when the proper templates are developed, it can be accomplished with simple cutting and pasting of information. Perhaps the only way to guarantee maximum accessibility of a web site is to present the information in different versions. The range of possibilities range from an entire duplication of the web site in a text only, non-tabled, fully transcribed and described version, to a re-organization of the web site so that content that is particular prone to disability issues is duplicated in alternative forms that are readily accessible.

Preview - Along the same lines as creating alternate versions of a web site, one should always preview the site in a variety of browsers to insure that everyone will see the information as intended. This activity is good practice independent of the reasoning though. For example, many homes use AOL's browser or WebTV, and yet few programmers preview in these browsers, let alone some of the specialty browsers for the disabled. Links to some of these browsers can be found below in the links section.

Links to Other Web Sites Dealing with Web Design and Disability Issues

Editor's Note - These links have been placed within our database and are no longer linked below.

Tools for Making an Accessible Web Site
http://illinois.online.uillinois.edu/ionpointers/accessibilitylinks/tools.html

Tools for Making the Web Accessible to Disabled Individuals
http://illinois.online.uillinois.edu/ionpointers/accessibilitylinks/
accesstools.html

Web Accessibility Guidelines
http://illinois.online.uillinois.edu/ionpointers/accessibilitylinks/
guidelines.html

Accessibility Validation
http://illinois.online.uillinois.edu/ionpointers/accessibilitylinks/
validation.html

Federal Laws Governing Accessibility
http://illinois.online.uillinois.edu/ionpointers/accessibilitylinks/
federal.html

National / Governmental Web Sites
http://illinois.online.uillinois.edu/ionpointers/accessibilitylinks/
governmental.html

General Web Accessibility Web Sites
http://illinois.online.uillinois.edu/ionpointers/accessibilitylinks/
accesswebsites.html

Specialy Web Browsers
http://illinois.online.uillinois.edu/ionpointers/accessibilitylinks/
browsers.html

Operating System Specific Web Sites
http://illinois.online.uillinois.edu/ionpointers/accessibilitylinks/os.html

ION Home | Pointers and Clickers