Linting Custom Components

This article provides an overview of using axe DevTools Linter to lint your custom components.

How It Works

Custom component linting maps a custom component into an existing element. For example, suppose you have a <custom-image> component that outputs an <img> HTML element. You can create a mapping between custom-image and img in your configuration that tells axe DevTools Linter to lint your custom component as though it were an img element. In that case it can detect, for instance, a missing alt attribute and flag that as an accessibility error.

You can create a configuration to map:

• Your custom component to another element
• Your custom component's attributes to the other element's attributes
• An attribute in your custom component to an element's text content (which is the text content contained within the element such as the text inside button tags: <button> text content </button>)
• WAI-ARIA attributes from your custom component using a wildcard attribute (aria-*) rather than specifying each ARIA attribute individually.

Next Steps

There are two walkthroughs to help you start linting your custom components.

1. If you use the axe Accessibility Linter for VS Code or the JetBrains plugin, see Linting Custom Components with the axe Accessibility Linter Extension for VS Code or the JetBrains Plugin.
2. If you use the axe DevTools Linter REST endpoint, see Linting Custom Components with the axe DevTools Linter REST Endpoint.

If you would like information about linting React Native files and linting React Native custom components, see Using axe DevTools Linter for React Native.

For information about axe DevTools Linter's support for some popular custom component libraries, see Preconfigured Component Libraries.

See Also

See Configuring axe DevTools Linter for information about the configurations used by the axe Accessibility Linter for VS Code, the JetBrains plugin, and the REST endpoint.