Step 1. Set Up Your Tools

As part of Testing for Web Accessibility you will use a few different tools, so let's get them ready to use now.

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. 

Install & Configure

Deque's axe DevTools is a Chrome extension that you will need to add. It is available in the Chrome Store.

Once you've installed it, you need to configure it. You will only need to do this once.

  1. Open up your browser’s developer tools menu. You can accomplish this by right-clicking on the page and selecting “Inspect”.
  2. Select the Axe DevTools tab in the developer tools menu.
  3. Activate the "kebab" ⋮ button in the left panel (accessible name is "Options") and choose "Settings"
  4. On the right hand page choose these settings
    1. "Best Practices" (enable)
    2. “Use Experimental Rules” (enable)
    3. Select accessibility standard "WCAG 2.1 Level AA" (This is our current set of guidelines).
    4. Leave all other settings on the default

Quick Intro

To use axe DevTools:

  1. Open up your browser’s developer tools menu, if not open already. You can accomplish this by right-clicking on the page and selecting “Inspect”.
  2. Select the Axe DevTools tab in the developer tools menu.
  3. Click on the "Scan ALL of my page"
  4. On the left-hand side of the Axe DevTools you’ve got an overview of the results,  including priority, which need review, etc.
  5. On the left hand pane you have a total of the issues found, categorized by type. When you click on a category, a new pane will open that includes:
    1. The “Highlight” button will highlight the locale on the web page where the issue is.
    2. A description of the issue with a link ("more information") to additional info available for free on Deque University
    3. A snippet of the code that has caused the issue
    4. Guidelines for fixing the issue
    5. Information about the severity of the issue and which accessibility guidelines are being violated (e.g. WCAG 2.1, Section 508, etc.)
    6. The “</>” button next to the snippet will bring you to the problem code in your browser’s page inspector

If you'd like more of a tutorial, see axe DevTools: video introduction.

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. 

All Set?

Ok, on to testing...