Website Accessibility - How to design websites to include everyone

Recently I worked as part of a team on the design and development of a large US healthcare company website.  The website sells healthcare insurance to pensioners, so one of the conditions was that it had to be accessible to all.  A lot of work went into making sure that the website met these accessiblity standards - ranging from correctly-formed html code to ensuring that the color scheme provided sufficient contrast when viewed by someone having color deficits.  As part of the user testing, a blind person tested the entire site using a screen reader, to ensure that the site could be easily navigated without seeing a thing.

Here are some resources and tips that I've gained from the experience - hopefully you will be able to re-use some of these to make your website accessible to all.

First, what is web accessibility?

Web accessibility can be referred to as "inclusive design". Basically, it means making your website usable by people of all abilities and disabilities.

Web accessibility is achieved by following the WCAG (Web Content Accessibility Guidelines) guidelines as specified by W3C (World Wide Web Consortium). These guidelines help designers and developers integrate best practice accessibility features into the website.

For example, some small but significant steps you can take include providing text equivalents for images and naming links meaningfully.

Development and Design Guidelines

• Useful link text
  • Link text should be meaningful but brief
  • Use the TITLE attribute to provide a more descriptive string
• Good ALT text for all graphics
  • Every image should have ALT text
  • ALT text should convey the important information in the image
• Do not require the use of style sheets
  • Writing semantic, well-formed code means that your website will make sense even if the stylesheets have ebbn disabled
• Proper use of tables
  • Make sure that tables make sense when read from left-to-right, top-to-bottom
  • Use the TITLE attribute to provide appropriate names for rows and columns
• Good keyboard navigation

• The TAB key moves between links in the order they are defined in the HTML. Be sure it generally moves from left to right and top to bottom, but does not skip back and forth between groups of items

You can check your website's HTML to see if it conforms to W3C standards.

Color Guidelines

Color contrast of a website is one of those things that many designers take for granted. Sometimes, we assume that if it looks good to us, then it must look good to everyone. However, if text does not have sufficient contrast compared to its background, people will have problems. People with color blindness or other visual impairments as well as people browsing the Web under less than ideal circumstances (bad monitor, window reflections, sunlight hitting the screen) may not be able to read the text, at least not without difficulty.

A very brief explanation of how color contrast ratios are calculated is in order. There are different algorithms used to calculate contrast ratios. Some tools use the luminosity contrast ratio algorithm mentioned by the WCAG (Web Content Accessibility Guidelines) 2.0 working draft, while others use the color brightness and color difference algorithms that are mentioned in a companion document to WCAG 1.0. Some even use both.

One color contrast tool that I use is called Check My Colours. This handy website reviews your website and notifies you of any color schemes that should not be used together.

I hope these tips will help to make your website more accessible to all. For anyone interested in finding out more about this, please visit my online marketing and web design company.

If you are interested in increasing traffic to you website, click here!