axe Expert Orientation

Link to axe Expert Orientation copied to clipboard

Familiarize yourself with the axe Expert extension

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.

The axe Expert Extension integrates with your browser's developer tools, which are a built-in feature intended for use by web developers to examine, troubleshoot and resolve issues in web pages. After installation, the axe Expert tab appears as an option on the Developer Tools tab bar. Clicking the button displays the five main tabs in a horizontal bar below the toolbar, each of which has its own toolbar below the tab bar. Under the tab-specific toolbar you will find the main panes of result content, which themselves, display additional controls such as buttons and links.

Components

The following five main components are revealed after the axe Expert Extension is enabled on the DevTools toolbar:

The five primary components of the axe expert extension user interface

  1. axe Expert Tab: The tab along the top of the browser DevTools pane, including axe Expert. For complete installation information, see Downloading and Installing the axe Expert Extension. Clicking its tab makes axe Expert the active tool while the other tools and toolbox controls remain in the horizontal bar.

  2. Main Menu Panel drop-down navigation menu: These are the tools within the tool, so to speak, which you might also think of as view "pages" within the axe Expert Extension. Selecting the down arrow displays the list. Select a link item in the list to display the panel.

    Panels that may be accessed from the main menu include:

    • Analyze: Analyze the loaded page for accessibility rule violations, view details about each, download from or upload to axe Monitor. For complete details, see Analyze.

    • Page Insights: An analysis of the features in the page available to assistive technologies. For complete details, see Page Insights.

    • Tools: Page Insights effectively display components of the Accessibility Object Model (AOM) used be screen readers.

    • Scripts: Record sequential actions taken on the loaded page as a script of events that can be replayed, uploaded to or downloaded from axe Monitor, where they can be applied to scans to automate tedious task steps (such as completing a sign-in form). For complete details, see Scripts.

    • Rules: Submit custom rules via a JSON file to be made available as an option in the Ruleset section of the Settings tab from which to select your own ruleset to run as part of a page analysis. For complete details, see Rules Panel.

    • Settings: Log in axe Monitor and specify standards to be targeted in your analysis. Additionally, when you have selected or "switched to" a project, the Organization and Project names are displayed. For more information, see Sign in to axe Monitor.

  3. Extension version number: The extension version number displays directly below the extension title at the top of the extension window.

  4. Pane specific menu, navigation tools and notification area: The vertical ellipses button is a menu specific to the currently accessed pane. Additional tools such as violation navigation buttons, inspect/highlight buttons, drop-down menus, etc. as well as tool response messages appear within this general pane specific toolbar area. The tools that display are specific only to the selected active pane view (for example, the Analyze pane). Some of the functionality displayed herein is integrated with the browser's DevTools.

  5. Content pane(s) area: The main window that is entirely controlled by, and specific to, axe Expert, although some functionality interacts with other integrated DevTools such as highlight or inspect. Depending on the pane selected, there may be a single-pane window or a window with split or multiple panes. This region of developer tools displays content such as rules, violations, simulations, and script events. Internal panes also contain actionable user controls such as buttons and links. See the respective pane topics for details about using each.