Testing for Web Accessibility - Step 1: Set Up Your Tools

When testing for web accessibility you will repeatedly use a few different tools. Set them up first to get ready.

Note: This guide assumes you are using the Chrome web browser for testing.

Developer Tools

Chrome's Developer Tools (part of the browser) lets you view the underlying code (HTML, CSS, JavaScript) of a web page more easily than the old method of “View Source”, which no longer works for many modern pages.

Quick Intro

Chrome's Developer Tools has a number of features, but for these tests, you will focus on just the Inspector.

To inspect something on a web page:

  1. Select the item on the page and right-click (Control-click for Mac), then select Inspect.
  2. In the Developer Tools pane > Elements tab that appears, you will see the the page’s code with the highlighted section corresponding to the page element you selected. If there is a disclosure (right-facing) triangle, you can click on it to view the rest of the code for that element. (See the right side of the pane for more info about the code you've selected.)

If you want to inspect a different element on the page and you still have the Web Developer pane open, just click on the Inspect icon in the top left corner of the pane and then select the new element.

When you’re done inspecting, you can close the pane by clicking the x in the top right corner.

axe DevTools

Deque’s axe DevTools is an automated accessibility testing tool that will check web pages for accessibility errors that can be detected by the software. 

Stark Chrome Extension

This extension checks color contrast and can simulate color blindness. It is intuitive and requires a simple installation.

Bookmarklets

In the tests, you will also be using some bookmarklets, which simply add bookmarks to your browser that you can click on to test pages.

You can install all the bookmarklets now or install each one at the time of the test. 

Issue Reporting Worksheet

This one is optional but can help save you time. Just make a copy of the Google Sheet <product name> Technical Review.

All Set?

Ok! Move on to run global tests.