Welcome to axe Developer Hub
Introduction to the axe Developer Hub product and its architecture
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 website which allows you to track your accessibility results over time to spot trends and maintain quality.
- It can monitor commits in Git as your website's source code changes to determine whether your website's accessibility is improving (or worsening) with each commit. On GitHub repos, you can set up a GitHub action that can block commits that introduce accessibility errors.
- 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 website. When you create a new project, axe Developer Hub creates an API key and gives you comprehensive instructions on how to integrate the code component (in the @axe-core/watcher package) into your current test suite.
See Get Started with axe Developer Hub for a step-by-step guide to creating a new project.
Viewing Test Run Issues
axe Developer Hub also keeps track of test runs. Within the axe Developer Hub website, 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 see 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.
See View Accessibility Issues for more information.
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, so you need to make minimal changes to your test suite's configuration 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 change in accessibility defects.
- Associates Git commits with accessibility results. This feature gives you immediate feedback on whether your accessibility results are trending in the right direction. You can also install a GitHub action on a GitHub repo to block commits if they fail to satisfy your specified accessibility quality level.
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 website's accessibility defects:
-
Create a new project in axe Developer Hub. See Get Started with axe Developer Hub.
-
Modify your test suite. axe Developer Hub provides instructions for how to modify your test suite, which requires only a few changes to your existing test suite, and you can re-review the instructions at any time. See Platform Support for more information about the browser automation platforms and browsers supported by axe Developer Hub.
-
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 axe Developer Hub.
-
View your accessibility issues in axe Developer Hub. See View Accessibility Issues.
-
Fix the accessibility defects in your website and re-run your tests. Each defect on the axe Developer Hub provides a link to Deque University for mitigation strategies.
-
(Optional) Share your results. Share specific results with colleagues to address recurrent accessibility problem areas.
-
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 trends in axe Developer Hub. See View Accessibility Issues.
-
(Optional) Export data as needed for use in other applications. See Exporting Data.
-
(Optional) Set up the GitHub action to act as an accessibility gatekeeper for your repository on GitHub and prevent commits that aren't at a specified level of quality. See Using the axe Developer Hub GitHub Action.