Using the axe Developer Hub Results Dashboard

This article describes how to view the accessibility defects from your test runs. axe Developer Hub allows you to see all of the accessibility issues on your website, filter issues, and find in-depth information about each accessibility issue.

Results Page

Each test run has a page similar to the following:

The page components are labeled A to D, and each of them is discussed below.

A: The Breadcrumb Path and Sharing Button

At the top of the report is the first block of information: The breadcrumb path (showing the navigation path to the current page) on the left; on the right is the share button, as shown below:

The components of the path are, from left to right:

1. Top-level link to the Projects page (shows your axe Developer Hub projects)
2. Link to this project, content-site (shows the Git branches in this project)
3. Link to the Git branch, content-changes (shows the commits in this branch)
4. The message associated with this commit (html edit), (for example, this commit was created with command-line git as git commit -m "html edit")

The Share button (on the right) copies a link to the current page to the clipboard so you can send it to others.

B: The Results Summary

The next section of the report is the summary, as shown below:

At the top, the commit's message and SHA appear next to COMPARING: along with the commit message and SHA of the commit it's comparing to. On the left is the number of accessibility defects above a set threshold, which is currently zero. On the right is a table of defects grouped by impact. Clicking on a number in the table sets a filter only to show those issues. See C: The Filter Selector below for more information about filtering.

To compute the change in issues, axe Developer Hub follows this procedure:

1. Compares this commit to the previous commit in the same branch (when you navigate here from the Commits page).
2. Compares this commit to the head commit in the default branch (when you navigate here from the Branches page).
3. Compares this test run to the last test run (when you navigate here from the Gitless page).
4. Performs no comparison (when none of the above three cases aren't satisfied). This case occurs, for instance, if this is the first commit or there are no other branches. All issues are considered new in this case, and the header will read SHOWING: instead of COMPARING:.

C: The Filter Selector

This section shows the selected filters and provides a button to change filters.

In the top section on the left are the current filters. On the right is the button for selecting the filters, and it is followed by the export issues button. The bottom section allows you to choose a page state or all page states to show its issues. The select filter button shows the dialog below:

The filters dialog allows you to filter the accessibility results:

• By impact: The number of issues in each impact level appears in parentheses after each impact level.
• Whether they're new issues: Issues are considered new if they appear in the current commit (if using Git) or test run (if not using Git) compared to the previous commit or test run.

Two additional filter options are currently unchangeable:

• Best practices issues
• WCAG conformance level

By clicking on the export issues button, you will see the following dialog:

For more information on exporting, see Exporting from axe Developer Hub

D: Issue Defect Details

The last section of the report shows the details of each accessibility defect in this test run:

The left side of the panel displays accessibility issues grouped by their issue types, while the right side provides details about each issue. You can select an issue to view its details or collapse the left panel with the control in the top row of this panel.

For a comprehensive discussion of a specific accessibility issue, you may click on the More information button to redirect you to the information page on Deque University's site. Click on the SHARE ISSUE button to copy a link to the current page to the clipboard for sharing with others. If there are multiple issues, you can review their details by clicking the arrows on the right side of the defects details panel.

At the bottom of the panel, you can find information about the issue's impact, the time of the test run, and the WCAG standards that cover the issue.