WCAG 2.0 AA Guidelines (Part One): 7 ways to check your website for accessibility

The Government of Ontario has mandated that websites for public sector organizations, businesses or non-profit organizations with more than fifty staff members must be WCAG 2.0 AA guidelines compliant by 2014:

“All public websites and web content posted after January 1, 2012, must conform with WCAG 2.0 Level AA other than criteria 1.2.4 (captions) and 1.2.5 (pre-recorded audio descriptions).” (Source)

So what are the WCAG 2.0 AA Guidelines?

WCAG is a set of guidelines for making your website content more accessible for people with disabilities. There are three success levels: A, being the lowest, AA and AAA, being the highest. For a complete list of all the WCAG levels, visit W3C.

Pixelcarve has compiled a list of tests that you can conduct to check your website for accessibility:

1. Check your site by turning off all the styling and hiding all the images

   There are several browser extensions you can download to disable CSS and hide images. The one we use is called Web Developer extension (http://chrispederick.com/work/web-developer/), which is available for Chrome, Firefox and Opera. After turning off your styling and hiding all the images, make sure the content of the website is still understandable by asking yourself a few questions:

   • Are elements of the page in the right order?
   • Is the text content sufficient without the images?
   • Does all the information have distinguishable headings?

2. Is your site still readable after you zoom in at 200%?
   

   Zoom in on your website in your browser as far as you can— is it still readable? Are there any elements that overlap each other, disappear, or get cut off? Does the site require horizontal scrolling anywhere?

3. Make sure all pages are viewable in greyscale

   The quickest way to make sure the design of your website is distinguishable without the use of colour is by viewing it in greyscale. If you have the design file, add a Black & White layer on top of your design in Photoshop and make sure all the information is still readable. If you are at the development stage, you can download a Chrome plugin (https://chrome.google.com/webstore/detail/grayscale-tool/odolflphhameojgliipcnahnipmogigo), press shift + g and your website will be automatically converted to greyscale. How does your site look in black and white? Is there enough contrast to distinguish all the information?

4. Use a colour contrast checker

   We use a browser extension called ColorZilla (http://www.colorzilla.com/) for extracting colour values from websites we are working on. Copy and paste the hex code value into a colour contrast checker (http://webaim.org/resources/contrastchecker/) to make sure all the text on the site is readable. As a side note, large text defined by WCAG 2.0 AA Guidelines is 18 pixels or larger, or 14 pixels in bold font or larger.

5. Make sure your site is accessible by keyboard

   Test your website by using your keyboard only, are you able to navigate through the entire site? Can you tell where your keyboard focus is on the site? Does the navigation order make sense?

6. Find a good evaluation tool
   

   There are many tools out there that will help you test your website for accessibility. Visit http://www.w3.org/WAI/ER/tools/ for a list of available tools. Here’s a list of tools that we recommend:

   • FAE (http://fae20.cita.illinois.edu/): It provides a detailed list of violations, warnings, manual checks and passes with detailed description and links to each WCAG success criteria. You can sign up for a free account to evaluate multiple pages.
   • WAVE (https://wave.webaim.org/toolbar/): WAVE is a browser extension available in Chrome and Firefox that can show errors right on your website. You can turn off styling, show structure and orders, etc.
   • PowerMapper (http://try.powermapper.com/Demo/SortSite): PowerMapper is an online report of accessibility, browser compatibility, errors, privacy, search engine guidelines, web standards and usability. They also have a desktop version for purchase.

7. User Testing

   Observe users with disabilities navigating through the site and discuss possible issues they may be having and find if there are ways to improve your website.

Check back soon for part two of our WCAG 2.0 AA Guidelines series, where I’ll explore tips and tricks for making your website WCAG compliant.