At one point in our pre-child lives, my husband and I had very similar cars. He drove a maroon Acura Integra with a sunroof and all sorts of toys. Being in grad school, I had a more stripped-down model that was screaming, comes-with-3-free-speeding-tickets, red. The first time my brother saw my car, it was parked next to my husband’s car. He couldn’t tell them apart-until my husband pointed out the lack of a sunroof, and so on… My brother has a type of color deficiency that prevents him from seeing differing shades of similar colors.
Why am I telling you this and what does it have to do with web accessibility? Because websites that vary only the shade of text to indicate levels of importance don’t work for someone like my brother. Going from maroon to red without actually changing the weight or some other feature of the typeface can be meaningless to a color deficient person. WebAIM estimates that up to 20% of web users have some form of disability. Would it be wise to ignore 5 or even 10% of your potential customers?
When people hear “accessibility”, they often think along the lines of people using assistive devices, such as screen readers for the vision impaired. But web accessibility is so much more. It is the appropriate use of colors for the color deficient, appropriate spacing on menus for those with fine motor skills, and layout design to allow for assistive devices. The World Wide Web Consortium (W3C) has a good article on disabilities and has put together scenarios showing how different disabilities can affect a user’s experience. The growth of information, and importantly the ability to interact with others, on the Web has opened new doors and experiences for many who are homebound or otherwise unable to get out.
Social Networking is a prime example of a Web 2.0 application that can really benefit the disabled community. Yet, AbilityNet’s recent State of the eNation Report on the topic shows that social networking sites, such as MySpace and Facebook, are unfriendly to the disabled. The primary culprit is the visual-only CAPTCHA tools in place. While they may prevent spam, they also prevent most users with visual impairments, dyslexia, or learning disabilities from even registering. Once registered, even more problems exist. The report is a very interesting read, for those interested, at http://www.abilitynet.org.uk/enation85.
The idea of accessibility is larger than just the user experience, though. There are many United States regulations mandating accessibility for websites used by government entities. In 1998, Section 508 of the Rehabilitation Act was amended to mandate that the federal government grant access to those with disabilities that is comparable to the access granted to the non-disabled population. In a nutshell, all websites developed for use by the US Government or any of its entities must meet accessibility guidelines. Many states and other countries have also developed similar laws and regulations. We recently completed a website for a college part of the state university system. The number one requirement was that it be accessible.
Making Sites Accessible
Making a website accessible does not mean it has to be black text on a white background using default typefaces. From a graphical and layout perspective, AccessSites.org provides links to accessible sites that are neither boring nor bland. Examples include Seattle-based coffee.net and UK-based InRetirement Services.
Making websites accessible means you consider your audience-are they aging, likely to have disabilities of any kind. It means that you use common sense coding techniques. W3C gives us 10 quick tips to help create accessible websites.
- Images & animations: Use the alt attribute to describe the function of each visual.
- Image maps. Use the client-side map and text for hotspots.
- Multimedia. Provide captioning and transcripts of audio, and descriptions of video.
- Hypertext links. Use text that makes sense when read out of context. For example, avoid “click here.”
- Page organization. Use headings, lists, and consistent structure. Use CSS for layout and style where possible.
- Graphs & charts. Summarize or use the longdesc attribute.
- Scripts, applets, & plug-ins. Provide alternative content in case active features are inaccessible or unsupported.
- Frames. Use the noframes element and meaningful titles.
- Tables. Make line-by-line reading sensible. Summarize.
- Check your work. Validate. Use tools, checklist, and guidelines at http://www.w3.org/TR/WCAG
© W3C (MIT, INRIA, Keio) 2001/01 (source: http://www.w3.org/WAI/quicktips/)
The Web Content Accessibility Guide 2.0 at http://www.w3.org/WAI/intro/wcag.php provides some good information on the guidelines and more detail on how to achieve them.
Making your site accessible also means you validate your code. For a long time, Bobby from CAST was the standard. In 2004, it was acquired by Watchfire Systems and then sold to IBM in 2007, which has incorporated it into their Rational Policy Tester Accessibility Edition. There are still a number of free and low-cost tools available to developers. A fairly comprehensive list can be found at W3C (http://www.w3.org/WAI/ER/tools/complete). My personal favorite, though, is WAVE from WebAIM. It provides a nice visual interface, showing where problems may lie and how your website flows in a text-only browser. It also provides a Firefox tool bar, letting you evaluate pages as you access them.
Finally, there is a little known side benefit to accessible websites-search engine optimization. Search engines are essentially the lowest common denominator. They don’t care about the visuals, only about the content and how it flows. Sound familiar? Accessible design focuses on the content and delivering that content to the user-and that’s what a website should be all about anyway.
Learn more about Beth Weise Moeller