axe Accessibility Linter

• Check code files for common accessibility defects. Checks React (JSX), React Native, Angular, Vue, HTML, and Markdown.

• Easy configuration with axe-linter.yml. Exclude specific rules or files, check custom components, and more.

• axe DevTools Linter is also available as an API and can be integrated into platforms such as GitHub Actions, SonarQube, Jenkins, or as a Git pre-commit hook. Get your free trial today!

Quickstart

After you click to install the plugin, there will be a slight pause to download additional requirements before axe DevTools Linter starts. Configuring the plugin isn't necessary, but if you want to change its behavior, see the next section, Configuration.

Configuration

You can add a file called axe-linter.yml at your project's root level to configure linting:

• You can specify which accessibility rules axe DevTools Linter should use. See axe DevTools Linter Accessibility Rules and Configuration for more information.
• You can set up custom component linting. See Linting Custom Components for more details.
• You can exclude files using wildcards. See Configuration File for more information.

axe-linter.yml Example

rules:
  heading-order: false # Disable this rule
exclude:
  - 'tests/**/*.html' # Skip files
global-components:
  AxeButton: button # Lint <AxeButton> as though it was a <button>
global-libraries:
  - 'react-native' # Run React Native rules
  - '@mui/material' # Enable linting MaterialUI components

Available Rules

axe DevTools Linter includes rules for WCAG 2.0 and WCAG 2.1 Level A and AA, as well as a few best practices. For a complete list of the rules, see axe DevTools Linter Accessibility Rules.

Custom Components

You can configure axe DevTools Linter to understand your custom components and ensure they are being used in a way that keeps your application accessible. We have standard mappings for Material UI (mui) and React Native that can be pulled in with a simple configuration change. For information on using the plugin with your custom components, see Linting Custom Components

Component Libraries

You can tell axe DevTools Linter which component library your project uses. Doing so enables the built-in custom component mapping for that library and some rules exclusive to this library. axe DevTools Linter supports several popular component libraries, including Material UI and React Native. Read Global Components Libraries for details.

Axe Linter in other tools

In addition to running axe DevTools Linter in Visual Studio Code, axe DevTools Linter is also available as an API or as an on-prem installable server. The API requires a key, which you can get with a free trial.

The Axe DevTools Linter API can be integrated into any environment, including GitHub Actions, SonarQube, Jenkins, as a Git pre-commit, and others.

GitHub Actions

You can stop code that has accessibility issues from being merged into your code base using the Github action. See Using the axe DevTools Linter GitHub Action

Git Pre-Commit Hook

To use the pre-commit hook to block GitHub commits which contain accessibility errors, see Using the Git Pre-Commit Hook.

SonarQube

Integrating axe DevTools Linter with SonarQube allows you to track accessibility issues in SonarQube's dashboard and monitor your code's accessibility over time. For setup information, see SonarQube and axe DevTools Linter.

Jenkins

If you use Jenkins, you can automatically check for accessibility problems with each Jenkins build. For more information, see Jenkins and axe DevTools Linter.

Support

Check out our issue reporting page to report a problem or request a feature.

To contact the axe DevTools Linter development team and other axe DevTools Linter users, join our accessibility Slack channel.

Telemetry

axe DevTools Linter gathers minimal telemetry to monitor the plugin's heartbeat. The collected data is limited to the date and time of scans, the axe DevTools Linter engine version, and the application that reported the data (axe DevTools Linter). We've also added telemetry to gather all error messages as needed to help provide a better end-user experience.

Deque Trademarks Policy

DEQUE, DEQUELABS, AXE®, and AXE-CORE® are trademarks of Deque Systems, Inc. Use of the Deque trademarks must be in accordance with Deque's trademark policy.

Third Party Licenses

See LICENSE-3RD-PARTY for details.