An Idiot’s Guide To Accessible Website Design

By / Dec 8, 2009 / Tips
shares

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.

24 Comments

  1. WelshStew
    December 8, 2009

    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

    Reply
  2. Simon Day
    December 8, 2009

    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.

    Reply
  3. Chris Thurman – Visualswirl.com
    December 8, 2009

    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.

    Reply
  4. Connie Malamed
    December 8, 2009

    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

    Reply
  5. Shankar Siva
    December 8, 2009

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

    Reply
  6. Amy
    December 8, 2009

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

    Reply
  7. teabag studios
    December 9, 2009

    nice article Sandy!

    Reply
  8. Noel Wiggins
    December 9, 2009

    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

    Reply
  9. Jannis Gerlinger
    December 9, 2009

    I love the example websites. great! keep going.

    Reply
  10. Jess
    December 9, 2009

    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 :-)

    Reply
  11. Waasys
    December 10, 2009

    Nicearticle, thnx!

    Reply
  12. Matthew Kammerer
    December 10, 2009

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

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

    :)

    Reply
    • Henry
      December 10, 2009

      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”. :)

      Reply
      • Matthew Kammerer
        December 17, 2009

        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!

        Reply
  13. Web Design Maidstone
    December 10, 2009

    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

    Reply
  14. Nick Finck
    December 10, 2009

    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! :D

    Reply
    • Henry
      December 10, 2009

      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? ;)

      Reply
  15. Amy
    December 15, 2009

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

    thanks for sharing

    Reply
  16. George Vincent
    December 18, 2009

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

    Reply
  17. Holly
    February 21, 2010

    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/

    Reply
  18. Towanda Wischmeier
    March 3, 2010

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

    Reply
  19. Robert
    March 15, 2010

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

    Reply
  20. Darren Huskie
    April 27, 2010

    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

    Reply
  21. Howard Steele
    July 29, 2013

    Very useful, simple and straightforward.
    Thanks!

    Reply

Leave a Reply