eslint-plugin-vue-a11y

Static AST checker for accessibility rules on elements in .vue.

Installation

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

eslint-plugin-vue-a11y

Usage

Add

vue-a11y

.eslintrc

eslint-plugin-

{
    "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

extends

{
  "extends": [
    "plugin:vue-a11y/base"
  ]
}

base Supported Rules

• accessible-emoji: wrapping the emoji in a
  , giving it the

  role="img"

  , and providing a useful description in

  aria-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
  elements nesting input and has id for it .
• mouse-events-have-key-events: Enforce that

  onMouseOver

  /

  onMouseOut

  are accompanied by

  onFocus

  /

  onBlur

  for keyboard-only users.
• no-autofocus: Enforce autoFocus prop is not used.
• no-onchange: Enforce usage of

  onBlur

  over

  onChange

  on 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:
  and
  .
• 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 the

  aria-hidden

  prop. 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:
  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.

  recommended Supported Rules

• 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.

:couple: FAQ

What is the "Use the latest vue-eslint-parser" error?

The most rules of

eslint-plugin-vue-a11y

vue-eslint-parser

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"

parserOptions

vue-eslint-parser

- "parser": "babel-eslint",
  "parserOptions": {
+     "parser": "babel-eslint",
      "ecmaVersion": 2018,
      "sourceType": "module"
  }

Why doesn't it work on .vue file?

1. Make sure you don't have

   eslint-plugin-html

   in your config. The

   eslint-plugin-html

   extracts the content from
   tags, but

   eslint-vue-plugin

   requires
   tags and
   tags in order to distinguish template and script in single file components.

    "plugins": [
      "vue",
  -   "html"
    ]

eslint-disable functionality in

?

1. Make sure you have used eslint-plugin-vue and you can use <!-- eslint-disable-line --> like HTML comments in