Welcome to axe Developer Hub

Features of axe Developer Hub

axe Developer Hub is an integrated accessibility testing solution with the following features:

• It provides simple, easy-to-follow instructions for incorporating accessibility testing into your current test codebase, easily enhancing your existing web page tests with Deque's accessibility testing expertise.
• The results of your accessibility testing are presented in the axe Developer Hub dashboard which allows you to track your accessibility results over time, spot trends, and maintain quality.
• It can monitor commits and branches in Git as your website's source code changes to determine whether your website's accessibility is improving (or worsening) with each Git commit.
• You can easily share your accessibility results with teammates to direct attention to new (or existing) areas of concern. In fact, sharing is baked in axe Developer Hub to allow sharing of almost everything.
• You can export your results to easily repurpose your accessibility data in spreadsheets, databases, or other software.

The Architecture of axe Developer Hub

There are two main elements to axe Developer Hub: a website called axe Developer Hub and a code component, the @axe-core/watcher package.

axe Developer Hub

axe Developer Hub has two primary purposes: managing projects and viewing test run results.

Creating and Managing Projects

To utilize axe Developer Hub, the initial step involves creating a project to aggregate test run results for review in the platform's dashboard. In order to link your test suite to a specific project, an API key is furnished by axe Developer Hub, which you can integrate into the configuration in your existing test suite. Upon creating a new project, axe Developer Hub supplies comprehensive instructions on how to integrate the code component (in the @axe-core/watcher package) into your current test suite.

See Getting Started for a step-by-step guide to creating a new project.

Viewing Test Run Results

axe Developer Hub also keeps track of test runs. Within the dashboard of axe Developer Hub, all test runs are collected and displayed. This is where you can view the accessibility status of your project, including the number and severity of accessibility issues. If you utilize Git, you can also observe the accessibility errors linked with each commit. To better focus your efforts on remediation, you can use filters to narrow down accessibility defects based on severity and other criteria.

The Code Component

The code component of the axe Developer Hub is the @axe-core/watcher package, which performs several tasks:

• Injects accessibility testing code into the existing browser automation driver by wrapping important calls. This reduces the code you need to modify to add accessibility testing to your current test suite.
• Collects accessibility testing statistics for your project and sends that data to Deque's servers. This allows you to see the accessibility status of your website from anywhere and monitor the accessibility defect trend.
• Monitors Git branches and commits to associate commits with accessibility results. This feature gives you immediate feedback on whether your accessibility results are trending in the right direction. You can install a GitHub action on a GitHub repo to block commits if they contain accessibility defects.

See API Reference for more information about the APIs provided by the @axe-core/watcher package.

Outline of an axe Developer Hub Workflow

Here is a sample workflow to indicate one way to use axe Developer Hub within an organization to monitor your websites' accessibility defects:

1. Sign up for the axe Developer Hub beta program.
2. Create a new project in axe Developer Hub. See Getting Started for more information.
3. Add the necessary accessibility-checking code to your existing test suite. This usually requires only a few changes to your existing codebase; you only need to add a few lines of code.
4. Run your test suite. Running your test suite not only checks your web pages for accessibility defects but also collects information about your Git commits and branches and adds that information to the dashboard.
5. View the accessibility results in axe Developer Hub.
6. Fix the accessibility defects in your website and re-run your tests. Each defect on the dashboard provides a link to Deque University for mitigation strategies.
7. (Optional) Share specific results with colleagues to address recurrent accessibility problem areas.
8. Continuously monitor code quality by repeatedly running your test suite (make sure you run it on each Git commit in each branch). Monitor the code quality trend in the axe Developer Hub dashboard.
9. (Optional) Export data as needed for use in other applications.
10. (Optional) Set up the GitHub action to act as an accessibility gatekeeper for your repository on GitHub and prevent checkins that aren't at a selected level of quality.

Next Steps

Sign up for the beta test Visit the axe Developer Hub beta program to sign up for the beta.

Visit the Getting Started page for an overview of the user interface for creating a new axe Developer Hub project.