Use Axe Expert with Assistive Technology

Link to Use Axe Expert with Assistive Technology copied to clipboard
warning

The axe Expert extension is officially retired. Read more about this on the axe Expert Replacement page. These pages will be taken down in July of 2024. Email helpdesk@deque.com with any questions or concerns.

Deque Systems, Inc. considers NVDA/Windows the main platform for screen reader users of the axe Expert Extension. We recommend using NVDA or JAWS on Windows, and VoiceOver on Mac.

Before You Begin:

Please see axe Expert Extension for Chrome VPAT.pdf to review Deque's voluntary product accessibility conformance report for axe Expert Extension.

Use axe Expert Extension for Google Chrome with NVDA

Chrome DevTools Keyboard Shortcut Reference:

Before you begin: Google has recently updated the Chrome browser DevTools User Guide and web reference materials. For keyboard shortcuts generally applicable to using axe Expert Extension in Google Chrome, see Keyboard Shortcuts Reference - Google Developers Chrome DevTools.

The following instructions generally explain how to use the axe Expert Extension in Google Chrome with Windows-based screen readers, including NVDA. Instructions are provided to install, launch, navigate the user interface, adjust settings, perform an accessibility analysis, and export results. This documentation does not include instructions for working with the axe Expert Extension SimulAT or Scripting functionality in NVDA, nor do the instructions contain the level of detail involved in the remainder of this user guide. The documentation included here serves only as a quick start guide for users of the NVDA screen reader software.

In this topic:

Install the axe Expert Extension

Installing the axe Expert Extension in Google Chrome's DevTools is slightly different than installing Deque's axe Expert Extension for Mozilla Firefox, which has a different installation process for axe Monitor users (who use an install link from the application), than it is for axe Expert Extension users (who download a .xpi file from a repository first).

Important

The following instructions are only provided as an example to give you an idea of the installation process. Specific process steps may differ according to your unique security and browser type/version requirements. For example, depending on your organization, you may be required to load an unpacked extension with Developer mode enabled. Consult your management for specific installation instructions. Deque's recommended best practice is for all customers to work with their Deque Engagement Manager or the Deque Help Desk to obtain the proper version and appropriately licensed installation files.

From the Chrome Web Store Extension page

The easiest way to install the axe Expert Extension is via a direct link to the Google Chrome Extension page in the Chrome Web Store. If you've ever installed a Google Chrome browser extension before, the process is the same. However, the axe Expert Extension is not generally searchable in the Chrome Web Store, so a direct link is required:

Link to axe Expert in Chromestore.

For complete installation instructions using the provided link, refer to the Download and Install topic in the Getting Started section of this guide.

The compressed .crx installation file may be accessed directly from a link in the right sidebar menu of the axe Monitor, allowing you to initiate the installation process from within the Google Chrome browser.

To install axe Expert Extension from an install link (axe Monitor):

  1. Navigate to the Quick Links section of the Home screen in axe Monitor using the Chrome browser.
  2. Select Download axe Expert Extension 3.5.

When you select the axe Expert Extension install link a message displays asking if you want to install the axe Expert Extension.

  1. Tab over to and select the Load Unpacked Extension... button (or press Alt_I).

From a CRX File

The packed Google Chrome extension is offered as a compressed file with the .crx file extension, and offers a private key so that you never need to worry about manually updating the extension, as this is handled automatically.

To install axe Expert Extension from an .crx file (axe Expert Extension):

  1. Contact your Deque Engagement Manager or the Deque Help Desk to obtain the required CRX file installer.
  2. Navigate to the downloaded .crx file on your computer.
  3. Press Enter.

Verify Installation

Installation should only take a few seconds. When installation is complete a message will play stating that the axe Expert Extension was installed successfully. You can always verify installation success by attempting to open the axe Expert Extension in Google Chrome DevTools. For more information, see Open axe Expert Extension. The following steps guide you through installation verification via navigation to the axe Expert Extension entry on the Google Chrome Extension page.

  1. In the Google Chrome Address (Location) field, type chrome://extensions/ and press Enter.

  2. Activate TAB three times to access the list of installed Google Chrome extensions.

  3. Press Down Arrow key to locate the axe Expert Extension list item.

    Google Chrome extensions display in ascending and most recently-installed order, so it should be the first list item.

  4. Listen for the options "disable, remove". When you hear these options announced after axe Expert, the extension installed successfully.

Open the axe Expert Extension in Google Chrome

The axe Expert Extension is installed in Chrome's DevTools tab bar.

  1. Press and hold Ctrl+Shift+I to launch Chrome DevTools.
  2. Press and hold Ctrl\_\] until you hear "axe Expert."

When first installed, and no other extensions exist that integrate with Google Chrome's Development Tools, the axe Expert tab will be on the far right side of the toolbox tab bar.

  1. Press Enter to enable the axe Expert tab in the DevTools window.

axe Expert Extension is now active in Google Chrome's DevTools window and ready to use.

Understand and Navigate the axe Expert Extension User Interface

On the left pane of axe Expert Extension, regardless of which panel is currently selected, you have a main drop-down menu that provides links to each of the five main panels within axe Expert Extension.

  1. Verify activation of the axe Expert tab by pressing the Tab key to move focus to the Main Menu, which reads as "Global Navigation."

    The frame is announced as "data/index" frame.

    Default Tab: The Analyze pane is active by default when axe Expert Extension launch. Use the Analyze tab to perform accessibility analysis; it is likely to be the tab you use 99.5% of the time. Use the axe Expert Extension Options menu to select Settings and Sign in to axe Monitor.

  2. Move focus to the axe Expert Extension global navigation main menu and press Enter.

    The axe Expert Extension main menu opens and displays five panel choices:

  3. Press the down arrow and up arrow keys to navigate the axe Expert Extension main menu items. Press Enter to select a menu item.

The menu closes the screen reader announces "button collapsed," followed by the name of the selected menu item.

Panel-Specific Context Menu (Analyze menu)

Access additional panel-specific controls and links to associated panels and related functionality on other panels for the selected panel via the vertical ellipses button drop-down menu at the top bar of the right content pane in the Analyze panel. This drop-down menu is sometimes informally referred to as a "three-dot menu."

Use the Analyze panel's context menu:
  • Tab from the Analyze button on the Analyze panel to move the focus to a context menu that is announced as the main landmark Analyze google menu button collapsed.
  • Press Enter to display the Analyze context menu items.
  • Arrow down or up to highlight a menu item and press Enter to select the currently highlighted menu item.

Panel Navigation

Each panel within axe Expert Extension is made up of two to three information sub-panels. The sub-panels also contain information sections identified with headings.

Switch from one panel to another

  • In browse mode, press Up Arrow or Down Arrow to select the panel you want to enable and press Enter.
  • In forms mode, tab to the active pane and then use the arrow keys (right arrow or left arrow) to switch to other panes (no Enter necessary).

Force NVDA back to browse mode, press the NVDA key and space bar after working in forms mode.

Keyboard Layout and Forms Mode

NVDA Keyboard Layout: Press the Esc key or the NVDA key and spacebar to get out of forms mode in NVDA. The NVDA key is the insert key, unless you change to Caps Lock, which you can do in the NVDA configuration menu.

Select a Ruleset

You may want to adjust the ruleset option on the Rules panel. The Rules panel contains checkboxes with the legend Ruleset, in which three sets of rules may be found. The WCAG 2.0 AA rules are active by default. Using a ruleset other than the WCAG 2.0 AA default involves making optional adjustments on the Rules tab.

You can perform offline analysis using one of the axe Expert Extension standard rulesets without connecting to an axe Monitor server, or you can use your own custom ruleset.

Default Standard: If you use the axe Expert Extension out of the box you will perform a WCAG 2.1 AA analysis using the default WCAG 2.1 AA ruleset.

Select a ruleset:

  1. Press R in NVDA.

The WCAG 2.1 level AA checkbox is checked by default. This is a standard ruleset that ships with axe Expert Extension. The default ruleset is used until you tell axe Expert Extension to use a different one. You cannot delete rulesets that ship as part of axe Expert Extension.

  1. Select a ruleset via the associated checkbox.

No further confirmation is necessary.

Settings: Server Connection, Project Selection, and Scope

The first thing you will notice in the Settings panel is a set of form fields that enable you to connect the axe Expert Extension to an axe Monitor server. After signing in to axe Monitor, a Project Selection menu with button displays. Two new sections display when you select a project: Download Issues and Scope.

You may want to connect to your axe Monitor server and select a project to enable download and upload of analysis results. If the axe Expert Extension is not connected to an axe Monitor server, the dropdown is announced as "offline no project" or "clickable offline no project clickable", and Project Selection functionality is announced as "unavailable". For complete details, see Sign in to axe Monitor and Select an axe Monitor Project respectively.

Before using the Analysis panel to analyze a web page, you may want to adjust the options in the Scope section of the Settings panel to refine what will be targeted or ignored. For complete details, see Scope Definitions.

Event Recording Options

The Script Recording Options panel accessed via the Options link on the Scripts tab panel has a section called Events to Capture containing checkboxes where you can configure which events to record or ignore when recording scripts. For more information, see Select Events to Capture.

Analyze a Page for Accessibility Rule Violations

  1. Open the page you want to test in Chrome.

  2. Open Chrome DevTools (Ctrl_Shift_I) and select the axe Expert tab.

    Refer to Open axe Expert Extension for more information.

  3. Locate the ANALYZE button or Run again link if you are reanalyzing a page in the axe Expert Extension Analyze pane (it doesn't matter which you select, they both perform the same function).

  4. The Analyze button.

The Analyze button's label changes to display analyzing during a scan.

You know that the scan is finished when you can arrow or tab away from the Analyze button.

When No Accessibility Violations Are Found

If no accessibility violations are found, the line after the upload button reads: Congratulations! No accessibility violations found. Now you should perform manual testing using assistive technologies like NVDA, VoiceOver, and JAWS.

Work With Analysis Results

Export button and violations count: If one or more errors were discovered, use the fifth link option, Export, in the Analyze panel menu to export the results to CSV file.

Download and Upload links: The Analyze panel menu also includes download... and upload... items. These items are announced as "disabled" when not connected to an axe Monitor server. For more information, see Upload Analysis Results and Download a script.

Analyze axe Expert Extension results in one of two ways:

  • Export the results to a spreadsheet program for further analysis.
  • Review the results within the Analyze panel.

Export Results

If you need to work with analysis results in a spreadsheet program such as Microsoft Excel, allowing for sorting and other data manipulation, select Export from the axe Expert Extension Analyze menu to download a Comma-Separated Value (CSV) file. Working with exported results is particularly helpful to screen reader users to aid in easy navigation between violations when the results include multiple violations of multiple rules.

Export results to a CSV file:

  1. Select Export in the panel-specific Analyze drop-down menu.

A typical Save File dialog box displays.

  1. Select a convenient folder, provide a descriptive name for the file, select Save.

    Make sure the desired folder is selected by shift+tabbing to the folder tree the first time you bring up the Save File dialog using the Export link. axe Expert Extension saves exported results in the default download location configured in your Chrome browser settings. Once a folder is selected, axe Expert Extension remembers your selection for future exports.

Reviewing Analysis Results In axe Expert Extension

All axe Expert Extension analysis results are displayed under the Violations found heading. This is usually the only heading in the Analyze panel, so using h should get you there directly.

Review rule violations:

  • Press up arrow two times to see the line where the number of violations found is reported.

    axe Expert Extension displays an ordered list of tests that identified violations, along with the number of violations for each rule. The rule names in the list are links, that when displayed, show a list of all violations for that rule.

    A typical list of violations could look like:

list of x items

  1. Link: Elements must have sufficient color contrast x violations (where x is the number of violations).
  2. Link: ID attribute value must be unique violations...

Drill down to individual violations:

  • Select the rule link in the list.

When a rule link is selected you will see a panel displaying the first violation for the rule.

Analysis Results Violation Panel Overview

This section describes the sequential information displayed as you arrow down within an individual rule violation.

  • Displaying an Individual Violation: Start at the list of rules that produced violations (see previous section for a description and example of what the list looks like).

  • Multiple Violation Navigation and Impact

  • Previous button: At the end of the list you will see a button called previous. The previous button is disabled when you view the first rule violation.

  • # of Total Violations: Arrowing down from the Previous button to see a line that reads: "violation 1 of X" where X is the total number of violations specific to the active rule.

  • Impact: Arrowing further down from # of Total Violations line displays the impact information related to the violation. The impact line contains the impact rating: minor, moderate, serious, or critical.

  • Next button: A next button displays after the impact information. The next button is announced as disabled if you are reviewing the last violation of a specific rule.

  • Description: Arrowing down from the next button displays a one-line description of the violated rule along with a More info link. For example, this line will read "Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds" when a violation of the color contrast rule is recorded.

  • More info link: Select More Info to review Deque University content that provides more context and background information about the violated rule in addition to detailed how to fix information.

  • Applicable Ruleset (Standard) and Success Criteria: A two-item list follows the More info link. The first list item lists the active ruleset used during the axe Expert Extension analysis scan. WCAG 2.0 AA is the axe Expert Extension ruleset, noted as "wcag2aa". The second list item specifies the success criterion for the active rule (for example, wcag143 for WCAG 2.0 success criterion 1.4.3 - color contrast).

  • Inspect and Highlight links: The Inspect link highlights the violating element in DevTools. The second link, Highlight, visually highlights the web page element in the main Chrome browser window.

  • Section Navigation: Several additional h2 headings represent content panel sections within a violation:

  • Target: Target identifies a CSS selector path to the violating HTML element.

  • HTML: displays a snippet of HTML markup including the violating element.

  • Summary: The summary contains a fix any of the following sub-section followed by a list of suggested fixes. The precise layout and wording of a suggested fix depend on the specific violation. The list of suggested fixes is essential information in any report or analysis, as it usually helps to pinpoint the exact error and often provides the easiest fix.

Multiple Violation Navigation Notes

Use the Previous and Next buttons

Use the previous and next buttons to go to the previous/next violation if the analysis recorded multiple rule violations. The updated violation x of y line is announced automatically by most screen readers upon selecting the previous or next buttons. For example, if the panel currently displays violation one of ten and you select the next button, NVDA automatically announces "violation two of ten". The next and previous buttons provide the only means of navigation to a particular rule violation.

In order to get to violation eight of ten for rule x, click rule x and then click next seven times.

About the last violation

Clicking next when the last violation of a given rule is currently displayed does not automatically display the first violation of the next rule. In fact, the next button is disabled when the last rule violation displays. Navigate back to the list of rules and select the next rule for inspection.

Review all accessibility violations for all rules. Export the report to a CSV file to quickly review all rule violations in one place.

Use Custom Rules

The Rules panel is the fourth selection in the main menu. If you have written a JSON file of custom rules for axe Expert Extension to scan, use the Rules panel to add your ruleset. Once added to the Rules panel, you can select your ruleset from the Rules tab. The Custom Ruleset panel contains two form fields and a button: Name for Custom Rules, Enter JSON, and SAVE AND USE RULESET.

Add custom rules

  1. Specify a name for your custom ruleset in the (Name for Custom Rules and Enter JSON) field.

Make sure the name contains only letters or numbers (no spaces, dashes or other symbols are allowed as part of the ruleset name).

  1. Enter or paste your JSON rules in the Enter JSON field.

  2. Select SAVE AND USE RULESET.

The Rules panel displays a success or an error message if you specified an invalid name or used invalid JSON. You can see the name of your ruleset in the Custom rulesets section of the left sidebar menu on the Rules pane. Delete a custom ruleset by selecting the corresponding checkbox and then selecting Delete ruleset.

Is this page helpful?

Help us improve this page

Still need help?