Mr. Rogers is a busy guy, so he prefers the convenience of shopping online. Unfortunately for Mr. Rogers, he is color blind. In his case, that means he cannot distinguish green and red, which has given him a number of problems with many of the websites he’s visited. Primarily, these issues revolve around color contrast, since he tends to see the pages in slightly varying shades of brown, a result of his color blindness. What’s more, special or mandatory items on the websites—on forms, for example—are indistinguishable since he cannot see the color red. How can his Internet experience be improved?

Color blindness is a very common problem, but it is by no means the only problem that Web users with special needs face when they sit down at their computer to surf the web. Visual problems can range from color blindness to low vision to complete blindness, but it doesn’t stop there. Other users are deaf or hard of hearing. Still others have ADHD, epilepsy and dyslexia. A whole host of problems that can be mitigated, at least from the Internet experience point of view, by practicing proper, accessible Web design.

Designing for Accessibility

To understand what goes into designing for accessibility, you first have to understand how all the components of the Internet experience fit together. There are, essentially, two parties to this: the developer and the user. The developer uses Web authoring and evaluation tools to create content. The content is placed on a server where it is accessed by the user, who utilizes Web browsers, media players, assistive technologies, or other “user agents” to find, retrieve and interact with the content on the server. This relationship, and the components that go into it, speak volumes about how you should go about making your website accessible. You need to address:

• Content


• Developers


• Users


• Authoring tools


• Evaluation tools


• Web browsers


• Media players


• Assistive technologies

Whether you are starting fresh and designing your website from scratch, or you are re-engineering your existing website to achieve accessibility, you have to take these issues into account. It makes sense from a human point of view to do this, but it is also good web design, good business and it makes very good legal and financial sense. After all, designing for accessibility is no longer just a nice thing to do—it’s the law.

Basic Design Tips

According to the folks at the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C), the basic things you need to remember when designing a website for accessibility boil down to these ten items:

Images & Animations. Visuals are a great way to capture interest and convey information, as long as your visitors can see them. To make it possible for everyone to use and interact with your images, use the alt attribute to describe the function of each visual.

Image Maps. Links embedded in graphics may give your website a great look, but as with images and animations, making sure that the visitor can interact with the image map is of primary importance. To make your image map accessible, be sure to use a client-side image map and text for the hotspots.

Multimedia. Making this kind of content accessible means providing captioning and transcripts for all audio and descriptions for
all video.

Hypertext Links. The key here is to use text in your links that makes sense when read out of context. For example, instead of a generic “click here” at the end of an introductory sentence like “For more information on links, click here” you may want to rephrase it as, “More information on links is available on our Links Info Page.” Take “Links Info Page” out of context, and it is still pretty clear what you can expect from it. “Click here,” on the other hand, could take you anywhere.

Page Organization. How you organize the pages of your website is every bit as important for accessibility as the content itself. The first rule is consistency. Every page needs to look like every other page, with navigation in the same places—usually at the top and at the bottom of each page—every time. Beyond that, use headings, lists, and consistent page structure. If possible, use Cascading Style Sheets (CSS) to control page layout and style.

Graphs & Charts. These work along the same lines as images. If the visitor can’t see them, they don’t help. You can get around that problem by summarizing or by using the longdesc attribute.

Scripts, Applets, & Plug-ins. These can be sticky, since not every browser, media player or assistive device supports every script, applet or plug-in. You can work around that by offering alternative content, in case active features are inaccessible or unsupported.

Frames. Frames can be troublesome when your goal is accessibility. Do your best to avoid them by using the noframes element and by creating a meaningful title for each of your pages.

Tables. Like images, tables are very useful for conveying information quickly and succinctly. To make sure that they are accessible to those who might have trouble seeing them, you should make line-by-line reading of the table understandable and summarize the entire table so that the visitor knows the contents of the table and the conclusion that the table is trying to present.

Check Your Work. It might be more accurate to say “validate your work.” In other words, you need to make sure that everything works and that it conforms to accepted guidelines. There are a number of tools, checklists and guidelines available at the at W3C website that will help you do just that.
Visit w3.org/TR/WCAG.

Cost of Accessibility

It is normally cheaper to design a website for accessibility right from scratch. The reason for this is that you do not have to rebuild your existing website, redesign and recode existing pages or rewrite existing content. Either way, however, the technology behind your site will have a direct impact on cost. For example, complex sites—even simple sites—built without the use of templates and style sheets will certainly be more costly to make accessible than even complex sites that do use the more up-to-date technology.

The Benefits of Accessible Design

Businesses can derive numerous benefits from incorporating accessibility into their website. From a sales point of view, a site that does not take Mr. Rogers’ color blindness into account will very likely not make any sales to Mr. Rogers. Why cut off a potentially lucrative pool of consumers when you can, just as easily, design your site to accommodate them? In addition to increasing potential market share—with the disabled, the temporarily disabled and those who would simply benefit from the changes—there are other benefits, including increased search engine optimization and higher search result rankings, increases in the potential use of the site, as well as in the number of situations where the site would be used, improvement in the company’s public image and legal standing, and both direct and indirect cost savings that usually far outweigh the initial investments necessary to implement a website accessibility initiative.

In brief: You get a better quality website and all of your customers, including those with special needs, will have increased usability and a good overall experience. That’s a win-win situation. —Charles M. Cooper