According to statistics provided by the NUA Internet Surveys, approximately 6 million users in the United States alone have some sort of disability — visual, hearing, mobility or cognitive impairments. Many current web sites not only assume that their visitors can both see and hear, but that they have a certain degree of manual dexterity and use a cable-quality Internet connection.
Technology has come a long way, and many of the disabilities which ten years ago, would have made it virtually impossible for a person with a disability to use a computer at all are now compensated for by the use of some quite sophisticated assistive technology. Given this fact, in concert with the rapid aging of (and consequent deterioration of eyesight in) the "baby boom" generation, it is only good sense and considerate to provide web sites that can be accessed by the widest audience possible.
In general, the World Wide Web Consortium's Web Accessibility Initiative (WAI) has developed what are arguably the definitive guidelines for designing accessible web sites, based on universal design principles. An added benefit of adhering to these guidelines is that they also provide access to your site from devices such as PDAs and web-enabled cell phones.
When developing a document or a collection of documents for the web, there are three major components to consider:
content, structure, and presentation.
Content is the information you have to convey.
Structure is how that information is organized.
Presentation is the way in which the information is delivered.
There are a number of ways to check your site for accessibility. Probably one of the best-known ways is to use a program called Bobby, a web site accessibility checker from the Center for Applied Special Technology (CAST). For a preview of what a Bobby report looks like, look at the Example of an Image With ALT Text page from my examples. There's a link on the bottom of that page that will lead you to a Bobby report on it.
If your site is simple, just graphics and text, there are two quick ways to check what others will see. First, turn off the automatic loading of graphics in your browser. Then view your pages and find out what non-visual users will see. Second, try a text browser. The Lynxview page at www.delorie.com will approximate what a text browser will see. Is everything there? If not, go back and make sure that all of your images include ALT attributes.
If your site contains tables, then the Lynxview site is particularly important. This will show you how a screen reader will render your table, which is known as "linearizing" your table. Does it still make sense? Can you still follow the information as you intended it?
Do you have a friend or acquaintance that is blind or visually impaired? Ask them to review your site and give you feedback.
Do you include audio or video files on your site? If so, have you included:
Do you avoid proprietary tags that don't conform to the official W3C HTML 4.01 standard?
Does your site require users to install software beyond their web browsers?
Do you use Adobe Acrobat files on your site? If so, have you provided an HTML or plain text alternative page that provides the same information? Please keep in mind that although Adobe provides a PDF-to-HTML conversion utility, it doesn't always produce a usable HTML version of the file. Problems can arise with textual tables, columnar formats, and it won't provide information on graphics, which can include meaningful information that a non-visual user won't see. And if your PDF file includes scanned pages, the utility won't perform OCR (optical character recognition) on these pages to generate text.
Example of an Image With ALT Text - probably the most common obstacle to accessibility — and the easiest to fix!
Best Practices for ALT Text - Suggestions for how to compose effective ALT text.
How a "D-Link" Works - one way of describing a picture for non-visual users.
Example of Redundant Text Links - include these with your image maps for those using text browsers and other "Internet appliances."
How to Turn Off Automatic Image Loading - one of the easiest ways of checking what non-visual users will see.
Example of an Accessible HTML Form Using JavaScript - also accessible for users without JavaScript capability using the NOSCRIPT element.
Example of an Accessible HTML Table - shows how to use table headers to help provide context for non-visual users.
Example of an More Accessible Frames Page - shows how to use the NAME and TITLE elements to help provide context for non-visual users.
Example of an PDF File Converted with Adobe's Utility - shows the original PDF pages (with textual description) and the resultant HTML and text files after using Adobe's utility.
After nearly 5 years of almost constant keyboarding, I developed severe carpal tunnel syndrome in both hands. I had surgery on my left wrist in 1985, and although the doctor recommended that the same surgery be done on my right wrist, I was able to put it off by modifying my behaviors. I shared some of what I've learned in this article, written by Carrie Smoot.
Resource listing, includes both general web design sites and accessible web design resources.
HTML codes for special characters - very useful if your site includes pages in languages other than English.
Dave Raggett's Introduction to CSS
Another gem from the W3C ... In addition to being an excellent introduction to Cascading Style Sheets, this document also contains one of the handiest color charts I've ever seen. Be forewarned that these colors do display differently in Netscape vs. IE, but it's still a very convenient chart.
