How to use Axe Developer Tools in Firefox V54+ with NVDA

Contents

Installing Axe Developer Tools in Firefox V54+ with NVDA

Download Axe add-on

  1. Navigate to https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/ in Firefox V54+ to install the Axe Developer Tools add-on.Firefox opens the link in a new tab or window depending on user preferences.

  2. Navigate to and select Add to Firefox on the Axe Developer Tools add-on page.

  3. Firefox displays a security alert stating the requirements for further permission to continue installing the add-on. Press Alt+A to grant Firefox permission to complete installing the Axe Developer Tools extension. NVDA announces: “Axe has been added to Firefox.” upon successful installation.Press Alt+O to dismiss the confirmation dialog.

    Note: Contact your software security/admin manager if you do not have sufficient permissions to install the browser extension.

Checking Axe installation

  1. Press Alt+T+A to access Firefox’s Add-ons Manager.

  2. Press NVDA+TAB to verify your focus location. NVDA announces “Add-ons Manager application focus.”The Add-ons Manager page displays a seven-item list including Get Add-ons, Extensions, Themes, and Plugins as selectable options. Browser focus is set by default to Extensions. Use the Down Arrow and Up Arrow keys to navigate the options list. Verify selection of the Extensions option and press Enter.

  3. Press TAB a couple of times and as focus moves past the search box for Addon search on mozilla.org, the list of extensions installed becomes available. Use the Down arrow and Up arrow keys to explore previously installed extensions. Extensions are listed in alphabetic order so “Axe Accessibility testing in Firefox developer tools” will be near the start of the list. Repeat steps 1 to 3 above if you do not see the Axe extension entry in the list of extensions.

  4. When Axe is selected, NVDA announces: “Axe Accessibility Testing in Firefox developer tools More release notes: Loading … disable Remove…”Tabbing exposes three related buttons:

    • More — Display more details about this addon.
    • Disable — To disable the currently selected add-on.
    • Remove — To remove (uninstall) the add-on from Firefox.

    Note: The Disable button is a toggle switch. NVDA announces “Disable,” indicating that the Axe add-on is currently enabled.

  5. The More button opens a panel containing Axe’s version information, description, and radio buttons to control automatic updates. Deque recommends retaining the default setting enabling automatic updates. The remaining radio button choices are On and Off.

  6. Press Ctrl+W to close the Add-on Manager.

Setting developer tools preferences for screen reader users

About developer tools

Firefox’s developer tools frame groups several built-in Firefox inspection tools. NVDA announces the inspection tools: Inspector panel frame, DOM Panel frame, Console Panel frame, Style editor frame, Debugger panel frame, Accessibility Panel frame, and so on. The number and order of tools depend on how the developer toolbox is customized. Press Ctrl+'[' or Ctrl+']' to cycle focus between the available frames in developer tools.

Firefox developer tools are docked to the bottom of the browser window by default. Display the developer tools in a separate window as a screen reader-friendly option. Users can then jump between the browser window and developer tools window pressing Alt+TAB. Users can further customize developer tools toolbar appearance and contents if desired.

One-time steps for setting screen reader-friendly options

  1. Select Tools>Web Developer in the main Firefox menubar.

    Note: Other methods to launch or close Firefox developer tools include pressing F12 or Control+Shift+I. Use the same keyboard shortcuts to close developer tools.

  2. Press Down Arrow to navigate to Inspector in the Web Developer sub-menu and press Enter.The developer tools panel launches and NVDA’s focus moves to the developer tools window.

  3. Press TAB or Shift+TAB to move NVDA focus to the developer tools toolbar.

  4. With the focus on the Developer Tools toolbar, press Right Arrow repeatedly to navigate to a button read as “Customize Developer Tool and get help button, collapsed sub-menu.”

    Note: If you are working in Windows, the button directly to the right of the Customize Developer Tool button will close the developer tools window. Notice that the Left arrow and Right arrow keys traverse all available panels within developer tools. The Axe extension is included in the developer tools toolbar when successfully installed.

  5. Press Spacebar to expand the Customize Developer Tool sub-menu, navigate to and select the Separate Window option, and press Enter to make developer tools appear in a separate window.

Using Axe in Firefox developer tools

Launch Axe

  1. With NVDA running, launch Firefox.

  2. Open the web page to be tested. Remember, Axe tests the page in the current state as rendered. Ithe page contains a form; it is helpful to generate some input errors and test the form. Of course, the form can and should be tested in its initial state too. Likewise, if the page contains tabs, the full page including the active tab content, is tested.

  3. Open the Web developer sub-menu in Firefox’s Tools menu.

  4. Press Down Arrow to Inspector and press Enter. Alternatively, if you are a screen reader user with Firefox61+, you might find Accessibility in the submenu. Select Accessibility instead, and press Enter.

  5. The developer tools will respect your preference and launch in a separate window.

  6. Press TAB or SHIFT+TAB once or twice to move NVDA focus to the developer tools toolbar.

  7. Use the Right arrow and Left arrow keys to navigate focus to Axe. NVDA announces “Axe toggle button not pressed Dev Panel Tool added by Axe add-on.” Press Enter to activate Axe. Firefox focus moves to the Axe panel within the developer tools frame. You have successfully activated Axe tools within Firefox’s developer tools!

Getting oriented to Axe user interface and running analysis

NVDA announces, “developer tools” and the title and URL of the corresponding Web page from which you launched developer tools. Press the NVDA key+T to confirm the web page title and URL at any time.

The Axe Tool panel is marked up with landmarks (banner, global, issue navigation, and main content), headings, and lists for easy navigation. Right at the start in the banner region, NVDA announces Axe Developer Tool graphic.

The first tab stop from the top of the Axe Tool Panel is the collapsed Axe Version Information menu button. Expand it and review the contents. Press Escape to collapse it. The version information is also available in Firefox browser’s Add-on manager referred to above under Checking Axe installation when upon selecting More Information.

Then comes the all-important Analyze button. Activating the Analyze button starts page accessibility testing. The analysis takes extra time on larger pages. Please be patient. Arrowing down when an analysis is still running displays/announces Analyzing ... please wait.

NVDA announces a menu button containing the total count of accessibility violations in the collapsed state upon completing the analysis, e.g., Violations found: 17. Press Arrow down or TAB to expand other display options including All issues, issues that need verification, and issues if resolved will result in best practice from an accessibility standpoint.

The next element is a Run again button. Use this button to re-run the analysis if you switch to the browser window and change the state of the page (e.g., select a different tab or generate input errors for a form), or load a different Web page. Then press Alt+Tab to return back to the Firefox developer tools window and activate the Run Again button in Axe.

When analysis finds no errors Axe’s main content displays:

Congratulations! No accessibility violations found in the current state of the page. Now you should rerun Axe on every state of the page (including expanding accordions, modals, sub-menus, error messaging and more). You should also perform manual testing using assistive technologies like NVDA, VoiceOver, and JAWS.

Reviewing analysis results and issue-specific details

List Violations by type

Right past the Run Again link is a list of links under the Issues level 2 heading containing one list item for each type of accessibility violation detected on the page. Every list item also includes the total issue count under a level 2 heading.

Sample content:
  • Buttons must have discernible text 5 – current item
  • Elements must have sufficient color contrast 5
  • Images must have alternate text 3
  • Form elements must have labels 4

Issue specific details in the main content

Following this navigational section is the main content with a level 1 heading Analyze.

The currently selected violation type from the list, e.g., Buttons must have discernible text is marked up as the first level 2 heading. A set of buttons – Previous, Next, and Last are presented for navigation through the set of issues matching the currently selected violation type.

The Previous and First buttons are disabled (announced as unavailable) when the focus is on the first issue. Similarly, the Next and Last buttons are disabled when you move focus to the last issue.

Two links exist for each issue:

Inspect Node
The Inspect Node link moves the current element’s focus to the element in the Developer Tools Inspector.

Highlight
The Highlight link enables visual highlighting mode for the current issue’s element throughout the browser window. When the highlighting mode is enabled, the text of the link changes to Stop Highlight. Select Stop Highlight to disable visual higlighting. The text of the link changes back to Highlight when visual higlighting is disabled.

Details for the specific issue focus; e.g., "issue 2 of 5. Buttons must have discernible text." are presented under the following level 2 headings:

  • Issue description: Contains a Learn more link to detailed violation explanation content in Deque University.
  • Element location: Displays the currently selected issue’s element selector or XPath to programmatically identify the specific element on the page.
  • Element source: Contains the source code for the failed element.
  • To solve this violation, you need to section: Lists various options available to resolve the accessibility barrier. The most appropriate solution option for the context should be implemented.
  • Issue tags: Cites applicable WCAG and Section 508 standard success criterion. For example, “WCAG412” references WCAG 2.0 Success Criterion 4.1.2.

This is the end of the analysis results. A screen reader can press Shift+B to go back to the navigation panel to continue navigating through instances of the current violation type using the Previous and Next buttons. Press Shift+L to access the main list of violations listed under the Issues heading.

Note: This manual is oriented towards NVDA users; however the same keyboard commands will work for JAWS screen reader users.