Incorporating Web Accessibility

By Tyler Downer
2/9/08

There is a lot of talk about "web accessibility" these days. Most web content developers are a bit foggy on exactly what accessibility means, what it entails, and how it will impact them. This article will give you the information you need to understand that basics of designing a site for accessibility, and where to learn more.

Standards

Web Accessibility standards are maintained by the W3C, in this body is a sub group that runs the Web Accessibility Initiative. This group introduced the Web Content Accessibility Guidelines (WCAG) in 1999. The WCAG is basically a checklist of requirements that need to be met in order to comply with the standard. We have compiled a simplified list of the WCAG for you to use in web sites that you design. You can access it here (requires Acrobat Reader).

Purpose

The WCAG was created in an effort to make the web more accessible to surfers with disabilities. These include arthritis, color blindness, or epilepsy. It also assists those that are using devices that some how restrict internet use, such as a cell phone, PDA, etc.

The Problem

The WCAG is not a new technology, like CSS or XHTML, but it simply tells designers how to use existing technology properly. In the late 90's, first and second generation web sites were being built and maintained. These sites used tables, frames, poorly marked up HTML and lots of JavaScript. Unfortunately, these sites also made it hard for devices like screen readers, or the emerging internet capable hand held devices, to use web sites Tables are very space consuming, and the meaningful markup of a web site can easily be lost in several layers of nested tables. These older sites often had a poor combination of color, and images often replaced text, with no alternated descriptions. The WCAG is meant to fix that.

Uses

Here is a practical example of how the WCAG can benefit you and your users with out much work. In section 1.1 of the WCAG, it says in short, "Provide a text equivalent for every non-text element." Now study the code below. This is a reference to an image. <img src="image1.jpg" />. When just looking at the code, you cannot tell what the picture is of, is it a logo, an anchor image, or something else? And that is the same problem that screen readers, text only browsers, and users with images turned off face. They have no idea what is meant by "image1.jpg". Now, add this bit to the code: <img src="image1.jpg" alt="Company Logo" />. Now it is easy to tell what the picture is of, it is the company logo. If you use alt elements, make sure that you make them meaningful, putting something like "Image 1" in the alt is as bad as putting nothing at all. If an image does not have a text equivalent, such a spacer gif, place an empty alt, like this alt="". This ensures that readers will ignore it and pass on.

Color

Now we come to a bitter and hard fought portion of the WCAG, color. Color is abused on the web, making subtle color changes to make a point. However, this can be detrimental to many users. Over 8% of the U.S. male population alone, including the author, are color-blind. People with this disability have a difficult time discerning between similar color. For example, I have a hard time seeing the difference between green and brown, or blue and purple. Sites that rely on a mixture of, say, greens and browns, to distinguish links, text and navigation, make me have a hard time deciding what is what. Just a simple choosing of colors that are easily distinguished can go a long way in helping this segment of the population.

I hope that this has helped you to learn what web accessibility is and how it works. For more info, I recommend that you look at the WAI home page. It has updates, links to the specification and more.

Enter our new Contest today!