Designing ’Accessible’ Web Pages for People with Disabilities  pwp home  >   Reference Library  >   Optimizing  >  Accessible Pages

Web developers should be aware of the diversity of people who may visit their sites. Some visitors cannot see graphics because of visual impairments, either blindness or limited vision (the needs of these visitors are the most challenging to meet for the designer, and are most fully addressed here.) Others cannot hear audio because of hearing impairments. Still others have learning disabilities that cause difficulty when screens are unorganized, inconsistent and cluttered and when descriptions and instructions are unclear. If designing with these visitors in mind is important to you, it may have the added benefit of making your site more cleanly designed, and more useful to all, including those surfing with older browsers, without the latest plugins, or with image loading turned off.

GENERAL INFO: The blind and visually impaired often use screen readers to access the Internet, and keyboard commands to navigate. These screen readers convert what is on the screen into speech; but the browser still is responsible for the display the screen reader sees. Some new browsers, such as pwWebspeak, are specially designed for the visually disabled, but most people are still using Lynx, a text-based browser, Netscape or IE. Screen readers read an entire line of text, straight across; we'll see the problems this can cause with links, images, tables, etc. Don't use 'cutting edge' technology if you want your page to be accessible to users of speech readers, as well as those with older browsers.

PAGE DESIGN: To make information easier to find and access, maintain a simple, consistent page layout throughout your site, with buttons and navigational links in the same places on each page, headers in a standard format, etc. This benefits users with learning disabilities as well as the visually impaired. Make sure the text and background colors contrast well. Even my aging eyes appreciate this! Don't use complicated backgrounds with poor contrast, as those with visual impairments often invert screen colors. Extremely busy backgrounds can create 'noise' that may distract some viewers with learning disabilities or attention deficit disorder.

TEXT: Users with low vision often adjust text size upwards for easier viewing. Use proportional font size markups (either size="+1" type markup or header tags) rather than specifying font sizes so the text stays proportional when adjusted. Remember also that this user-adjustment may affect layout, so the simpler, the better. Screen readers have problems with or freeze on things like blink text (the word will be lost if it is blinking off at the moment) and marquees (which are read letter by letter and can come out backwards). People with attention deficit disorder and epilepsy may be adversely affected by blinking or moving text, which also annoy the heck out of the rest of us <G>. So consider avoiding these, as well as uncommon typographic characters or constructions such as emoticons, etc. which screen readers can't read.

GRAPHICS: The two most important tips regarding graphics are:

• ALWAYS provide descriptive alternate text for browsers that can't display images. To provide alternate text for your images, write your img tags like this:
  

  <IMG SRC="mypic.gif" ALT="description here">

  And of course, include your height, width, border, and other attributes as you usually would. Don't use alt-text that just says "image"; if the graphic is just decorative and not at all useful, just use ALT="" and the screen reader will skip it (or decide not to use superfluous graphics <G>.) Try to make sure that the alt-text fits on one line when you specify height and width if the image in on the same line as text.
• Consider offering a text-only, speech-friendly version of your site, with a clear link to it on your home page.

Other tips: For images that appear in between text or next to each other, you can place a slash (/) before and after the alt-text string to distinguish it from the text around it. Graphics provided for users to download are a special problem. First, screen readers provide no way for someone to right click to download, so make the graphic a hypertext link to the file as well. Text-only browsers can handle those. Secondly, place an anchor to a fuller text description of a large downloadable picture right next to the anchor which downloads or pulls up the picture. In text-only versions of your page, replace references to downloadable pictures with references to the text files describing them. Image maps are special problems. Provide text alternative to image maps. This involves two things:

• Provide a listing of the imagemap links immediately below the image map, and set the alt-text for the image map itself to something like "image map text links below."
• Using client-side image maps, you can provide alt-text for each of the links. I always provide both server- and client-side images maps when I use them. Instead of using an image map, consider using a series of several images that each have their own alt-text.

LINKS: People who use screen readers to access the information on a Web page will often use the tab key to step through the links on a page. Although this allows users to more quickly identify links, they will not hear the surrounding text and will lose the context of the link. Never use the same phrase for different links, and make text anchors descriptive enough so that they make sense when read out of context. Place each link on its own line, or at least put spaces between links which occur consecutively. For links embedded in a paragraph, try to make sure only one link appears per line, if possible. You can still use graphics as links if you provide alt-text for them: ALT="this is a link to the exercise page."

FORMS: Some screen readers have difficulty entering and manipulating form components. Put a place holder like * in empty edit boxes if it won't mess up the output. Place each text entry field, radio button, and selection box on a separate line:
-------
Name_____________
Address: _______________
Submit
Reset
-------

It is often a good idea to also provide a form which can be downloaded, printed, filled in, then mailed or e-mailed back to you.

TABLES: The newest version of Lynx degrades basic tables nicely, but tabular presentation of text causes problems for people using screen reading software with other browsers because text is read by row rather than column. The best bet is to provide a non-tab version in your text-only version of your site.

LISTS: Screen readers don't know where lists begin or end; state how many items are in the upcoming list: "There are 5 ways to solve this problem". If a list entry takes two lines, it may appear to be two separate items. So use a bullet or a number for each item in a list (don't forget the alt-text for the bullets; I use alt="item" or the number of the item). These tips help learning disabled users follow the information as well.

FRAMES: All frames have URLs; they are simply separate web pages that are combined by the browser. So to provide access to those who are not "frame enabled", place a link to the individual pages on your home page and offer them as alternatives to the frames. Add these links to the page that you use to inform a browser that they cannot access the frames.

AUDIO FILES: People who are deaf or hard of hearing, as well as people without audio capabilities in their computer or browsers, cannot access information which is presented in auditory form only. Provide text-based alternatives to audio files, such as a thorough description or a transcript. The transcript has the added benefit for all visitors of making the file searchable for keywords. Place an anchor to the page with the transcript or description right next to the anchor for the sound. In your text-only pages, replace all references to sounds with references to the transcript or description. And for the visually disabled, alt-tag any graphics that you use as links to audio files.

VIDEO FILES: Text transcripts can be provided for videos just as they are for audio files. In addition, captions can be embedded in the data structure of a movie you are making with Quick Time to accommodate hearing impaired users.

SPECIAL "EFFECTS": Sometimes, designers use Meta tags to 'refresh' a page--to load a new page x seconds after loading the first. But be aware that screen readers may take longer to read a page than you allow for the refresh. Make these pages short. Using code to force a new browser window confuses the visually impaired because many navigate with the use of the history list and the back button, which are messed up with the additional window loading. And the learning disabled (and many of the rest of us) may have difficulty with the multitude of open windows. Include alt-text for Java applets, ActiveX components, etc., describing what it does: "Here is an applet that displays the words "Welcome to our Site."

TESTING: To make sure a page is speech-reader (or text-browser) friendly, try these two tests: View the page with image-loading turned off. Still navigable? Now (this may hurt), view the page in Lynxit!, an online program at http://www.slcc.edu/webguide/lynxit.html that will convert your site to text so you can see what it would look like on a text only browser.

While many of us still want to take advantage of all the bells and whistles available to us as designers, it is good for us to keep in mind these accessibility guidelines, especially for informational sites.