An Idiot’s Guide To Accessible Website Design

By / Dec 8, 2009 / Tips

If you are designing web sites in the UK, you probably already know that the Disability Discrimination Act (DDA) mandates web sites be accessible by visually and physically disabled persons. But even if you work in a locale that doesn’t have any accessibility requirements yet, web designers have an obligation to make their clients’ web sites available and accessible to anyone who wishes to visit.

Why? According to a report by the Danish Center for Accessibility, as many as 25% of the world’s Internet users have some sort of visual, auditory or mobility disability.

Fail to take into the consideration the needs of these people and you are depriving your client the opportunity to connect with a huge audience. Not only doesn’t that make good business sense, but also you could end up breaking the law. For example, if you’re working for an organization that is hoping to do business with the U.S. government, you’re going to run up against the “508 Act”.

This regulation requires all Federal agencies that “develop, procure, maintain, or use electronic and information technology”, to provide access to disabled users that is comparable to access available to everyone else.

How To Meet Accessibility Requirements

In order to provide for the access needs of the disabled, it’s important to understand the technology challenges these users face everyday.

  • Use of non-standard browsers, earlier versions of mainstream browsers, or specially designed text-to-speech and text-to-brail readers that do not function in the way we normally understand browsers to function.
  • Lower screen resolutions, the need for larger fonts, and reduced screen size.
  • Colorblind users who cannot easily “Click the red button to cancel your order.”
  • Users with motor impairment may use non-standard pointing devices and keywords.

Fortunately, The Guesswork Has Been Eliminated

The World Wide Web Consortium (W3C) maintains accessibility standards and best practices on their All Standards and Drafts page; of particular interest are the Web Content Accessibility Guidelines (WCAG) 2.0.

Accessible Website Design

That is the document that provides accessibility recommendations and guidelines designed to accommodate people with a wide range of disabilities.

You Can Take Advantage Of Web Accessibility Design Tools

Recognizing the need to provide support for the world’s disabled Internet users, a number of companies have developed free and low cost tools to help designers comply with accessibility guidelines. Here are a few of the available tools that will turn you into an accessibility expert.

WAVE

Accessible Website Design

For those of you that hate reading reports, and believe a picture really is worth 1,000 words, WAVE is an excellent tool for you. Rather than produce reports, WAVE displays the actual web page with embedded icons and other visual indicators that point out where potential accessible issues exist.

WAVE provides an amazing number of ways you can use this tool. In addition to actually embedding WAVE validation code into your designs, you can use any of these options:

  • Enter the URL of the page to be checked into a form on WAVE’s site.
  • Copy and paste the code to be checked into a form on WAVE’s site.
  • Install the Firefox Toolbar.

Color Oracle

Accessible Website Design

Color Oracle is a colorblindness simulator for Window, Mac and Linux. It takes the guesswork out of designing for color blindness by showing you in real time what people with common color vision impairments will see.

Image Analyser

Accessible Website Design

This service examines all images found on a web page to check for any accessibility issues. Simply enter the URL of any website, and it does the rest. The width, height, alt, and longdesc attributes are examined for appropriate values.

Colour Blindness Simulator

Accessible Website Design

Colour Blindness Simulator is a web based tool that reveals how your images may appear to users with a variety of color blindness conditions.

Readability Testing

This online tool will perform tests on your text to determine it’s level of readability. Your text will be penalized for polysyllabic words and long, complex sentences. Your writing will score better when you use simpler diction and write short sentences.

Don’t Overlook Web Accessibility Evaluation Tools

In addition to the accessibility design tools, there area number of free and low-cost accessibility evaluation tools that perform in-depth evaluations of Web pages and generate extensive reports pertaining to accessibility issues.

Some of the tools are highly specialized and focus on specific disabilities, such as blindness, while others provide information on accessibility issues in general.

The W3C maintains a complete list of most commonly used accessibility evaluation tools.

Is Accessibility Design In Your Future?

It should be, if it isn’t already. In addition to the UK’s legal requirements, many other countries and local governments are becoming more involved in ensuring equal Internet access to everyone regardless of physical disabilities. The W3C maintains a regularly updated list of new legal requirements worldwide.

In addition to simply staying legal, discussing accessibility with your clients could be a great way to set you apart from your competitors who may not be as knowledgeable about the subject as you now are.

Here’s How To Really Understand How Important Your Job Is

If you really want to see firsthand how much a difference you can make in the lives of disabled people by designing Web sites that are accessible, spend a few hours sitting next to a blind or physically challenged user.

Once you witness for yourself how difficult the Internet can be when designers ignore 25% of the Internet user population, you’ll keep accessibility top-of-mind whenever you sit down to design.

About the Author

Sandy Butler is a research analyst at Accredited Supplier, where she researches website design companies and their practices and trends. Sandy’s research has been featured on top websites including TechCrunch, Brand Republic and SitePoint.

  • http://welshstew.co.uk WelshStew

    You have your interpretation of the DDA all wrong. The Act, in no shape or form, mandates how companies should make their services accessible.

    The Act only states that companies are required to make reasonable adjustments for disabled people.

    Although making your website accessible to all users, including those with disabilities is the “gold standard” by which to develop by, it is not a requirement by law.

    A reasonable adjustment could be as simple as providing a telephone number through which they can take advantage of your service.

    Cheers

  • http://www.simonday.com Simon Day

    Without real test cases the wording of the law still remains vague. Many businesses will argue that just having alt tags on the majority of images is sufficient enough to convince a jury that you had tried to comply EVEN if it was impossible for the visitor to ever be able to use the site. All you need to do is prove you “tried” which is why so many of the biggest sites in the World can still get away with this.

    Early 2000 businesses all over the UK were hiring web designers with strong W3C and accessibility standards knowledge. In the last 4 years no-one has even asked the question. The law could of had a lot of bite but as it stands now its bite is same as my nans when her teeth are out.

  • http://www.visualswirl.com/ Chris Thurman – Visualswirl.com

    I’ve never seen some of these tools before. While I’m aware of the need to address many accessibility issues, colorblind users had not even crossed my mind.

  • Connie Malamed

    Kudos on this article and thanks for tackling this subject. Lots of good tools I hadn’t heard of too. Readers might benefit from an article I wrote on designing with the color blind in mind @ http://understandinggraphics.com/design/designing-for-color-blindness/
    Best Regards,
    Connie

  • http://www.astagramstudios.com Shankar Siva

    Wow!
    What a guide. Definatly a good one to implement.
    Thanks for sharing

  • http://www.webmediabuilder.com Amy

    Nice post, i love this sites it helps me a lot..more

  • http://www.teabagstudios.com teabag studios

    nice article Sandy!

  • http://www.nopun.com Noel Wiggins

    I love the wave tool I have added that to my tool set of accessibility tools…

    Thanks and Regards

    Noel for Nopun.com
    a graphic design studio

  • http://www.jannis-gerlinger.de Jannis Gerlinger

    I love the example websites. great! keep going.

  • http://www.access-bydesign.com Jess

    All this is great to see but as a (disabled) designer in a company set up to create fab websites with top-level accessibility as standard, one of the saddest things I have had to face is that most businesses don’t really care about web accessibility – unless its cheaper! I am also not sure about the “spend a few hours sitting next to a blind or physically challenged user..” tone here. As well as myself being disabled, I employ a ‘pool’ of accessibility testers whom I’m sure all would start laughing at the ‘violins out’ justification here. Yes,we all find it hard online(and do a lot of swearing at websites). Yes, most designers just see WCAG as a hassle. But how about the fact that accessible design makes sites work on phones, ipod touch, sky + , x box 360s, blackberrys, iphones… accessible designs helps EVERYONE not just us poor sad disabled folks :-)

  • http://www.aimonkey.com Waasys

    Nicearticle, thnx!

  • http://www.uxbooth.com Matthew Kammerer

    This looks a whole lot like a post I wrote in July. Hmm.

    http://www.uxbooth.com/blog/5-tools-to-increase-accessibility/

    :)

    • http://henryjones.us Henry

      I’m not sure if you’re making an accusation. If you are, I don’t think it could be further from the truth. Yes, the articles are both about accessibility and our article has 4 of the 10 tools that you list, but that’s about where the similarities end. So I’m not sure what you mean by “Hmm”. :)

      • http://www.uxbooth.com Matthew Kammerer

        I was initially frustrated but no hard feelings. It happens, just one of the first times it has happened to my content.

        Thanks for the follow up!

  • http://www.squiders.com Web Design Maidstone

    some very cool tips, worked with a blid client the other month and was amazed at some of the software out there although JAWS kept breaking my machine

  • http://blueflavor.com Nick Finck

    Very good post! Its funny that the tools you mentioned seemed to be almost exactly the same tools Matthew Kammerer mentioned on his blog in July http://bit.ly/WVcQ3 I guess there are not that many accessibility tools out there eh? What are the odds in that! 😀

    • http://henryjones.us Henry

      Glad you liked the article Nick. Actually there are tons of accessibility tools out there. As Sandy mentions in the article, W3C maintains a complete list of tools here: http://www.w3.org/WAI/ER/tools/complete

      You didn’t really read the article did you? 😉

  • http://www.webmediabuilder.com Amy

    actually i’ll never seen this kind of site ..it’s different …

    thanks for sharing

  • http://coffeetableuk.co.uk George Vincent

    A pal recommended me to look at this post, brill post, fanstatic read… keep up the cool work!

  • http://www.admixweb.com Holly

    Very good article! Great ideas, and I like how you made them simple :)

    I have some article on accessibility that your readers may find usuful as well. I hope they help: http://www.admixweb.com/tag/accessibility/

  • http://bit.ly/aTMnK3 Towanda Wischmeier

    Thanks for the inspiration, your blog looks excellent! I have been having trouble getting motivated with mine but this definitely pumped me up!

  • Robert

    I had bookmarked all the sites you suggested. I will refer them in the future to create better navigation for my website.

  • http://www.darrenhuskie.com/ Darren Huskie

    This article has provided me with plenty food for thought and stimulated some further research into web accessibility.

    Will try some of the tools too, especially WAVE.

    Thanks

  • http://superbwebsitebuilders.com/ Howard Steele

    Very useful, simple and straightforward.
    Thanks!