The Case for Accessibility

The Issue

If your organization has ever worked with the government, you have probably heard the term 'Section 508 Compliance.' If you've never tried to be '508 compliant' before, it may sound a bit scary. The reality of the situation is that if your web site uses proper and up-to-date code, you're probably fairly close. Nevertheless, it will require some extra time and testing to achieve this goal. What's important to understand is why you're making the effort. 508 compliance is a legislative step toward making the internet available and accessible to people with various disabilities, who may use assistive technologies. While most of your audience may be fully sighted, hearing, and able to use a mouse, there are those who aren’t or can’t. The key to accessibility is making sure that all relevant content is communicated to everyone that uses your site and that actions can be completed using only a keyboard.

Target.com: A Case Study

Take Target.com, who was sued last year by the National Federation of the Blind for having an inaccessible website. Two of the main issues with Target's site were that they weren't using appropriate alternate (alt) text for images, and that their checkout process required a mouse to make a purchase. Why were these two things such a big deal? An 'alt' tag on a product image should describe any important information that can be gleaned from looking at the image, but isn’t conveyed in the text description. Sighted customers evaluate a product using a combination of what they see and the text they read. Visually impaired customers may use screenreaders to browse a site. Screenreaders would read the 'alt' text out loud, along with the corresponding text description, giving the customer a more complete understanding of the product. As for the mouse, it's a point-and-click tool that is perfectly useless to someone who can't see what to click on. A visually impaired user would more likely use a keyboard to tab through options and then use the enter key to select a choice. Customers who didn't use a mouse couldn't complete a purchase on Target.com because the 'Continue Checkout' button could not be activated using a keyboard (this has since been fixed). There is some debate over whether Target was technically breaking any law here, and it sounds like they've made strides to improve their site. But I think that the suit gives web developers working on non-government sites reason to take pause. In planning their site, Target.com had overlooked a significant audience group. After all, online shopping offers visually impaired customers the opportunity to browse and read (or listen to) full product descriptions that physical tags and labels may not provide. Not to mention the convenience of shopping from home. Taking the extra steps to make sure that their site was accessible from the start could have been a great marketing coup.

A Few Quick Tips

The following tips cover the most common things I run into when building a site. To learn more about implementation, follow the links to visit a tutorial at http://www.jimthatcher.com.

1. Color: Don't convey important information with color only. Screenreaders or colorblind visitors may not be able to distinguish it from other text or backgrounds.
2. Alternate Text: Designate appropriately descriptive alternate text for important images, especially graphics that include text. Use empty alt tags (alt="") for unimportant images. This signals to most screenreaders that they should be skipped. If an alt tag is simply missing a screenreader may read the filename instead.
3. Links: Do not use 'click here' as link text. Instead, use a descriptive phrase. Screenreaders can be set to scan just the links on a web page, so they shouldn't be entirely dependent on context.
4. Captioning: Offer captions or transcripts for video and audio content.
5. Tables: Use tables only for data, not for layout, and use proper markup to denote row and column headers.
6. Forms: Use proper markup to associate form labels with input fields and make sure that forms can be completed and submitted without the use of a mouse.
7. Markup: Use proper markup to convey standard information to a screenreader. Screenreaders will read the appropriate emphasis into bold and italic phrases if you use the 'strong' and 'em' tags. Using headings (h1, h2, h4, h4) rather than styles (class="header") will clarify the structure of a page. You can use css (cascading style sheets) to control the appearance of the h header tags.
8. Navigation: Use "skip navigation" links to keep screenreaders from having to read long lists of links every time they go to a new page on the same site.

Being fully accessible or compliant with Section 508 isn't always feasible, whether you just don't have the budget or you're trying out some crazy new technology. But understanding the way assistive technologies work, and using best practices as you build your site ensures that you know exactly what problems you've taken care of and which ones you'll need to address down the road.