Technology offers great promise to those with a disability. In theory, technology can compensate for mobility, vision, and hearing limitations. However, as is often the case, this potential is not always realized. In fact, uninformed hardware and software design can impose new barriers. This can be the case when designing web pages. Designing for accessibility can be time-consuming and can require greater knowledge of HTML tags. However, poor design also results from a lack of awareness and designers of all ages can learn the basics.

Designing web pages for the visually impaired.

Most visually impaired web users make use of special software that "reads" the screen (e.g., Home Page Reader and Jaws for Windows and outSpoken for the Macintosh). IBM has developed a special web browser capable of reading web pages.

An important insight is that a screen reader interprets text (the html document). Information that is not contained in the html document (the words intended to appear on the web page, the html tags, and alt tag descriptions). If some important web page information is not available as text - images, illustrations, video, image maps, buttons - it may not be possible for a person with a visual impairment to learn from the page or navigate the site.

HTML offers an important opportunity to associate text with images and image maps. This capability is available through the alt attribute. Text provided using the alt attribute is not available unless the browser makes use of the html source (by visual inspection or using a reader) or tells the browser not to automatically load images (some people do this to speed up page display - examine the browser preferences to do this yourself if you are interested). Web authoring programs typically offer an easily accessible field for entering alt text from the same dialog box used to identify the image file to appear on the page.

Page design tools may cause problems.

The perception of quality web page design seems to have become associated with the precidefault.htmlnt of multiple screen elements. One way to control the placement of multiple screen elements is through the use of tables (we recommend this technique in both books). Web authoring programs now allow the web author to arrange elements (text boxes, images, etc.) on the screen and then automatically generate a table structure (embedded table) to position these elements. This approach allows designers not create pages focusing only on page appearance. Most amateur designers would never create such complex tables if they had to generate the HTML code by hand or even if they would use an authoring program to directly create the structure of the table before entering content. The problem with the approach that allows the designer to position elements and the software to create complex tables can be difficult for screen readers to interpret.

We design pages in this fashion. Here is the home page for a previous edition of this book. We have added lines so you can see the table structure and have also provided a diagram of the table structure.

Personally, this is the type of situation that causes conflict. There is the pressure to generate more sophisticated pages and there is the pressure to design pages for greater accessibility.

Evaluating pages for accessibility.

There are many resources for learning about the principles of designing for accessibility. We recommend:

The World Wide Web Consortium Accessibility Initiative - in particular, examine their accessibility priorities to learn which page features cause the most significant difficulties.

The Center for Applied Special Technology (CAST) - a comprehensive site focused on using technology in ways that benefit learners with disabilities by encouraging a focus on a "universal design for learning."

Watchfire WEBXACT - a free service that evaluates web content for quality, accessibility, and privacy.

We submitted the online chapter summar for Chapter 1 of the 4th edition to WEBXACT and the services located several accessibility problems.

For example, WEBXACT indicated the following.

In examining our page, we found the following image. The HTML code associated with this image can include what is called an "alt" tag. An alt tag allows a text equivalent to be attached to an image. We have attached the alt text - Picture of elephant - the this picture. Sometimes it is difficult to describe an image with text. For example, the screen image captured from WEBXACT appearing above this paragraph would be difficult to describe.

Another concern identified by WEBXACT related to our use of an image map.

Each page on our personal web site for the 4th edition of our text was headed by the following image. This image is actually an image map. Clicking on "home", "chapter summaries", "blog", or "database" would take the user to that portion of the web site. While this technique provided an efficient way for users to navigate the web site, the image was not visible to blind users and because the words appearing within the image map were part of the image, the words could not be read by a page reader.

If an image map was a good idea, what might have been added to allow equal access? It is possible to tag the individual parts of an image map. As an alternative, a series of links based on text might have appeared at the bottom of each page. This text might look something like this:

Home | Chapter Summaries | Blog | Database

Keeping track of all possible problems is a significant challenge, but we all can improve by developing good habits.

Return to Chapter 10