Using Axe Expert for Automated Web Testing

We have a limited number of licenses for Deque's axe Expert. This automated web testing tool requires you to be comfortable with HTML, CSS and Javascript. (There are also automated web testing tools that don't require technical skills.)

If you download axe Expert: send an email to accessibility.axe@umich.edu so that we can put you on the list of users who have a license.

Note: if we run out of licenses for axe Expert, we recommend the following two products. Both are free and both use the same testing engine as axe Expert, so will produce similar results. Both contain extensive scaffolding and guided testing wizards.

axe Expert Installation

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

Configuration

  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 Expert tab in the developer tools menu.
  3. Select “Rules” from the menu in the left panel.
  4. Select WCAG 2.1 Level AA. (This is our current set of guidelines.)
  5. Select “Test Best Practices” and “Use Experimental Rules”.

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 Expert tab in the developer tools menu.
  3. Hit the big “Analyze” button. On the left-hand side of the Axe dashboard, you’ve got a handy list of accessibility issues and how many times the issue occurs on the page. When you click on an issue, a detailed explanation is provided to the right of the list and includes:
    1. A description of the issue with a link to additional info available for free on Deque University
    2. A snippet of the code that has caused the issue
    3. Guidelines for fixing the issue
    4. Information about the severity of the issue and which accessibility guidelines are being violated (e.g. WCAG 2.1, Section 508, etc.)
    5. The “Inspect” button will bring you to the problem code in your browser’s page inspector
    6. The “highlight” button will highlight the locale on the web page where the issue is.

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.

Page insights

Switch to Page Insights” via the menu in the left panel. Items of interest:

Headings

You will get a schematic representation of the heading structure of the document. Look for one h1, no heading jumps, proper nesting..

Links

You will get a list of the links, each with the link text. Look for:

  • good descriptive link text
  • no repeated link text
  • no empty link text.

Landmarks

Landmarks provide structure to the web page. This feature identifies all landmarks being used. Look for at least one “main” landmark. Better: other landmarks are present, such as “navigation,” “banner,” “contentinfo”. Click “Highlight All” and check that the landmark actually wraps the appropriate blocks. If there is more than one “navigation” landmark, ensure that they have names that disambiguate them.

Exporting the results

Click on the stacked dots button on the top right of the Axe Expert pane and choose Export axe Expert CSV.

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.