Designing Accessible Web Sites

click here for a printer friendly version

Designing sites for universal access:

The web is a magical place, a place where you can be transported to places you have never before seen. It is growing rapidly, as magical places do, limited only by the imagination of the web site creators. As it continues to grow, users with special needs will increase. 1 in 5 Americans between the ages of 15 and 64 years has a disability. Almost 30 percent of all families in the United States are affected by a member who has some type of disability. (as measured by having an activity limitation - see the blue box at the end of this article.).

Web site creators will need to rethink their designs to accommodate them. Fortunately, designing a site for visitors with special needs is not difficult and often results in a much cleaner and more usable site. By making a few simple changes to the site web site designers will be able to enjoy visits from people from all walks of life.

What are these special needs likely to be?

Visually impaired (blind, color-blind)

Deaf

Motion impaired; difficulty using a keyboard or mouse

Cognitive impairments

Text only browsers (Lynx)

Good web design will automatically accommodate many special needs visitors. For example, clearly specifying the purpose of a page and laying out the navigation logically without relying solely on Java-Script, as well as using alt tags for images, would help all visitors. After all, you never know who will be visiting with their graphics turned off because they must pay for every microsecond of time. Or perhaps they will be using an older browser that does not recognize java scripts. Designing accessible sites often means offering two different methods to achieve the same goal.
It helps to understand how people with special needs envision the web. Blind people typically use screen reader software, which reads the page to them one word at a time, row by row. Think about this for a moment. When you first see a web page, your eyes take in the whole layout - the headers, subheaders, side topics, advertisements, etc. You can quickly see the purpose and organization of the page and skip right to the information you need.

Below is a clear gif:

People who use screen reader software do not have this advantage. Their. reader. reads. one. word. at. a. time. straight. across. the. page. including. any. alt. tag. information. Think of how confusing top listed links must be! The way to avoid this is to either label your links as links (confusing to the sighted visitor) or use a clear gif with the alt tag information "Navigation bar.

Home

The speech synthesizer will read the alt tag information and then the links. Invisible to the sighted user, this trick is invaluable to those trying to make sense out of a series of seemingly unrelated words being spoken by a speech synthesizer. You could also use a bracketed layout, like this: [link] [link] [link]. The speech synthesizer will read this as, "bracket link bracket bracket link bracket bracket link bracket."

Using ALT text is the primary method of explaining graphics used on the site. If the image is just decoration, use the description "" so the speech synthesizer will ignore it. If the images are links placed next to each other, make sure the ALT text has a trailing space, or is surrounded with brackets. Otherwise, the speech synthesizer will attempt to read all the alt texts as one long word. If the graphics are image maps needed for navigation or information, be sure to label each section with the appropriate ALT text and make sure the information is available in another way as well.

Consider using good sized buttons as the alternate method of access. This provides help to those with motion impairments who can’t click on a small area of a map as well as those that need the visual cues. Page layout and navigation should be consistent on all pages, i.e., always on top or on the left. This will aid visitors using small screens such as telephone devices, as well as visitors with special needs. If your links are going to open a new window or activate a Java-Script, make sure and tell that to your visitors.

Clearly labeled navigation is important to all users, not only those with special needs. While not underlining your links but showing them in a different color looks really cool, it is confusing for new users of the net who are looking for underlined links and impossible to interpret for users who are color-blind or using a black and white display.

Use color carefully. Approximately 8% of web users have difficulty distinguishing colors to some extent. Your colors should not be so dense as to appear black to a black-and-white screen, nor so alike in value as to appear identical to viewers who can’t differentiate between red and green, the most common form of color blindness. The foreground and background colors should contrast sufficiently with each other. Don’t use mystery links. If you need to put your cursor over a link to see where it goes, you are going to not only confuse new users of the web but also make it difficult for visitors with motion impairments. Try to stick with web safe colors - older screen readers have problems with non web safe colors. Web safe colors are easy to identify - the hexadecimal number will be three pairs of matching digits. The only digits you will see in a web safe color are: 00, 33, 66, 99, CC and FF.

A logical navigation layout, besides being good design, is essential for viewers who might be learning disabled, or using a speech synthesizer. A logical design uses HTML tags that identify text for what it is and not just how it looks. For example, headings should be marked up using proper <H> tags. Speech synthesizers can read this HTML and will give proper emphasis to headings and subheadings if they are marked up with the <H> attribute. A properly marked up web page can be imported into Word with the headings (H1) and subheadings (H2 etc.) displaying as an outline. Again, a benefit for the visually impaired who may need a quick review of your site. Incidentally, images can be surrounded with <H> tags if you wish to give the images’ ALT text special emphasis.

Another example of a logical markup is the use of the <EM> tag rather then the <I> tag. The <I> tag gives text an italic look. The <EM> tag gives text an italic look and an emphasis while being read by a speech synthesizer. <STRONG> works in place of <B> the same way. Also, all attribute values must be quoted, even those which appear to be numeric, as many screen readers rely on those quotes. They maybe required for sites having to abide by government guidelines fo accessibility, too. For example, a correctly quoted attribute value would be <table rows="3"> not <table rows=3>.

Does your site rely on scripts, applets, plug-ins or frames for navigation and/or information? Provide a second way for users to obtain the same information. For example, audio clips should be accompanied by a transcript for the deaf user. Video clips should not be essential to the information presented on the site. If they are, you may want to consider including a hyperlink to an information page which will convey the information in a textual manner. Animated presentations should have an explanatory ALT description for the visually impaired. Don’t make this description too long, however, some speech synthesizers have size limits.

Keep in mind that your text will be read straight across - if you have a picture in the middle of text, the speech synthesizer will read, "text text text picture description text text." It’s often best to align the picture to the right or left of the text so the alt description is read separately. If you really like the look of the surrounded picture, use brackets in your alt description so it will be read as, "text text text bracket picture description bracket text text." Frames are difficult for a speech synthesizer to interpret. If you must design your site in frames, label the top frame clearly with alternate navigational methods.

To assist motion impaired users, navigation options should be clearly labeled and easy to click on. The words "click here" are not the best choice as a motion-impaired user may not be able to hit a target that small. Use descriptive text instead. Avoid the use of the "drop down-box-and-[GO]-button." This is an unnecessary bit of extra clicks even for people without motion impairments.

If you use tables for your layout, keep all the information pertaining to a topic in one cell. Remember that a speech synthesizer will read cells next to each other in sequence. If you have information that is more than one cell long, use shift-enter to keep all the material in the same cell. Avoid very complex tables to display content, if possible. If the table is too complicated, it may confuse the screen reader. If you must use these tables, set short-cut keys and specify the tab order of your elements.

Using bulleted lists are often a good way to present information. Besides being visually attractive and easier to read, numbered lists make it easier for people who are listening to the information. If you use an image as your bullet, be sure to give each image the appropriate ALT text.

As a double check, run your text through a spelling and grammar checker. Speech synthesizers will always try to read a word, even if it is misspelled.Run your page through the validator at http://www.cast.org/bobby/. Bobby is a Web-based tool that analyzes web pages for their accessibility to people with disabilities. Bobby will examine your site and give you a report indicating any accessibility and browser compatibility errors found on the page. Once all the pages of your site receive a Bobby Approved rating, you are entitled to display a Bobby Approved icon. This is a real feather in your cap, so do it today!

For more information, visit:

Physical impairments are wide and varied. They include conditions such as muscle weakness, paralysis, joint discomfort, and spinal injuries, or disease processes such as arthritis and muscular dystrophy. cerebral palsy, mental retardation, autism, traumatic brain injury, or stroke. Speech problems can also result from several disorders affecting nerves and muscles including ALS, dystonia, Huntington's disease, multiple sclerosis, and muscular dystrophy.

People Who Are Deaf or Hard of Hearing or have a speech disability
Increasing prevalence of Web multimedia content that includes dialogue and sound but does not include captioning. Additionally, with the growing popularity of speech recognition interfaces, people within the deaf culture who have limited speech capacity

People with Physical Disabilities and Motor Impairments
For people with physical disabilities or motor impairments, accessibility issues can take on a wide range of challenges. Some people have use of their hands while others do not. Some have the ability to use mouth sticks and head pointers while others rely on infrared devices.

People with Cognitive or Neurological Disabilities
Individuals with dyslexia, dyscalculia, and auditory perception difficulties benefit from information being presented in short, discrete units. Easily digestible chunks of data make the important points in your content stand out as well. Some neurological conditions can result in users being sensitive to excessive flashing in animations or blinking that occurs within certain ranges of frequencies. Seizure disorders have been known to be triggered by such events. Any time that the eye is distracted from the real content of the page, your meaning may be lost.