Do you have a question about accessibility?
For campus information
using Telecommunications
Devices for the Deaf (TDD).

Copyright © 2000.
Ball State University.
Muncie, IN 47306.
All rights reserved.
Equal Opportunity and
Affirmative Action.

Tips for Making Accessible Web Sites 

The following tips are based on a recommendation from  The W3C/WAI  Education and Outreach Working Group.¹ They are intended to increase an awareness of web design accessibility issues and offer suggestions about small changes to your web page that can expand its availability to everyone. Although not an in-depth study, the list covers the most common aspects of accessible web design. For more in-depth information, refer to the W3C Techniques for Web Content Accessibility Guidelines 1.0.

1) Images and animations: Use the ALT attribute for all visuals.

This is perhaps the single most important step in making websites accessible to blind users. Screen readers use this information to convey meaning and function to the user. In fact, ALT tags are beneficial to all web users. The ALT text is displayed in place of a image if the user has turned off graphics under his browser options. Some browsers also display it while the picture is downloading or when the user moves his/her mouse over the image.  Most graphical web design packages make adding an alt tag easy. For example, adding an alt tag under FrontPage is easily accomplished with a right mouse click over the image. Select Picture Properties and then select the General tab. Type your text into the text box under Alternative Representations.

2) Hypertext links: Use text that conveys the intent of the hyperlink even when taken out of context.

Screen readers only sound out the highlighted (underlined) portion of the link. It is very common to have  "click here" as the hyperlink. Unfortunately the screen reader would only sound out the words "click here" which would not provide enough information to a blind user as to the intent of the link. A better option would be to include the hyperlink as part of your statement. For example, "Investigate your responsibilities regarding accessible web site design at the new BSU Web Accessibility Initiative site." In this case, the screen reader sounds out the words web accessibility initiative site informing the blind user about the explicit intent of the link. 

3) Multimedia: Provide text transcripts and captioning of audio and video files.

A text transcript is a text rendition of the audio information. It should include both spoken words and any relevant sounds that are necessary to fully convey the message; for example, the sound of thunder that implies the emanate arrival of an electrical storm. Text transcripts not only benefit the deaf or hard-of-hearing users but can benefit anyone that prefers acquiring knowledge visually rather than audibly. You can simply post a text file up on the server and reference the file using a hyperlink. Under FrontPage, you could simply import the file to your site using the "file/import" option.

A caption is a text transcript for the audio track of a video file. Captions are usually synchronized with the video and audio tracks and are often superimposed over the video. Captions not only benefit users that are deaf or hard-of-hearing but can benefit anyone that cannot hear the audio, perhaps in a noisy room. For small projects, you may merely want to include a text transcript of the audio along with information about scene changes, graphics, body language or other visual cues. For large projects, you may want to seek out the captioning services available through the Teleplex.

4) Page Organization: Use headings, lists, and consistent structure.

W3C organization recommends using cascading style sheets (CSS) where possible to control layout and presentation. However achieved, it is important to maintain a consistent organization throughout the site; this will facilitate navigation by all users.   

Ensure that foreground and background colors contrast well; if specifying a foreground color, always specify a background color as well (and vice versa). Don't assume that all people see the same color. People with color sight deficiencies might not be able to recognize a particular color on the page. For example, don't ask that someone select all of red items from a list. You may want to consider the addition of a font effect or identify the list items through context and position.

5) Image maps - Use client side only.

Image maps refer to graphics that have been subdivided into unique areas called hotspots, each with its own hyperlink.  When defining an image map, always specify client side. In this case, the code will get downloaded to the browser where the screen reader can handle it properly. Remember that image maps are another form of graphic, descriptive text can be attached to each of the hotspots.

6) Graphs and charts - Summarize.

Fully describe all graphs and charts. A text summary, linked off the graphic, would be helpful. Remember graphs and charts are still images and should always have an ALT tag.

7) Frames - Label each frame with a descriptive title.

A user with a screen reader may lack the implied association between items in the different frames. Labels assist in clarifying the context to permit easy navigation.

8)  Tables - Identify row and column headings.

Always identify row and column headings for data tables. Summarize. Avoid using tables for column layout.

9) Scripts, applets, and plug-ins - Provide alternative content.

Many of the older screen readers and browsers do not support these functions. Providing content in an alternate format is useful.

10) Check your work - Use evaluation tools and/or turn off the images under your browser.

Perhaps the simplest evaluation of your web page is to view it with the images turned off. Can you still navigate the site? Free software is also available to check the accessibility of your site. Perhaps the most popular software in this category is Bobby at www.cast.org/bobby. The W3.ORG  WAI site also provides validation tools at www.w3.org/wai.

 _______________________________________________
¹ WAI Quick Tips Reference Card. Copyright  © 1998 - 2000 W3C (MIT, INRIA, Keio ), All Rights Reserved. Last Updated 18 December, 2000 by Judy Brewer (jbrewer@w3.org)