| # Linting >> EsLint Plugin Lit A11y >> Overview || -5 |
| |
| Accessibility linting plugin for lit-html. |
| |
| Most of the rules are ported from [eslint-plugin-jsx-a11y](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y), and made to work with [lit-html](https://lit-html.polymer-project.org/) templates and custom elements. |
| |
| ## Installation |
| |
| You'll first need to install [ESLint](http://eslint.org): |
| |
| ``` |
| $ npm i eslint --save-dev |
| ``` |
| |
| Next, install `eslint-plugin-lit-a11y`: |
| |
| ``` |
| $ npm install eslint-plugin-lit-a11y@next --save-dev |
| ``` |
| |
| **Note:** If you installed ESLint globally (using the `-g` flag) then you must also install `eslint-plugin-lit-a11y` globally. |
| |
| ## Usage |
| |
| Add `lit-a11y` to the plugins section of your `.eslintrc` configuration file. You can omit the `eslint-plugin-` prefix: |
| |
| ```json |
| { |
| "plugins": ["lit-a11y"] |
| } |
| ``` |
| |
| Then configure the rules you want to use under the rules section. |
| |
| ```json |
| { |
| "rules": { |
| "lit-a11y/rule-name": 2 |
| } |
| } |
| ``` |
| |
| ## Configuration |
| |
| You may also extend the recommended configuration like so: |
| |
| ```json |
| { |
| "extends": ["plugin:lit-a11y/recommended"] |
| } |
| ``` |
| |
| By default, any tagged template literal that starts with `html` is linted. Example: |
| |
| ```js |
| html` <img /> `; |
| ``` |
| |
| It could be the case, however, that you're using multiple rendering libraries in a project, like for example [`htm`](https://github.com/developit/htm), which also uses a `html` tagged template literal, but has a slightly different syntax than lit-html. In this case you can specify the following option, to make sure only lit-html tagged template literals are linted: |
| |
| ```json |
| { |
| "settings": { |
| "litHtmlSources": true |
| } |
| } |
| ``` |
| |
| This will cause the plugin to lint _only_ `html` tagged template literals that are imported from either `'lit'`, `'lit-element'` or `'lit-html'`. |
| |
| If you're importing lit-html from a package that re-exports lit-html, like for example `@apollo-elements/lit-apollo`, you can specify `@apollo-elements/lit-apollo` as a valid litHtmlSource like so: |
| |
| ```json |
| { |
| "settings": { |
| "litHtmlSources": ["@apollo-elements/lit-apollo"] |
| } |
| } |
| ``` |
| |
| ## Supported Rules |
| |
| - [lit-a11y/accessible-emoji](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/accessible-emoji.md) |
| - [lit-a11y/alt-text](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/alt-text.md) |
| - [lit-a11y/anchor-has-content](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/anchor-has-content.md) |
| - [lit-a11y/anchor-is-valid](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/anchor-is-valid.md) |
| - [lit-a11y/aria-activedescendant-has-tabindex](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/aria-activedescendant-has-tabindex.md) |
| - [lit-a11y/aria-attr-valid-value](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/aria-attr-valid-value.md) |
| - [lit-a11y/aria-attrs](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/aria-attrs.md) |
| - [lit-a11y/aria-role](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/aria-role.md) |
| - [lit-a11y/aria-unsupported-elements](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/aria-unsupported-elements.md) |
| - [lit-a11y/autocomplete-valid](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/autocomplete-valid.md) |
| - [lit-a11y/click-events-have-key-events](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/click-events-have-key-events.md) |
| - [lit-a11y/heading-has-content](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/heading-has-content.md) |
| - [lit-a11y/iframe-title](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/iframe-title.md) |
| - [lit-a11y/img-redundant-alt](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/img-redundant-alt.md) |
| - [lit-a11y/mouse-events-have-key-events](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/mouse-events-have-key-events.md) |
| - [lit-a11y/no-access-key](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/no-access-key.md) |
| - [lit-a11y/no-autofocus](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/no-autofocus.md) |
| - [lit-a11y/no-distracting-elements](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/no-distracting-elements.md) |
| - [lit-a11y/no-invalid-change-handler](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/no-invalid-change-handler.md) |
| - [lit-a11y/no-redundant-role](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/no-redundant-role.md) |
| - [lit-a11y/role-has-required-aria-attrs](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/role-has-required-aria-attrs.md) |
| - [lit-a11y/role-supports-aria-attr](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/role-supports-aria-attr.md) |
| - [lit-a11y/scope](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/scope.md) |
| - [lit-a11y/tabindex-no-positive](https://github.com/open-wc/open-wc/blob/3f5593c213b0636660a9c65b9b1d3ae2ed60bc09/docs/docs/linting/eslint-plugin-lit-a11y/rules/tabindex-no-positive.md) |