Coding for accessibility made easy.
- Checks React (.js .jsx .ts .tsx), Vue (.vue), Angular (.component.html), HTML (.html .htm), and Markdown (.md .markdown) files so you can avoid common accessibility defects. Inline Angular templates are not currently supported.
- Consistent with the open-source axe-core rules engine to provide early warnings of real accessibility defects -- zero false positives, so you don't have to write a bunch of
- No configuration required -- zero learning curve, so you can be productive immediately.
- Shareable project-specific configurations, so your team can work from the same accessibility standard or rules.
Once the plugin is installed, axe-linter installs and configures itself automatically. This can sometimes take a few minutes. Once this step is completed, axe-linter will start running on compatible source files.
Axe-linter is now available on a multitude of other platforms! We currently provide integrations for:
- GitHub Actions
- Git Pre-Commit Hooks
- Jenkins, Azure DevOps, CircleCI, and more!
To start your free trial head to deque.com. In the mean time, check out all the details on axe-linter's other integrations or our full axe-linter platform documentation
The rules axe-linter uses and components it can lint are configurable by adding a file called
axe-linter.yml at your project's root level. You can enable and disable specific rules individually, or by groups. You can also configure axe-linter to work with custom components.
You can enable/disable rules individually with the
some-rule: false # turn off rule
other-rule: true # turn on rule
You can also disable rules as a group based on WCAG standard they are associated with using the
tags: # Disable all rules for WCAG 2.1 A, WCAG 2.1 AA, and best practices.
The following tags are available for configuration in axe-linter:
||Accessibility Standard / Purpose
|WCAG 2.0 Level A
|WCAG 2.0 Level AA
|WCAG 2.1 Level A
|WCAG 2.1 Level AA
|Common accessibility best practices
axe-linter has the following rules, by default all are enabled:
global-components setting in
axe-linter.yml tells axe-linter how to map your own custom components or components from third party libraries to native HTML elements. This allows you to lint your components as though they were native HTML elements. For example, the following will treat all custom
DqButton components as though they were native HTML
button elements. This automatically maps every attribute on
button, thus requiring an accessible name for all
Alternatively, for components that don't map all attributes to native HTML components, you can list the attributes required for accessibility conformance using the
attributes property. You can list attributes the component supports, as well as rename attributes. There are two wildcard values -
aria-* tells axe-linter that all attributes that start with
aria- are mapped to the native HTML element as-is. The
<text> value tells axe-linter that a property is used to set the content of the native HTML element.
# Ignore all attributes on <DqButton> except the following:
- role # Map the role attribute from <DqButton /> to <button />
- aria-* # Map all attributes starting with aria-
- action: type # <DqButton action="submit" /> maps to <button type="submit" />
- label: <text> # <DqButton label="ABC" /> become <button>ABC</button>
Only attributes relevant for accessibility need to be in the
attributes list. Element names are case sensitive. CamelCase as shown above as a common JSX example, but kebab-case which is used in Vue, Angular, and HTML custom elements can be used.
For full documentation on our custom component support, head to our docs site
If you need a hand setting up your global-components configuration, drop us a line and we'll be happy to help.
Axe-linter gathers a minimal amount of telemetry in order to assist in monitoring the plugin's heartbeat. The collected data is limited to the date and time of scans, the axe-linter engine version, and identification of the data as being axe-linter related. We've also added telemetry to gather all error messages as needed to help provide a better end user experience.