Accessibility testing and auditing

Estimated read time: 3 minutes 38 seconds

It is important to think about accessibility at every stage of your service design and delivery process. It is much easier to include accessibility at the start of a project than to fix issues in a finished product.

Test your product regularly. Make sure you test each of the different templates and/or page layouts you have on your site.

Use both automated testing and manual testing with a variety of assistive technologies. These tests will help uncover issues with design and content.

Steps to take

  1. Use an automated evaluator to highlight obvious errors
  2. Review web page or application for common accessibility errors
  3. Perform manual keyboard testing
  4. Perform manual screen reader testing
  5. Perform magnification testing
  6. Perform mobile testing
  7. Include people with accessibility needs in user testing

It’s important to do both automated and manual testing. You’ll miss some issues if you only do automated testing.

Automated Evaluation

  1. Perform an initial assessment of your website using an automated evaluation tool.
  2. Fix any errors reported for page template areas, like headers, footers and site navigation. Fixing these issues should reduce the number of errors per page
  3. Run the test again on each page and focus on page specific issues
  4. Continue until you have resolved all errors and reviewed all warnings

These tools are a good start for testing your website or application, but they do not prove your website is accessible. It is possible to pass an automated check and still not be accessible.

Once you’ve reduced your errors, you are ready to test your site manually.

Evaluation Tools

There are many online tools for automated testing:

There are also some extensions in Chrome Web Store that can be used for secure sites:

  • WAVE Evaluation Tool
  • Axe

Things to look for:

Look for common errors like:

  • missing alt tags for images
  • skipped or incorrect heading levels
  • empty links
  • table labels
  • tables used for layout
  • insufficient colour contrast
  • form fields without proper labels

Review Content for Common Errors

Some common accessibility mistakes are not detected through automated testing. Review the content on the site for the following:

  • videos without captions
  • text over images
  • text in all caps
  • non-descriptive links (links that say “Click here”, “Install”, etc)
  • content that is not in plain language

For a complete list of issues, review the WebAIM WCAG 2 Checklist.

Keyboard Navigation

Test your application using only keyboard navigation. Do not to use your mouse for any part of this test. This test should be repeated in several browsers for best results.

  1. Open a page in a browser
  2. Press the “Tab” key to navigate the elements of your site
  3. To go backward, press “Shift and Tab”
  4. To select an element, press the enter key
  5. To dismiss an element, press escape
  6. To interact with form elements, use the arrow keys to navigate within the element and use the spacebar to select/show dropdown items

Things to look for:

In keyboard navigation, you must be able access and operate anything that you can access and operate with a mouse.

Look for the following issues:

  • Do you have access to all information and functions that you can access with a mouse? This includes hover information and active status indicators
  • Does the tab order follow a logical sequence?
  • Does the site offer a “skip to navigation” and “skip to main content” option? Do they take you where you expect to go?

Screen reader testing

Screen readers use keyboard control for navigation. It is recommended to fix any issues with keyboard navigation first.

Navigating with a screen reader is different for each program and browser. Before you start testing, take some time to familiarize yourself with the screen reading software you are using.

  1. Allow the screen reader to run through the whole site
  2. If possible, cover monitor and navigate the site with a keyboard
  3. Take notes on areas where using the website or understanding the content becomes difficult

Screen readers

Some sample screen readers:

  • NVDA – free software (donation recommended)
  • ChromeVox – free Chrome extension
  • VoiceOver – Mac specific software
  • JAWS – premium software

Things to look for:

Listen for:

  • Incomplete or vague descriptions
  • Skipped content or missing context
  • Duplicated or repeating information
  • Excessively long or wordy information

Magnification Testing

Users should be able to increase magnification to 200% without using screen magnifiers. This test should be repeated in several browsers for best results.

  1. Increase the magnification of your browser to 200%
  2. Review the site for any challenges or changes to functionality

Things to look for:

  • overlapping content
  • content that runs off the screen and becomes unreachable
  • broken functionality, such as navigation menus or dropdown fields that do not work correctly
  • layout and formatting errors

Mobile Testing

With many users using smart phones and tablets, it is important to ensuring that people can access your website using different devices.

Test your website using a variety of:

  • mobile devices
  • operating systems
  • browsers
  • device types

Things to look for:

  • Does any functionality behave differently and is it still usable?
  • Does the layout display in a logical order and make sense for your user?
  • Is any information hidden or inaccessible?
  • Is there any impact to screen reading software?

User Testing

While self-auditing can improve the accessibility of your site, there is no replacement for testing with users who experience accessibility challenges daily. It is important to include these users in your service design and user testing.