eslint-plugin-vue-a11y

by maranran

Static AST checker for accessibility rules on elements in .vue

136 Stars 17 Forks Last release: Not found MIT License 65 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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
flag) then you must also install
eslint-plugin-vue-a11y
globally.

Usage

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"
  ]
}

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

    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
require
vue-eslint-parser
to 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-parser
used by this plugin's configuration:
- "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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.