Accessibility for the web has become a hot topic these days as Target, Inc. finds themselves in the throws of a California court case for their lack of accessibility of Target.com. While Target’s site has undergone a lot of updates to become more accessible to handicapped users since the last time they were in court, on Oct. 14th a judge found that their efforts to date are just not enough. So how much is enough? Well, regardless of disability, a user should be able to navigate the site regardless of disability and reach their “target” objective – in the case of Target, that’s usually buying something (or emailing customer service, checking order statuses, etc.).

While accessibility is certainly not a new area of concern for web designers/developers, the implications of a high profile law suit against a large consumer site like Target could mean tighter regulations beginning in the state of California (doesn’t it always start here?). Thanks to precedents like Target and their legal confrontation with the Americans with Disabilities Act of 1990 and other related legislation, we may soon find legislators enforcing that all public websites must under law be accessible to everyone.Now, more than ever, developers need to start thinking about user experience for the disabled – If you haven’t already, it’s just a matter of time before your lack of compliance with best practices for accessibility is viewed as the equivalent of not including a wheelchair ramp or elevator at your place of business. Since standards of practice in this area have always been weak to catch on, the precedents set by any new rulings in this case could mean lots of work to update sites to comply with new codes.

I’ve compiled some quick tips for increased accessibility as well as a bunch of useful resources and tools for getting things up to par.

Who to Consider:

1. The Blind – Screen Reader technology has come a long way, but you need to make sure your site is screen reader friendly.

2. The Color Blind – there are many forms of color blindness, ranging from partial to total inability to see color. Pages with little contrast from light to dark may be legible to those of us who see colors, but having strong contrast between text and background will ensure that users with color blindness can read to content as well.

3. The Deaf – this of course is less of an issue unless your site is riddled with audio. None-the-less, a good description to go with video, audio with suplamentory text, etc. are good if you want everyone to be able to get the most from your content.

4. The Mobility Impaired – Lose the three tiered drop downs already! – even handy-able folks have trouble with these. Seriously, consider how difficult your site is to navigate for someone who does not have the full range of motion you take for granted.

Tips for Greater Accessibility:

So how does one make a site accessible to the disabled? I could write a book (many have infact). There are many steps that need to be taken and lots of testing that must go on. That said, there are a few items that should be addressed right off the bat and some ways to accomplish the bare bones of accessibility, Here’s a very basic 5 point model I’ve developed for taking an old site and making it accessible on the fly:

5 Steps to Increased Accessibility:

1. Assess Content Legibility: First off, download a screen reader – then you can shut your eyes and let it tell you how to navigate. Experiencing first hand the site as a blind individual would is essential to understanding how navigable it is to the sight impaired. Go through the site and log your experience. Here are some quick questions to ask yourself:

- are the main items on the page ordered logically in the html or did you shift them around with the css? Being able to read naturally from top to bottom and get a sense of the hierarchy and importance on the page

-Is the markup clean? – style sheets and JS are external? Element tags used appropriately (headers ranked 1-6, paragraphs, list tags, etc. denote the type of text content they contain?

2. Assess Color Choices and Contrast: There are several resources out there that allow you to test contrast on a page (some are included at the end of this post, along with other resources). However, an easy trick I use for initial assessment is taking a screenshot of the site, opening it in Photoshop of other image editing software and changing the mode from RGB to black and white. This gives a quick overview of how color density affects the content of the site overall.

3. Images and Animations: If an image is not part of the integral content of the site, make it a background image. Make sure the images that are in teh body content are relivant to the page content and that all have an alt tag with a detailed description of what the image is and why it’s there. If you’re dealing with graphs/charts in image form (better to use a table and text content when you can) or other complex contextual images, use the long description (longdesc=”") attribute, and further describe the graphical content and context in detail.

4. Links: All links should have a title attribute that tells the user what happens when they click there. Avoid non-descriptive linked text like “click here” – taken out of context, it will not tell the user what “here” is.

4. Target Links: Use target links to allow users with screen readers to skip around the page from the content to the navigation to the subnav, etc. These targets do not need to be visible to the sighted user – they are very useful for users with screen readers to allow skipping over areas. This allows the user to navigate to the parts of the page they want without having to read the whole bloody header, navigation, etc.

5. Multimedia: Provide captioning and transcripts of audio, and descriptions of video.

When content developers mark up natural language changes in a document, speech synthesizers and braille devices can automatically switch to the new language, making the document more accessible to multilingual users. Content developers should identify the predominant natural language of a document’s content (through markup or HTTP headers). Content developers should also provide expansions of abbreviations and acronyms.

In addition to helping assistive technologies, natural language markup allows search engines to find key words and identify documents in a desired language. Natural language markup also improves readability of the Web for all people, including those with learning disabilities, cognitive disabilities, or people who are deaf.

When abbreviations and natural language changes are not identified, they may be indecipherable when machine-spoken or brailled.

There are many other items to address to make a site truly accessible, and more detailed ways to address the above issues. However, you can read more detailed guidelines over at the W3C’s Web Accessibility Initiative.

More Web Accessibility Resources:

Accessify – Tools, wizards, articles and tutorials on Web Accessibility for the conscientious web developer

Web Credible – Great up to date articles, tutorials, etc. centered around web accessibility and usibility.

Sim Daltonism – Color Blindness Simulator for Mac OSX – Free Download (but donations encouraged)

pwWebSpeak – Free screen reader for Windows

ReadPlease - Free text-to-speach software (Windows only)

VisioVoice 1.1 – Apple’s Free Screen Reader for Mac OSX (version 10.4 or later)

Posted on Sunday, October 21st, 2007 at 8:09 pm Follow responses via the RSS 2.0 feed.