Accessible Web Design

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect." -- Tim Berners-Lee, W3C Director and inventor of the World Wide Web

HTML coding for Web Accessibility
A Text Version? Why?
A Directory or Site Map
Page Layout and Design Considerations
Adaptive Technology
Tools and Additional Information

Accessible Web Design requires the thought and consideration to designing and creating Web pages that can be successfully accessed by all people. Certainly, technical aspects of Web page structure need to be incorporated into the design process to achieve the goal of creating accessible Web pages. Also of importance to the design process, is to incorporate some common sense... for example, to think about how a person might see an intricately small font size if they had a visual impairment. Or to imagine how you could convey a message to a blind person, when you want to convey the message strictly with graphical images. Is there a better way to convey the information so that all people can easily access and navigate your page? Would a text alternative to the graphic page improve the accessibility? Or could the design be simplified so that all people can gain access easily, without sacrificing too many elements of your original design.

Always remember that communicating the content of the Web page is more important, than an overabundance of "flash" that is hard to access.

This page offers an introduction to Accessible Web Design, and it is hoped that Web design processes and techniques related to accessibility will be considered and applied to many or all Web sites of the future.

HTML coding for Web Accessibility

ALT text tags

ALT text tags are used in conjunction with the graphics code, to help interpret graphics to a person with a disability, such as blindness. The use of the ALT text tag is probably the single most important element in making Web pages more accessible, when graphical images are used within Web pages. Screen reader software cannot interpret a graphic unless an ALT text tag has been associated with the graphic. Using the ALT text tag should be standard practice when designing Web pages that contain graphics.

Example: ALT text tag is used to identify the Ohio State (Home) navigational button. Note that with most browsers, the text within the ALT text tag can be read when the mouse is run across the graphic.

Image maps and alt tags

ALT text tags also need to be included within Image Maps in order for the image map information and links to be accessible by all people and browsers.

The image map alphabet graphic shown on the Alphabetical Directory of Ohio State Web Pages contains an ALT text tag for each letter of the alphabet. Here is a sample of how the ALT text tags are incorporated into the image map code.

<MAP NAME="abcmap">
<AREA SHAPE="rect" COORDS="0,0,15,29" HREF="#a" ALT="A">
<AREA SHAPE="rect" COORDS="16,0,33,29" HREF="#b" ALT="B">
<AREA SHAPE="rect" COORDS="34,0,49,29" HREF="#c" ALT="C">
... through the letter "Z".
</map>

Note: Always provide a text equivalent to all non-text elements on a Web page.

Text Equivalents - Additional information from the W3C

Bullets and ALT Text Tags

It is becoming standard practice among accessible Web designers to include ALT text tags when using graphic bullets. The preferred element to include within the ALT text tag is ( * ). This is recognized by people who use screen reader software as being the equivalent to a graphic bullet.

<img src="http://www.osu.edu/graphics/lbutsp.gif" width="9" height="15" border="0" ALT="*">
(The ( * ) will appear when the cursor is run over the red bullet.)

A Text Version? Why?

Many persons with disabilities, such as low vision or blindness, cannot easily navigate the Web via highly graphical Web page designs. They must compensate for their disability using adaptive technology, that consists of hardware and software items designed to compensate areas of disability or impairment. Adaptive technology allows individuals with disabilities, the same access to information as their peers who are not disabled.

The availability of a text version to a Web site allows adaptive technology to work more easily in the conversion of text to computer generated voice output. This voice output allows a student with a visual or print impairment, such as dyslexia or blindness, access to Web pages. In addition, the simple layout of the text version, utilizing larger font sizes, and black and red highly contrasting text colors, provides easy to read pages for people with visual impairments and learning disabilities.

Most of the same information that is in our graphic version is also included in our text version. We are continually expanding our text version so it will eventually be as complete as possible. For additional information about Disability Awareness and Adaptive Technology see the Office for Disability Services Web site.

A Directory or Site Map

A text-based Alphabetical Directory or a Site Map can make your site easier to access by all people. The Ohio State Alphabetical Directory is a simple text based list of OSU Web pages. The list provides an alternative to accessing the site via complicated graphical navigations that may be a stumbling block to people with disabilities. The list also eliminates the need to "surf" and sift through the site for information, when a simple organized list makes accessing information a more timely experience. Complicated graphical Web sites are acceptable if alternatives to accessing the site are provided.

Page Layout and Design Considerations

Contrast

A Web page that has been designed using contrasting colors, will be easier to read for those people with visual impairments. A white background is the best choice for most Web page designs. White is used most commonly as a background for most printed pages, and also makes sense as the best choice for Web page backgrounds, since dark text seems easiest to read against white.

A black background is a second choice for background color as long as a white or very light colored text is used against it to create good contrast. A black background should be used in a limited manner though. It can be used as a way to create simple variety in a design, such as the headers on this page. A full page of white text against a black background certainly creates contrast, but seems to be harder to read than black text on white.

In addition to black text against white, and white text against black, red text is also a suitable color that creates good contrast against white, and is acceptable to those with visual impairments.
Textured backgrounds

should be used sparingly and cautiously, and in most cases, it would be wise to avoid textured backgrounds completely. Textured backgrounds have a tendency to greatly reduce the contrast between the background and text. Text has a tendency to blend in with a textured background, reducing readability, and thus complicating Web accessibility to the visually impaired.

If a textured background is to be used on a Web page. Experiment with it using text, and test it on several browsers. Tone it down and keep it subtle. Remember, it is a background, and should not overwhelm or overpower the content of the page.
Tables vs Frames

Text pages designed without the use of Tables or Frames, makes the most sense to screen reader software. A simple page of organized text is read simply by the reader software without the need to decipher tables and frames. After all, a person that is blind cares only that the text can be read to them by the reader software, and cares little about the fact that text has been placed inside a table to satisfy a visually aesthetic design need.

Never the less, visually oriented design considerations sometimes need to be met by many Web designers to satisfy the visually sited public. The use of Tables can achieve these goals, and a Web page designed with tables will be read effectively by reader software.

On the other hand, the use of Frames in a Web design can completely cut off the flow of information to the blind person, being that the reader software cannot decipher coding that uses Frames. Avoid the use of Frames whenever possible, but if you must use frames, be sure to provide a <NOFRAMES> version as an alternative way to access the information.

More about Frames and Alternatives to Frames for better Accessibility (See Chapter 10 under Contents)

Adaptive Technology

What is Adaptive Technology and Why is it Important?
Adaptive Technology Training Center and Computer Lab - The Ohio State University

Tools and Additional Information

The Web Accessibility Center (WAC) - The Ohio State University
Office for Disability Services - The Ohio State University
Center for Applied Special Technology (CAST) - CAST is an educational, not-for-profit organization that uses technology to expand opportunities for all people, including those with disabilities.
Bobby - Bobby is a Web-based tool that analyzes Web pages for their accessibility to people with disabilities.
W3C World Wide Web Consortium
W3C - Guidelines for Making Web Content Accessible

return to top

The Ohio State University

www.osu.edu