2004 Conference Proceedings

Go to previous article 
Go to next article 
Return to 2004 Table of Contents 


ACCESSIBLE SOLUTIONS TO DIFFICULT WEB DESIGN PROBLEMS

Presenters
Crista Earl
American Foundation for the Blind
11 Penn Plaza Suite 300
New York, NY 10001
USA
Phone: (212) 502-7605
Email: crista@afb.net

Elizabeth Neal
American Foundation for the Blind
11 Penn Plaza Suite 300
New York, NY 10001
USA
Phone: (212) 502-7733
Email: lneal@afb.net

Introduction

Web designers looking for solutions to accessibility problems know they need to label graphics, make links stand alone, and make many other simple-to-implement accessibility changes. The presenters discuss the harder to implement, harder to understand, or harder to test accessibility details. Correct markup of data tables, when to use an alternative to a data table, how to mark up forms, when Java script presents a major barrier to users and alternative approaches, how to test for low-vision-friendliness of displays and how to fix problems and much more will be discussed. Web pages with Examples of problems and solutions will be presented.

General Design Issues

The One-Display-for-All Design
Often designers make decisions with the intention of establishing as fixed and reliable a display as possible. They use elements that they hope will give all users the same experience. They may specify fonts, font sizes, colors, and set large sections of their pages into graphics to establish an aesthetic effect or a positional relationship among page sections: They always want the headlines on the left ,the advertisements on the right above the links to news sections, etc.

Build in Flexibility and Learn to Love It
These and all other designers are frustrated by differences among browsers, among operating systems, and the options that users might choose that could damage or destroy the look of their pages.

Users who come to the web site using assistive technology already come with a different experience. They may be seeing only a small part of the page at a time or they may read the page one line at a time without knowing what will come next. And, what they experience as a line is not what you have carefully displayed as one line. It is important to understand that no matter how fixed your page is, users do not all experience it the same way. The changes users make shouldn't damage your page, just make it different. For the user who has made those changes, this is the improved version of your web site.

Images of Text versus Text
While it is true that modern screen readers read the alt-tags of your images, there are many reasons to avoid the temptation to use images of text rather than text formatted using style sheets. First, the image-and-alt-tag approach requires double maintenance. If it becomes necessary to change the image, it is also necessary to change the alt-tag. It is not uncommon to find web pages with "Contact Us" visible on the screen and "Shopping Cart" in the alt-text, or something just as misleading. If your web site provides an option for users to change the language of the interface, not only must someone painstakingly create all those images in all those languages, someone must also provide all the alt-text in all the languages and code the system to insert them.

Some users with low vision may be able to read most of your page simply by changing the colors and font sizes in the browser. When they turn your blue-on-white screen to a white-on-black one that they can see, though, the images remain the invisible color. The all-important site navigation links are the very thing they cannot see.

Elements that Prevent Wrapping of Text
Developers tend to develop for the display they are using. They often place a wide image across the top of the page or a table somewhere on the page that will fix the with and cause other items such as paragraphs of text to fill the width of the screen according to those wider components. When a user sets the system to a lower resolution, however, that wide item extends off the right side of the web page, disappearing from view. Worse, the paragraphs of text, the links down the right side, and many other useful components disappear from view. Users with low vision are especially confounded because they are already only seeing one part of the screen and must now, if they realize the problem, scroll left and right on the page as well as scrolling with the screen magnification software. It is likely that these users will not know they are missing the right-most items.

Solution: Make sure all banners and tables expand and contract

Consider the reasons you want the banner across the top. It may be that the main reason was to set the width of the display so that all users would see the same positional relationship among page elements .

Break up your image. Set two images into sides of a table with the background color set to match. Allow the table to fill 100 percent of the width of the screen. The two images will appear to be one (to those users looking at the screen with mainstream browsers) but will be wider or narrower depending on the user's resolution.

Specific Problems with Specific Solutions
Labeling Form Controls

Correct form markup is tricky business. It is nearly impossible to know whether you've done it correctly without testing it with a screen reader. Use more than one screen reader, as they can sometimes make good guesses about bad markup and mask a problem.

Read the form by tabbing from one control to another without trying to fill out the form. Fix any errors you find. Test the form by entering the screen reader's "forms mode" and attempting to fill out the form. Fix any more errors you find.

Use the "Label" Tag for Form Controls
Especially for users who access your site using screen readers, it can be extremely difficult or impossible to know what is required in input fields in forms. A user moving through an incorrectly-marked-up form may hear no more than "Edit edit edit radio button not checked radio button not checked Submit button."

To make the form usable, explicitly label each control by enclosing the text associated with it in a a <label for=""> tag. Then, add an ID attribute to the input field and make both the ID and FOR equal to the same value. ID values must be unique. You cannot give multiple inputs in a form the same ID value.

Note: The name and ID of a control are not the same thing. The control must have an ID in order to work correctly with the label.

Here is a sample of HTML markup for a text field that uses the <label for=""> tag:
<label for="name">Name:</label>
<input type="text" name="Name" id="name" size="20">

Avoid Radio Buttons
Radio buttons are not supported consistently by all versions of browsers, screen readers, and combinations. A correctly labeled and tagged set of radio buttons is a very difficult control for users of screen-reading technology. If a "choose only one" situation is called for, a combo box is preferable.

Note: When radio buttons are used, each radio button in the series has the same name, but a unique ID. Each radio button in the series has a unique label.

Combo Boxes
The default item in the combo box should clearly define the purpose of the box. For example, "Select Age Range" is preferable to "18-25." Many screen readers and browsers fail to connect the label with the combo box, so users may never see the label.

Make sure combo boxes work with the keyboard as well as with the mouse. Some combo boxes are configured, usually using a client-side script, to take an action as soon as the user has selected an item. Since the keyboard user must pass through the first four items to select the fifth, this combo box does not work. Since the screen-reader-user has reading and navigating tied together in one action, this user is not only yanked away to the wrong page, he or she does not know what it will be.

Instead, provide a submit button that the user can select at leisure after reviewing all the items in the combo box.

Data tables
When is a table a data table? Is there a relationship between the items in one row of the table? Between items in one column? If so, it is probably legitimate to use a data table. Remember, mark up structure, not appearance. Use table summary meaningfully. Know that people are going to read it.

Complex tables:

these include such tables as those that have tables embedded within them or have more than one occurrence of columns spanning. These are sometimes extremely difficult to read with a screen reader and can be very hard to display coherently visually. Instead, or in addition, if you insist, give the "transformed" display of the table. separate out row and column heading and repeat them for each cell.


Go to previous article 
Go to next article 
Return to 2004 Table of Contents 
Return to Table of Proceedings


Reprinted with author(s) permission. Author(s) retain copyright.