Static AST checker for accessibility rules on elements in .vue
Static AST checker for accessibility rules on elements in .vue.
You'll first need to install ESLint:
$ npm i eslint --save-dev
Next, install
eslint-plugin-vue-a11y:
$ npm install eslint-plugin-vue-a11y --save-dev
Note: If you installed ESLint globally (using the
-gflag) then you must also install
eslint-plugin-vue-a11yglobally.
Add
vue-a11yto the plugins section of your
.eslintrcconfiguration file. You can omit the
eslint-plugin-prefix:
{ "plugins": [ "vue-a11y" ] }
Then configure the rules you want to use under the rules section.
{ "rules": { "vue-a11y/rule-name": 2 } }
also You can enable all the base rules at once. Add
plugin:vue-a11y/basein
extends:
{ "extends": [ "plugin:vue-a11y/base" ] }
, giving it the
role="img", and providing a useful description in
aria-label
onMouseOver/
onMouseOutare accompanied by
onFocus/
onBlurfor keyboard-only users.
onBlurover
onChangeon select menus for accessibility.
h1,
h2, etc.) have content and that the content is accessible to screen readers. Accessible means that it is not hidden using the
aria-hiddenprop. Refer to the references to learn about why this is important.
form-has-label: Each form element must have a programmatically associated label element. You can do so by using an implicit
interactive-supports-focus: Elements with an interactive role and interaction handlers (mouse or key press) must be focusable.
aria-role: Elements with ARIA roles must use a valid, non-abstract ARIA role
aria-props: Elements cannot use an invalid ARIA attribute.
no-redundant-roles: Certain reserved DOM elements do not support ARIA roles, states and properties.
role-has-required-aria-props: Elements with ARIA roles must have all required attributes for that role.
The most rules of
eslint-plugin-vue-a11yrequire
vue-eslint-parserto check ASTs.
Make sure you have one of the following settings in your .eslintrc:
"extends": ["plugin:vue-a11y/recommended"]
"extends": ["plugin:vue-a11y/base"]
If you already use other parser (e.g.
"parser": "babel-eslint"), please move it into
parserOptions, so it doesn't collide with the
vue-eslint-parserused by this plugin's configuration:
- "parser": "babel-eslint", "parserOptions": { + "parser": "babel-eslint", "ecmaVersion": 2018, "sourceType": "module" }
eslint-plugin-htmlin your config. The
eslint-plugin-htmlextracts the content from tags, but
eslint-vue-pluginrequires tags and tags in order to distinguish template and script in single file components.
"plugins": [ "vue", - "html" ]