Learning Objectives

• Understand how people with disabilities access your page
• Know how to structure your pages to avoid problems
• Know how to check your page for possible problems
• Be able to locate on-line information about page design for persons with disabilities

Key Concepts

• Persons with visual disabilities have the most difficulty with Web access
• Persons with visual disabilities often use text-based browsers in combination with screen readers to access the Web
• Some HTML tags cause screen readers to malfunction
• Some page designs make it difficult for screen readers to read the page effectively

Lesson Plan

• Access and access-related issues
• Using the lynx browser
• Tags to avoid
• Adapting tables for text-only viewing
• Tips for handling images
• Adapting image maps for text-only viewing
• Tips for handling links
• Tips for creating forms
• Problems with frames
• Other potential problems
• Testing your pages with "Bobby"
• Getting more information on-line

Access and access-related issues

Why considering access is important

• Many of our potential web site visitors have some kind of disability which may affect the way they use a computer.
• The Americans with Disabilities Act (ADA) requires that our goods and services, including publications, be accessible to people with disabilities.
• It is likely that the courts will determine that Internet publications like Web sites must meet ADA guidelines for accessibility.
• If your page isn't accessible, you may need to be prepared to present it in an accessible format on demand.
• Keeping access in mind leads to a "curb cut" effect - a site that is accessible to people with disabilities is also often more user-friendly for the rest of the population.

Disabilities that affect access to your Web site

• Vision impairments/blindness
• Low vision: People with low vision need to enlarge what they view on their monitor. This is normally possible, via enlargement programs, browser preferences, and larger monitors.
• Blindness: Blind people and many people with low vision access information on a computer by a screen reading program instead of a monitor. The program translates text into artificial speech. These programs can only read ASCII text, and thus must be able to access the text stripped of formatting codes, complex layout, etc. Also, text embedded in an image is not accessible to a screen reader.
• Other impairments such as color-blindness or strobe sensitivity: people with these kinds of disabilities may be especially sensitive to design elements of your page. Consider a person with red-green color-blindness attempting to read red text on a green background.
• Hearing impairments/deafness: cannot access audio information.
• Manual impairments: for purposes of web design, the limitation here is a person's ability to select small targets with the mouse. This is most likely to be a problem on an image map.
• Cognitive impairments: A badly designed site is difficult for anyone to use. People with certain cognitive impairments will not be able to retrieve information from your page if the site structure is not laid out in a logical, easy-to-grasp order.

General design guidelines

• Considering accessibility during the design process will save you time later if you were to decide to "retrofit" the page
• Test your pages at least with one graphical browser and one text-based browser.
• If you have incorporated any Java, JavaScript, or ActiveX elements in your page, test at least with Explorer and Netscape, as well as Lynx.

Using the lynx browser

What is lynx?

• A Web browser you can use on your central computer account
• A browser that does not display any pictures or other graphical information
• Fast (no graphics), accessible (works with slow modems, screen readers)

How do you access lynx at DU?

1. Log on to your account
2. Enter the command lynx at the system prompt
3. Refer to the menu at the bottom of the screen for keystroke and navigation assistance
4. Press q to quit lynx

Tags to avoid

• <BLINK>...</BLINK> This tag makes some screen readers "lock up" or freeze.
• <FONT> Specifying fonts can override font preferences set in the browser by people with low vision. The COLOR attribute can cause trouble for people with color perception problems. The SIZE attribute can make text too large or too small for someone who has set their browser to a custom base-text size.
• Tags that are proprietary to a certain browser. These tags may make your page inaccessible to a person using a different browser or a modified computer.

Adapting tables for text-only viewing

Tips for handling images

Images can't be displayed in text-only browsers. Instead the browser displays text information in place of the image.

• ALWAYS USE THE ALT MODIFIER FOR THE IMAGE TAG TO PROVIDE INFORMATION FOR THE TEXT-BASED BROWSER. If you omit the ALT modifier, text only browsers display each item in your bullet list preceded by the text "[IMAGE]".

  Example:
  
  The tag for the above image is:
  <IMG SRC="http://www.du.edu/clipart/buchtowc.gif" ALT="Buchtel Tower">

• If you are using an image as a bullet in a bullet list, use an asterisk (*) or a plus sign (+) in the ALT text modifier, instead of descriptive text like "stone bullet."
  Example:
  
  <IMG SRC="stone.gif" ALT="*">
• If your images are used as links to other places, use text in the ALT modifier that adequately describes the destination. If you do not include any ALT text in an IMG tag that is used for a link, text only browsers display the text "[LINK]", giving no indication of where the link leads.
• We often use graphics to create a horizontal line on our Web pages. Include a series of hyphens in the ALT text for these graphics to simulate a horizontal line.
• Test your pages in lynx. Can you navigate the site easily based on the information you provided in the ALT modifiers to the IMG tag?

 Adapting image maps for text-only viewing

An image map is a picture that takes the user to different URLs depending on where in the image they click. There are two kinds of image maps:

• Server-side image maps are processed by the web server
• Client-side image maps (CSIM) are processed by the browser

Newer versions of lynx can interpret client-side image maps (CSIMs). To construct a CSIM you need:

• An image file
• A <MAP>...</MAP> section in your HTML document
• A USEMAP attribute in your <IMG> tag
• Additional information about constructing CSIMs is available in the May issue of the Buffer

• A Client Side Image Map with no ALT modifiers
• A Client Side Image Map with ALT modifiers for improved legibility

Tips for handling links

Consider the following link:

<A HREF="someURL">Click</A> here to access a wonderful site.

A person using an alternative access method may only be aware of the word "Click", which does not describe what they are accessing. Consider modifying the link as shown below:

Click here to <A HREF="someURL">access a wonderful site</A>

In this version the phrase "access a wonderful site" will be used instead of "Click". This gives the user a better idea of where they will go when they click on this link.

Return to Lesson Plan

Tips for creating forms

• Forms that use valid HTML forms tags should work properly. Internet accessibility specialists, however, continue to recommend that you also provide the option of downloading the form as an ASCII file so that it can be filled out locally. Be sure to include either an e-mail or surface mail address to which the completed ASCII file should be returned.
• HTML forms can be somewhat limited, but it is important to stick with standard forms tags for accessibility.
• Screen readers sometimes are not aware of the existence of a form tag, such as a text box, unless some default text is placed in the text box. Experiment with including default text, such as "Type you name here", in TEXTAREA and TEXT tags.
• Forms are often enhanced with JavaScript, Java or ActiveX controls. These controls can only be used by newer, graphical browsers like Netscape and Microsoft Explorer. A user with a disability, especially a visual disability, will not be able to use these controls with a screen reader. The screen reader, if it can recognize the control at all, will probably not provide the user with any useable information.
• JavaScript is often used to validate forms. Keep in mind that on many browsers, the JavaScript validation will never be executed.

Problems with frames

Frames are not accessible to non-graphical browsers (and not even to all graphical browsers). All the care you have taken to design an accessible site can be rendered useless if you design in frames. There are a few options to get around these problems:

• Design each frame as a separate document, rather than one large document. Include each document in the frameset with the HTML code <FRAME SRC="document_name">.

  The latest version of Lynx can extract the URLs of each of your documents and present the user with a menu. While this can be somewhat confusing it at least ensures access to your pages. Keep in mind that not all people are using the latest version of Lynx, so this solution does not guarantee access.

• If you give your frame a meaningful name with the syntax <FRAME NAME="name">, Lynx will present the contents of the NAME modifier instead of a filename in the menu, which will help reduce confusion.
• Design both frames and non-frames versions of your page. Your opening page should then give users a choice of which version they wish to access. This may be easier for you to maintain if you have placed each frame in a separate document as suggested above.
• Avoid using JavaScript "Frames On" and "Frames Off" buttons as your only form of access. Browsers that cannot access frames also generally cannot use JavaScript.

Other Potential Problems

Video or Audio clips

Video and audio, naturally, present barriers to people with hearing and visual impairments. If important segements of your content exists as video or audio clips, it is important to provide alternative forms of access at the production stage. This might include:

• The audio track of a video can be closed or open captioned, which means that a transcript appears on the screen in time with the sound. The latest version of QuickTime and some other video formats are beginning to integrate this capability.
• Some audio-only formats are beginning to integrate into the file format the capability of including an ASCII transcription into the audio stream, which can then be extracted.
• Some video formats also permit additional sound tracks in which an audio description of the video can be played. Descriptive Video usually needs to be prepared by professionals - check out the Descriptive Video Service.
• These new access formats are not complete or standardized yet. Keep these options in mind when designing in the future. In the meantime, a link to a text transcription of the video or audio, located near the link for the video or audio clip, should be provided.

Scripts

Java or ActiveX

The developers of these languages are working on ways to incorporate accessibility, but ultimately it rests on the programmer to make sure their product is accessible. When shopping around for applets or controls, consider their accessibility. Also consider whether you are just decorating your page or using the control as an integral part of its function. In the latter case, you may want to consider providing an alternative form of access as well.

Return to Lesson Plan

Testing your pages with "Bobby"

"Bobby" is a service of …

http://www.cast.org/bobby

Return to Lesson Plan

Getting more information on-line

• CPB/WGBH National Center for Accessible Media http://www.boston.com/wgbh/access/
• DO-IT Center at the University of Washington http://weber.u.washington.edu/~doit/
• EASI - Equal Access to Software and Information http://www.rit.edu/~easi