ESLint Plugin for Vue Accessibility (A11y)

0.0.31 · abandoned · verified Sun Apr 19

This package, `eslint-plugin-vue-a11y`, is an ESLint plugin designed to statically check accessibility rules within Vue.js single-file components (`.vue` files). It aims to help developers identify common accessibility issues in their Vue templates and scripts. However, it is important to note that this specific package, currently at version 0.0.31, has been abandoned. Its last known update was seven years ago, and it only supports older versions of ESLint (peer dependencies `^3 || ^4 || ^5`) and implicitly older Vue.js versions. For modern Vue.js and ESLint environments, the actively maintained and recommended successor is `eslint-plugin-vuejs-accessibility`, which provides similar functionality with ongoing development and compatibility with current toolchains.

Common errors

```
Error: Failed to load plugin 'vue-a11y' declared in '.eslintrc'...
```
cause The installed ESLint version is incompatible with the peer dependency requirements of `eslint-plugin-vue-a11y` (ESLint ^3, ^4, or ^5).

fix This package is abandoned. Update your project to use `eslint-plugin-vuejs-accessibility` and a modern ESLint version, or downgrade ESLint to a compatible version (not recommended for long-term projects).
```
Definition for rule 'vue-a11y/rule-name' was not found
```
cause The `eslint-plugin-vue-a11y` plugin is either not correctly listed in the `plugins` array of your `.eslintrc`, or the rule name is incorrect.

fix Ensure `"vue-a11y"` is present in the `plugins` array and that the rule ID (e.g., `alt-text`) is correctly prefixed with `vue-a11y/`.
```
What is the "Use the latest vue-eslint-parser" error?
```
cause Many rules in this plugin require `vue-eslint-parser` to parse `<template>` ASTs. This error indicates it's missing or an incorrect version is being used.

fix Ensure `vue-eslint-parser` is installed and properly configured in your ESLint `parserOptions`, potentially through extending a recommended Vue config (e.g., `plugin:vue/recommended`). However, remember this package is abandoned.

Warnings

breaking This package is effectively abandoned and incompatible with modern ESLint versions (v6+). Its peer dependencies only support ESLint ^3, ^4, or ^5. Attempting to use it with newer ESLint versions will result in plugin loading errors.
Fix: Migrate to the actively maintained successor `eslint-plugin-vuejs-accessibility`. Uninstall `eslint-plugin-vue-a11y` and install `eslint-plugin-vuejs-accessibility` instead.
gotcha The `eslint-plugin-vue-a11y` package has been superseded. Its last update was 7 years ago (as of 2019), and it does not support Vue 3 or later, or modern JavaScript features.
Fix: For new projects or existing projects using modern Vue/ESLint, use `eslint-plugin-vuejs-accessibility` (e.g., `npm install --save-dev eslint-plugin-vuejs-accessibility`).
gotcha The low version number (0.0.31) indicates that this plugin was likely in an early development stage and never reached a stable major release, further reinforcing its abandoned status.
Fix: No direct fix, but reinforces the recommendation to switch to `eslint-plugin-vuejs-accessibility` for a stable and maintained solution.
gotcha If ESLint was installed globally (`npm i eslint -g`), `eslint-plugin-vue-a11y` must also be installed globally (`npm i eslint-plugin-vue-a11y -g`) for ESLint to locate it. This global installation approach is generally discouraged in favor of local project installations.
Fix: Ensure both ESLint and its plugins are installed locally within your project for better consistency and version control.

Install

npm install eslint-plugin-vue-a11y npm
yarn add eslint-plugin-vue-a11y yarn
pnpm add eslint-plugin-vue-a11y pnpm

Imports

ESLint Plugin Configuration
```
{ "plugins": [ "vue-a11y" ] }
```
This configures the plugin in your `.eslintrc` file. Note that this package is abandoned and incompatible with modern ESLint/Vue setups.
Base Rule Set Extension
```
{ "extends": [ "plugin:vue-a11y/base" ] }
```
Extends your ESLint configuration with the plugin's base set of accessibility rules. Not recommended for use with current ESLint versions.
Specific Rule Configuration
```
{ "rules": { "vue-a11y/alt-text": 2 } }
```
Enables and configures individual rules from the plugin. Each rule would be prefixed with `vue-a11y/`. This package is abandoned.

Quickstart

This `.eslintrc.json` snippet demonstrates how to configure the `eslint-plugin-vue-a11y` plugin, enabling its base rules and a few specific rules. This configuration is for the abandoned package and is not compatible with modern ESLint or Vue.js projects. Consider using `eslint-plugin-vuejs-accessibility` instead.

{
  "root": true,
  "env": {
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:vue/recommended",
    "plugin:vue-a11y/base" // Or "plugin:vue-a11y/recommended"
  ],
  "plugins": [
    "vue-a11y"
  ],
  "rules": {
    // Example: Override or add specific rules
    "vue-a11y/alt-text": ["error", { "elements": ["img", "area", "input[type='image']"] }],
    "vue-a11y/accessible-emoji": "warn"
  },
  "parserOptions": {
    "parser": "@babel/eslint-parser", // Adjust based on your setup (e.g., @typescript-eslint/parser for TS)
    "ecmaVersion": 2018,
    "sourceType": "module"
  }
}

view raw JSON →