Using the axe DevTools Extension with Screen Readers

The goal of this guide is to help familiarize people using screen readers with the axe DevTools Extension user interface. You will need to have installed the extension on the Chrome browser before starting this guide. If you wish to practice using axe DevTools, we invite you to use one of our demo sites on Deque University to practice. We have tried to write this guide in a way that allows you to use whichever screen reader you want to familiarize yourself with the user interface.

Before You Start

You should be able to follow along with this guide using your screen reader and screen reader commands. Links to each of the screen reader references pages are linked below:

The guide should provide you with information that should make it fairly effective for you to move through the axe DevTools Extension user interface and interact with it.

Opening axe DevTools

To open axe DevTools, you will need to do the following steps.

  • Once you have loaded the web page you want to test in Chrome, press control+shift+I on Windows or command+option+i on MacOS to bring up the axe DevTools.
  • Make sure your screen reader is in browse mode and move your focus to the top of the Chrome Dev Tools page. If your browse mode focus is at the top of the Chrome Dev Tools page, you should find your focus on a toggle button named "Select an element in the page to inspect it".
  • Remain in browse mode and start moving down the page. You will reach a series of tabs. The first tab will be named "Elements" These series of tabs are the Chrome Dev tools.
  • Continue moving through the list of tabs until you find either a tab named "axe DevTools" or a tab named "More Tools". If there is an "axe DevTools" tab, it will appear before the "More Tools" tab.
  • If you find the tab named "axe DevTools", press enter or spacebar while your focus is on that tab. This will open axe DevTools. You can ignore the next 2 steps which involves using the "More Tools" tab to open axe DevTools.
  • If you end up on the "More Tools" tab, press enter or spacebar while focus is on that tab. This will open a sub menu listing additional available tools.
  • Use the down arrow key to move down the list of tools until you find "axe DevTools" and press enter. This will open the axe DevTools.

At this point, your screen reader focus will be on a level 1 heading named "axe - web accessibility testing". If that is not the case, you can use your screen readers move to heading feature to find it.

From this heading, you will want to move down the page until you find the "Sign Up" or "Sign In" buttons. If you have not already signed up to use axe DevTools, you will want to use the "Sign Up" button now to complete that process. If you have already signed up, you will use the "Sign In" button to sign into axe DevTools. In either case, signing in or signing up will open a new window where you will complete the process.

axe DevTools Extension Screen Overview

The axe DevTools consists of 2 sections: a Navigation landmark and a Main landmark.

The Navigation landmark provides access to general axe DevTools features. This includes:

  • Buttons for signing in or signing up to use axe DevTools.
  • Button for displaying saved test results.
  • An Options button for accessing "My Account", "Settings" and "Log Out" features. NOTE: The items under the Options button can change depending on what you are doing in axe DevTools. So you may want to check there if you can't find what you are looking for elsewhere.

With the exception of the sign in button, sign up button , and My Accounts option (under options button), selecting actions in the Navigation landmark will cause new information and functionality to appear in the Main landmark of the Axe Dev tools panel.

Main Section (Landmark)

Once you have signed into axe DevTools, this is where you will likely spend most of your time.

Initially when the extension loads, the Main landmark will provide some information along with 2 buttons: "Full Page Scan" and "Partial Page Scan". If you activate the "Full Page Scan" button, the results of the scan will be placed here in the Main landmark. If you activate the "Partial Page Scan", the extension will walk you through selecting part of the page and then displaying the test results here in the Main landmark.

Scanning a Page

If you click the "Full Page Scan" button, you will likely hear a message from your screen reader announcing that the axe DevTools Extension is analyzing your page. If this is the first time scanning a page, you will be placed in a walkthrough mode. This walkthrough explains the various sections and features of the scan results. While you are in this Walkthrough mode, the screen will be presented a bit differently from how it will normally appear to you. However, it is worthwhile to step through the walkthrough to hear about the various sections and features of the scan results page. You can step through the Walkthrough by using the previous and next buttons. If you decide you want to get back to the scan results, you can click the "Dismiss Walkthrough" button to close the walkthrough.

The Walkthrough will not appear again after you have completed the first scan. There is a way to reset the Walkthrough so it appears again after your next scan. If you want to do this, use the Options button in the Navigation landmark and click the Settings option. The ability to reset the Walkthrough is available on the Settings page.

Scan Results Screen Overview

After the scan is complete and you have completed the Walkthrough, new content and functionality will appear in the Main landmark.

The following sections are a breakdown of the scan results page, how to get to that section, and what is contained in that section.

Top of the Scan Results

You can get to this part of the page by moving to the beginning of the Main landmark. This section contains skip links for jumping to the Rule Descriptions and Issue details. Those skip links are followed by a few buttons, the URL of the page scanned, and the name of the scan (if you saved this scan). The buttons in this section allow you to run a new scan, rerun the current scan, and save the results of the current scan (giving it a name.)

Total Issues (Level 2 Heading)

The level 2 heading "Total Issues" marks the start of the next section. This section gives you the total number of issues found and then breaks it down by different categories. There are 2 sets of categories and each is its own list.

The first list consists of a breakdown of the total issues by type: automatic, review, and guided issues.

  • Automatic Issues - these are the issues found by the axe-core rules.
  • Review Issues - These are the potential issues that you will need to look at and determine whether or not they are actual accessibility defects.
  • Guided Issues - These are the issues that were identified after running the Intelligent Guided Tests (IGT)

The next list categorizes the issues by their user impact. These will be broken down by:

  • Critical
  • Serious
  • Moderate
  • Minor

After these 2 lists, you are presented with the total number of all issues. This is followed by the button to run the Guided Tests.

If you want details on a specific category of issue (type or user impact), you can click on the corresponding link to display that information. For example, if you click the Serious link, your focus will be moved to the Rules Description landmark where it will only list the Serious user impact issues. If you click the Total Issues link (toward the top of the Total Issues section), axe DevTools will return to displaying all the issues in the Rules Description section.

Rules Description (Landmark)

The next section is the Rules Description section which is a landmark. It is similar to the previous section in that it is a list of the issues found by rule description.

The rule descriptions will include such things as "Elements must have sufficient color contrast" or "Document must have one main landmark". After each rule description is the number of issues found for that rule description. Each rule description is also a link. Clicking on the rule description link will change the issue details section of the page by displaying the first issue in that group of rule descriptions.

Issue Details (Level 2 Heading)

After the Rules Description section is the Issue Details section. This section will start with a level 2 heading. The text in this heading will change depending on the rule description you selected. If you selected the rule description "Elements must have sufficient color contrast", then the heading will be "Elements must have sufficient color contrast".

The Issue Details section of the page is broken down into further sections. Right after the heading is an Issue Pagination landmark. This sub-section consists of buttons that will allow you to move through the issues related to the rule description you selected. There is also information here that indicates how many issues there are in this rule description and which one you are currently reviewing.

After the Issues pagination, you will find a highlight checkbox, an inspect button, and a more information link. Checking the highlight checkbox will place a visual highlight on the web page where the issue occurs (if the element is off screen, a highlight indicating this will appear). Clicking the Inspect button will open up and move your focus to the Chrome Dev Tools inspect tool. This will place you in a treeview representing the DOM where your keyboard focus will be on the specific element mentioned in the issue. Clicking the More Info link will take you to a page on Deque University that provides more information about the issue and how to fix it.

The remaining sub-sections of the Issue Details section are all demarcated by headings that explain the information they provide. They include information such as:

  • Issue Description - a more detailed description of the issue.
  • Element Location - the CSS selector that points to the specific issue.
  • Element Source - The HTML related to the issue.
  • To solve this violation, you need to... - Recommendations for fixing the issue.
  • Other sections - which ones are displayed depend on the type of information that need to be provided about the issue.