Web Posted on: December 14, 1998

A Common Sense Approach to Web Accessibility

Tom McCain
Instructional Technology Specialist
Butler University
4600 Sunset Avenue
Indianapolis, Indiana 46208 USA
Day telephone: 317 940-8138
Fax: 317 940-9740
Email: tmccain@butler.edu
Web site: http://trevor.butler.edu/~tmccain

Overview

How does the average person create an accessible site? Most web authors do not use HTML, do not understand the language and terminology of web accessibility, and are likely to conclude that accessibility simply isn't worth the trouble.

This workshop will promote accessibility by focusing on three fundamentals of communication design: consistency, clarity and common sense. Emphasis is on providing clear directions and choices for visitors, building consistent layouts, and adopting a visitor's point of view.

The presenter has taken this approach at a university where the typical web designer uses authoring software and has little interest in learning HTML. Users of this approach discover that accessible design is simply good design, and that the most effective tools are already downloaded into their heads and hearts.

This workshop is based on the web tutorial located at
http://trevor.butler.edu/~tmccain/access

Tom McCain developed this web site and approach after sifting through WAI listserv conversations and successive postings of guidelines, and experiencing the great frustration that the average user feels when trying to digest this important accessibility work. His approach is based largely on more than 25 years of experience in graphic design and communication, and his belief that learning occurs best when students are motivated and successful. Workshop participants do not need to know HTML.

What is web accessibility?

It is making online information available to an audience that includes people who do not or cannot use graphical browsers. As we create web pages that use graphics and sounds, we create obstacles for visitors with visual or hearing impairments.

There are three ways you can make your web site accessible:

• Be consistent. Predictable design and navigation greatly enhance accessibility.
• Be clear. Describe what you are doing and how you are doing it, rather than relying solely on visual information.
• Be sensible. All visitors will appreciate good organization and clean design. Let your pages breathe, figuratively and literally, so that people can find the information you have gathered.

The tools of web accessibility will change a lot in the next year but there are a few things you can do now. Most importantly, provide alternative text for graphics and provide good color contrast between type and backgrounds. Follow these steps for more specific tips.

Web accessibility terminology

This portion of the workshop briefly defines browsers and screen readers; HyperText Markup Language; structural tags and presentation tags; and style sheets.

Organizing, writing and formatting text

Use consistency, repetition and clarity. The way we organize and write can make web pages more accessible. Use a repeating headline style, or place a recognizable item (a logo or image) in the same place on every page. Place navigation buttons or links in the same location from one page to the next. Design the correct amount of information for any given page. Help the viewer gain a sense of a page quickly, then provide more in-depth information or links that take them further.

Use sensible links, even if it means text and a graphic are redundant. If links are embedded in a paragraph of text, write the text so that clickable text is obvious or place links on separate lines. In a list of links that appear on separate lines, insert non-linking text on each line so that text browsers do not see the list of links as a single link.

When including a list of items, use numbered lists rather than bulleted lists. It also is helpful to describe what is being listed and how many items are in the list.

When formatting text, use the heading tags through in the proper order. Do not use blinking or moving (marquee) type. Start to learn style sheets to specify type sizes and colors and indents.

Abbreviations, acronyms and emoticons: Avoid them or use the alternatives which will be shown in the workshop.

Alternative text descriptions (alt-text), and color choices

For all images, provide alternative text that describes the function (rather than just the appearance) of the graphic. Visitors who cannot see images can "see" alternative text and understand the meaning and the usefulness of an image.

Alternative text for images is one of the most effective tools we can use to make web sites accessible. Not only does alt-text work, it is a virtual welcome mat that says to visitors, "Please come and visit a while."

Colored backgrounds and background images: Use background images carefully, since type can be hard to read on "busy" backgrounds. Text and colored backgrounds should contrast comfortably for reading.

Tables and frames

Currently, tables cause major problems for most screen reading softwares, because screen readers typically read from left to right, top to bottom, one line at a time. Avoid tables to avoid confusion. The information in tables often can be shown as a simple list.

Do use tables for tabular information, such as a mileage chart. When you do so, provide enough descriptive text that visitors can understand what the table depicts. Armed with that information, most visitors will be able to sort through the material and decipher it.

Framed sites should offer the option of an unframed site.

Audio, video and Java

Audio and video clips, by themselves, exclude the hearing and sight impaired. If you include an explanation of the clip, you can provide those visitors with an appreciation of its content. Near any audio or video clip, provide a link to a transcript of the clip, or expand the transcript into a description that also includes subjective and artistic observations. Provide information about who wrote and/or performed the material.

Java applets and Javascript: Accessibility is coming. In the meantime, scripts that make a visitor's screen reader or browser uncontrollable are a big impediment to accessibility. If you do include applets or scripts, provide a text description and a non-Java option.

Text-only as an option

A web author can provide a link from a graphics-rich web site to a duplicate site that uses no graphics, and presents information in text that flows in a linear fashion. Lots of web sites use this option but it has its limitations: All updates need to be made to both sites, so maintenance can be demanding. In practice, the text site is often neglected. Also, navigation between the two sites needs to be very clear.

Testing your pages

Once you have made your site, you can check it to see how accessible it really is. The best option is to visit your pages yourself without the benefit of images. The workshop provides web addresses for resources that will test your site for accessibility.

Design and accessibility resources

The workshop provides web addresses for several such resources.

Why care about accessibility?

It's design that works for all of us: Accessible design is really sensible design: Be consistent, be clear, and think about what you're doing. If you do that, you will design web pages that work better for us all.