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:
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.
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.
