Building Accessible Web Sites in Seven Steps

Why Build an Accessible Web Site?

You wouldn't intentionally build a Web site that shut out all users from the state of California, or blocked Latino computer users, or put together pages that were not accessible to anyone whose favorite color is green. Yet well-meaning design teams often build sites that exclude the 54 million Americans with disabilities, the largest minority population in the U.S.

According to a recent usability study by the Nielsen Norman Group , Web users without disabilities were able to accomplish tasks and find information online three times faster than Web users with disabilities. Considering site visitors with disabilities in your design strategy isn't just a stroke of philanthropy; without it, you drastically reduce your ability to do business or reach your constituency. Even worse, it could saddle your organization with costly litigation.

At first, the prospect of building an accessible site may seem daunting, but building an accessible site really takes the same amount of effort and resources as any other well planned site, as it incorporates the same solid aspects of design and usability. The key is educating yourself on the right building materials.

Retrofitting an Existing Site

Building an accessible site the first time is less costly and less time-consuming than going back to retrofit and existing site. However, if a retrofit is your only current solution, here are some quick tips toward making it more accessible.

• Annotate all pictures and graphics and make sure your navigating doesn't require a mouse interface. Simple text is the solution to both of these problems. Annotate the tables and add text labels to the fields of all forms as well.
• If the site you're trying to fix is very visually-oriented or packed with inaccessible content, as a last resort you may want to create a text-only version of the site. This is a Band-Aid approach, however, and should not be your total solution. First off, you're created twice as much work for yourself, dedicating needless resources to two sites to update and two sites to maintain instead of one. Having an alternate text-only site also says to your audience with disabilities that they must use the "back door" to interact with your organization, and that they were not first in your mind when considering your organization's interface to the world. Most likely, this is the not the image of your organization you want to present, or the message you want to send to your audience.

Building an Accessible Site from the Start

Building an accessible site from the ground up is the best way to build your site. The official guidelines on developing an accessible Web site are published by the World Wide Web Consortium's Web Accessibility Initiative (a.k.a. the W3C's WAI). But as a shortcut, you can use the following list of tips. While we advocate total site accessibility for all users and strict adherence to the W3C guidelines, we know that meeting every single requirement is time-cosuming, and that your organization may not have the resources to allow developers to learn these standards end-to-end. Many organizations have good intentions, but not a lot of time. Rather than not thinking about accessibility at all, we ask that you print out this list and keep these design tips in mind as you build.

Step 1

Say it with words:Label everything with alt tags. Many blind and low-vision visitors use screenreading programs to "view" your site, meaning they are limited to accessing your Web site via text alone. For these visitors, everything needs an alt-text tag, otherwise they won't be able to navigate your site. So be sure to title all graphics, photos, buttons, and menus, even if they're just for design and not for function. Keep users in the loop by adding textual elements to every part of the site.

Step 2

Cross your media:Convey information in multiple media formats. For example, PDF documents can't be read by screenreaders at all. If you post documents in PDF, there should also be a text or HTML format of the same data. If critical site data is only available through Flash or Java, you also need a text option with equivalent information. If you're streaming video, be sure to have an audio track for visually-impaired users. If you're streaming audio, be sure to close-caption the soundtrack for those who are hard-of-hearing. Except for plain old text, information should never be conveyed in just one format, in case a user can't see it or can't hear it the way you've intended.

Step 3

Eek! A mouse!Don't rely on mouse interaction. A user who has limited manual dexterity often can not use a mouse, so make sure your site doesn't use pull-down menus or other navigation elements that are mouse-reliant. Keyboard navigation is also a good idea for the myriad of users using text-only browsers and the wireless Internet.

Step 4

Respect user preferences:Let users set their own text size and color. Allowing the size or color of text to change with the user's browser settings isn't just a good idea for your low-vision visitors, but it also benefits the Web's growing senior audience and users on different platforms and browser configurations. Though that 8-point Palentino might look good on your 21-inch design station, will it play in Peoria? Probably not.

Step 5

Set the table:Tables aren't great for screenreader users, but they can work if they're small and if you add text labels to each row and column.

Step 6

Bad form:Label all your form fields. Forms are the crux of e-commerce and a common and necessary component for searching and entering user information into a site. However, if you don't label every field, you're not allowing your customers to shop or share their personal information with you. Do you really want that? Of course not! Take two extra seconds and label each field rather than just relying on adjacent outside text, which is often confusing to screenreading programs.

Step 7

Clear as black and white: What if a user of your Web site is color blind? Are your visual clues color-dependent? Do you have to see red and blue to gather data? Make sure that all information is clear even if you can't differentiate color.

While this list is in no means a complete solution or a total road toward accessibility for all users, it's a quick start toward a critical mission. Building accessibility into the mix is an essential component of good site design. When your design is an open door, all users will feel welcome, and your organization is truly serving the public at large.