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 -g flag) then you must also install eslint-plugin-vue-a11y globally.
Add vue-a11y to the plugins section of your .eslintrc configuration 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/base in extends:
{
"extends": [
"plugin:vue-a11y/base"
]
}- accessible-emoji: wrapping the emoji in a
<span>, giving it therole="img", and providing a useful description inaria-label - alt-text: Enforce all elements that require alternative text have meaningful information to relay back to end user.
- anchor-has-content: Enforce all anchors to contain accessible content.
- click-events-have-key-events: Enforce a clickable non-interactive element has at least one keyboard event listener.
- label-has-for: Enforce that
<label>elements nesting input and has id for it . - mouse-events-have-key-events: Enforce that
onMouseOver/onMouseOutare accompanied byonFocus/onBlurfor keyboard-only users. - no-autofocus: Enforce autoFocus prop is not used.
- no-onchange: Enforce usage of
onBluroveronChangeon select menus for accessibility. - tabindex-no-positive: Avoid positive tabIndex property values to synchronize the flow of the page with keyboard tab order.
- no-distracting-elements: Enforces that no distracting elements are used. Elements that can be visually distracting can cause accessibility issues with visually impaired users. Such elements are most likely deprecated, and should be avoided. By default, the following elements are visually distracting:
<marquee>and<blink>. - heading-has-content: Enforce that heading elements (
h1,h2, etc.) have content and that the content is accessible to screen readers. Accessible means that it is not hidden using thearia-hiddenprop. Refer to the references to learn about why this is important. - media-has-caption: Providing captions for media is essential for deaf users to follow along. Captions should be a transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information.
- iframe-has-title:
<iframe>elements must have a unique title property to indicate its content to the user. - no-access-key: Enforce no accessKey prop on element. Access keys are HTML attributes that allow web developers to assign keyboard shortcuts to elements. Inconsistencies between keyboard shortcuts and keyboard commands used by screenreader and keyboard only users create accessibility complications so to avoid complications, access keys should not be used.
- form-has-label: Each form element must have a programmatically associated label element. You can do so by using an implicit , explicit , aria-label or aria-labelledby.
- 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.
- aria-unsupported-elements:
- 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-a11y require vue-eslint-parser to check <template> 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-parser used by this plugin's configuration:
- "parser": "babel-eslint",
"parserOptions": {
+ "parser": "babel-eslint",
"ecmaVersion": 2018,
"sourceType": "module"
}- Make sure you don't have
eslint-plugin-htmlin your config. Theeslint-plugin-htmlextracts the content from<script>tags, buteslint-vue-pluginrequires<script>tags and<template>tags in order to distinguish template and script in single file components.
"plugins": [
"vue",
- "html"
]- Make sure you have used eslint-plugin-vue and you can use like HTML comments in of .vue files. For example:
<template> <!-- eslint-disable-next-line vue-a11y/anchor-has-content --> <a></a> <h1></h1> <!-- eslint-disable-line --> </template>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent