Designing Accessible Websites

For the third-largest minority group in the United States — more than 40 million people — the vast majority of Websites are partially or completely inaccessible.

The idea of a Website that excludes African-Americans or Latinos is all but unthinkable, yet Americans with disabilities are constantly faced with Websites that don't take their needs into account. Fortunately, many of the world's most popular Websites — among them Yahoo!, Google, YouTube, and Wikipedia — are working to become accessible to disabled users, but there are many, many more sites out there that still have a long way to go.



We all know that no one intentionally sets out to create an inaccessible Website. After all, the point of having a Website is to reach people — and most Web designers would do anything to reach 40 million of them. But for many designers and developers, the idea of creating an accessible Website is incredibly overwhelming, or even stifling.



I had a chance to speak with designer Dan Rubin and developer Chris Heilmann at the Webmaster Jam Session earlier this year. These guys live and breathe Web accessibility, and they were more than happy to answer my questions on the topic.



“[There are] a lot of preconceived notions that things are somehow difficult to implement, that you lose a lot of visual control, and that it has to be ugly,” Rubin said. “All those things are wrong.”



Heilmann echoed this sentiment: “Developers think, 'I can't use the cool, new technologies because they're not accessible,' rather than looking at these technologies and making them accessible. So it's like people don't see an accessible interface as an opportunity to make a cooler interface, but as something that is dumbing down what you really want to do.”



The fact is, accessibility isn't at odds with performance or attractiveness at all. An accessible Website is a well-designed Website — one that far more people than the disabled can enjoy. Websites designed with accessibility in mind also work better with dial-up connections and hand-held devices such as BlackBerries and iPhones — and as an added bonus, they're usually also better indexed by search engines like Google.



It's worth noting that there may even be negative consequences of ignoring accessibility. On August 27 of this year, Target paid out more than $6 million as part of a class-action lawsuit filed by Bruce F. Sexton, Jr. and the National Federation for the Blind. The retail heavyweight's Website was inaccessible to blind users, and the court ruled that this violated the Americans with Disabilities Act.



Naturally, it's the wrong attitude to feel strong-armed into designing an accessible Website out of fear of being sued. The lesson to be taken from the lawsuit is that Target lost a lot more than just $6 million: It also lost millions of potential customers, not to mention the respect of a lot of people, abled and disabled alike.



The right attitude is to approach Web design — particularly with the goal of accessibility — with an open mind and a passion for originality. It's also important to remember that setting boundaries can sometimes force you to be more innovative.



“As a designer, constraints are key,” Rubin said. “If you don't have constraints, you can get lost very easily, and there's no direction. ... You use the constraints to your advantage.”



Heilmann recommended I check out BBC Ouch! for an example of an attractive, successful site that works within the restrictions of accessibility. The site, which centers around everyday disability issues, is an example of the sort of strong Web design that everyone — especially the disabled — can appreciate.







At first glance, this site looks no different from most others. It's visually appealing and rich with media such as images and podcasts. Yet Ouch! also offers text-only and high-contrast versions in easy-to-locate but unobtrusive locations. These sorts of accessibility-friendly options are prevalent throughout the site. For another example, check out the option to view a transcript of “Dear Disabled Friend,” a comic that regularly appears on Ouch!:







This transcript probably took all of 30 seconds to write, and another minute or so to include in the page design. In no way does it detract from the site — it's hidden by default — but it provides a thoughtful service to blind visitors that many Websites would neglect to include. Clearly, if we take Ouch! as an example, attractive functionality and accessibility are not mutually exclusive.



When I asked Rubin and Heilmann to give me an example of a site that does a poor job of being accessible, Rubin quipped with a wry smile, “All the rest.”



“We don't have time,” Heilmann added.



“That's unfortunate,” I said.



“The more unfortunate thing is that it's not intentional,” Rubin said. “It's because of just a lack of knowledge and awareness. Ignorance, really, but people are just ignorant of just how easy it is to make it work for everybody. And that's all it takes, is a lack of thought, a lack of awareness, and things can go horribly wrong.”



In order to keep things from going horribly wrong, it's important to know who you should be designing for. Take into consideration people with vision problems, including blindness, color blindness, and weak eyesight. The blind may use screen readers or hardware that converts onscreen text to Braille, but Web users who are farsighted may simply enlarge text onscreen using their browser or screen magnification software. Enlarged text, particularly links, is also helpful for people with conditions such as cerebral palsy, Parkinson's disease, muscular dystrophy, or stroke, because they cannot use a mouse with precision. Some disabled users may not be able to use a mouse at all — instead, keyboards, speech recognition software, and single switch access devices are all viable alternatives.



Another major group to keep in mind are the hard of hearing, who rely on closed captioning, sign language, and written transcripts to fully enjoy audio and video. It's also important to remember that people susceptible to seizures may not be able to view flashing screens, and that those with dyslexia and dyscalculia may have difficulty reading the provided content.



The most helpful additions you can make to your site are high-contrast and text-only versions, as well as full transcripts of any audio, video, Flash™, and other multimedia that appears. Those who want to know the official guidelines for designing for accessibility should check out the Web Accessibility Initiative's Web Content Accessibility Guide and Section 508 of the U.S. Rehabilitation Act. The latter is only required for federal sites, but it lays out some helpful guidelines for people who want to design according to the U.S. government's accessibility standards.



Although it's helpful to understand the different kinds of disabilities your Web page may encounter, Rubin warned against thinking about designing for accessibility as “a checklist of types of disabilities.”



“It's so much more than that,” he said. “One of the important things to remember is that making a site properly accessible makes it easier to use for everybody.”



That's because accessible sites operate on the principals of proper Web design. As Heilmann explained, “it's all about structure and flexibility. If your site works without any style sheet, without JavaScript, and it gives a proper structure ... then you have a great step towards a good product.”



This means your site should use semantically correct (X)HTML for structure and content, and CSS for layout. Your (X)HTML content must be logically structured, and elements should be grouped in a coherent fashion. This is especially important for people who use screen readers, which read page text in order and get confused by bad (X)HTML such as table-based design. Screen readers also can't read Flash™ or JavaScript (neither can site spiders used by search engines), so you should make sure that all of your links and text are accessible via good, old-fashioned (X)HTML.



“If you have something that refreshes a page, have a real link that points to a real document, and not just some random JavaScript or a Flash™ movie file or whatever,” Heilmann said.



Another basic design rule that proves immensely helpful for the disabled but also tends to get lost in the fray is the use of alt tags for images and graphics. If you want to go a step above and beyond, include a description of the image à la “Dear Disabled Friend.” At the very least, you should incorporate appropriate context for your images in the text surrounding them. This isn't to say you should include a clunky description that slows down your narration, but it is good practice to make sure your pictures and text work in conjunction. Think of it like an article in a newspaper. The picture or graphic isn’t thrown in just to take up space — it serves to supplement the story.



In the same vein, you should never, ever try to compensate for weak content with superfluous visual elements. There's no substitute for clear, well-written content. Even if you're unsure of your writing abilities, there's never any excuse for spelling errors. Not only is spell checking a good idea in general, but it's also important to remember that typos can mess up screen readers, which obfuscates your meaning even more.



Perhaps the most important design tool to remember when designing for accessibility is progressive enhancement.



“When you take away the high-level interaction, the high-level layers, take away JavaScript, it should still work,” Rubin said. “Take away CSS, it should still work. That's not really a hard thing to do, but it requires thinking about it from the beginning and building it in that layered form.”



“It's looking at the depth of the pool before you jump in,” Heilmann added.



“Again, not hard,” said Rubin, “but if you don't think about it, it's easy to break your neck.”



The best Web designers know the importance of looking before they leap. This means testing their sites in multiple browsers — Firefox, Internet Explorer, Chrome, Opera, Safari, even Netscape. For the accessibility-conscious designer, it only makes sense to add a few other steps to this rigorous testing routine. This includes viewing the site in a text-only browser such as Lynx, viewing the full site in monochrome display, trying out a text-to-speech browser such as JAWS, Window-Eyes, or Fire Vox, using the site without a mouse, and disabling JavaScript and CSS to see if the site is still navigable.



If the designer has kept the principles of progressive enhancement in mind, made sure to use structurally valid (X)HTML, and provided text alternatives for multimedia — in other words, if the designer has adhered to the rules of proper Web design — the site should work just fine for everyone.



“It's not that hard,” Rubin said. “This stuff won't hurt you, and it's not difficult. It's actually really easy, and it'll make your life easier. You just have to open your mind to it.“