Using axe DevTools for Automated Web Testing

axe DevTools Installation

  1. Download the axe DevTools extension for Chrome
  2. Go to the page you want to test.

Configuration

You will only need to configure it 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

Usage

  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

Multiple issues

If there were many issues of the same type you will see some left/right navigation on the top right that will take you through the grouped issues, showing you for each what the markup was, and if the “highlight” button is toggled, where in the page the current issue is.

Exporting the results

Click on the "Export" button at the bottom of the Summary panel and choose Export. Choose CSV from the options available.

Once You're Done

Automated testing tools like axe Expert can only flag a percentage of accessibility issues. To catch the rest, you will need to do functional testing.