{"id":19980,"library":"eslint-plugin-vuejs-accessibility","title":"eslint-plugin-vuejs-accessibility","description":"An ESLint plugin for checking accessibility (a11y) rules in Vue.js single-file components (.vue files). Current stable version is 2.5.0 (released 2025-03-28). It provides a set of rules to enforce WCAG and ARIA best practices, inspired by eslint-plugin-jsx-a11y but tailored for Vue templates. Released under MIT license, actively maintained by the vue-a11y community. Supports ESLint v5–v10, ship TypeScript declarations, and works with both legacy (extends) and flat config formats. Key differentiator vs. other Vue a11y tools: it is the most comprehensive and community-maintained plugin.","status":"active","version":"2.5.0","language":"javascript","source_language":"en","source_url":"https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility","tags":["javascript","eslint","eslint-plugin","a11y","accessibility","vue","vuejs","typescript"],"install":[{"cmd":"npm install eslint-plugin-vuejs-accessibility","lang":"bash","label":"npm"},{"cmd":"yarn add eslint-plugin-vuejs-accessibility","lang":"bash","label":"yarn"},{"cmd":"pnpm add eslint-plugin-vuejs-accessibility","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency - ESLint core required to run the plugin","package":"eslint","optional":false},{"reason":"Peer dependency - provides global variable definitions for linting","package":"globals","optional":false}],"imports":[{"note":"The default export is the plugin object containing rules and configs. Named exports are not available.","wrong":"import { rules } from 'eslint-plugin-vuejs-accessibility';","symbol":"plugin (default export)","correct":"const plugin = require('eslint-plugin-vuejs-accessibility');\n// or\nimport plugin from 'eslint-plugin-vuejs-accessibility';"},{"note":"Flat config is supported since v2.3.0. Legacy .eslintrc format still works. The config key for flat is 'flat/recommended' or 'flat/all'.","wrong":"module.exports = {\n  plugins: ['vuejs-accessibility'],\n  extends: ['plugin:vuejs-accessibility/recommended']\n};","symbol":"Flat config usage (ESM)","correct":"import plugin from 'eslint-plugin-vuejs-accessibility';\nexport default [\n  plugin.configs['flat/recommended'],\n  {\n    rules: {\n      'vuejs-accessibility/alt-text': 'error'\n    }\n  }\n];"},{"note":"Use the plugin prefix 'plugin:vuejs-accessibility/' in extends, not the full npm package name.","wrong":"extends: ['eslint-plugin-vuejs-accessibility/recommended']","symbol":"Legacy ESLint config (CJS)","correct":"module.exports = {\n  extends: ['plugin:vuejs-accessibility/recommended'],\n  rules: {\n    'vuejs-accessibility/alt-text': 'error'\n  }\n};"},{"note":"Rules are prefixed with 'vuejs-accessibility/'. Each rule can have severity and options. Refer to docs for individual rule options.","wrong":"\"vuejs-accessibility/click-events-have-key-events\": \"off\"","symbol":"Custom rule configuration","correct":"// .eslintrc\n{\n  'vuejs-accessibility/click-events-have-key-events': 'warn'\n}"}],"quickstart":{"code":"// Install: npm install --save-dev eslint eslint-plugin-vuejs-accessibility\n\n// Use with Flat config (ESLint v9+, recommended):\n// eslint.config.js\nimport plugin from 'eslint-plugin-vuejs-accessibility';\nimport globals from 'globals';\n\nexport default [\n  {\n    languageOptions: {\n      globals: {\n        ...globals.browser,\n        ...globals.node\n      }\n    }\n  },\n  plugin.configs['flat/recommended'],\n  {\n    rules: {\n      'vuejs-accessibility/alt-text': ['error', { elements: ['img', 'area', 'input[type=\"image\"]'] }],\n      'vuejs-accessibility/click-events-have-key-events': 'warn'\n    }\n  }\n];\n\n// For .eslintrc (legacy, ESLint v8):\n// .eslintrc.js\nmodule.exports = {\n  extends: ['plugin:vuejs-accessibility/recommended'],\n  rules: {\n    'vuejs-accessibility/alt-text': 'error'\n  }\n};","lang":"typescript","description":"Shows both flat config (ESLint v9+) and legacy .eslintrc setup for eslint-plugin-vuejs-accessibility v2.5.0."},"warnings":[{"fix":"Upgrade to v2.3.0 or later. If using ESLint v9, update config to flat format as shown in quickstart.","message":"Flat config support was added in v2.3.0. Prior to v2.3.0, only legacy .eslintrc format worked with ESLint v8. ESLint v9 users must use v2.3.0+ and flat config.","severity":"breaking","affected_versions":"<2.3.0"},{"fix":"Replace 'vuejs-accessibility/label-has-for' with 'vuejs-accessibility/form-control-has-label' in your ESLint rules.","message":"The rule 'label-has-for' is deprecated in favor of 'form-control-has-label'. It will be removed in a future major version.","severity":"deprecated","affected_versions":">=2.2.0"},{"fix":"Run `npm install --save-dev globals` (or appropriate version). Ensure 'globals' is listed in devDependencies.","message":"Peer dependency 'globals' is required and must be >=13.12.1. Missing 'globals' can cause errors in flat config setups.","severity":"gotcha","affected_versions":">=2.4.2"},{"fix":"Use plugin.configs['flat/recommended'] in flat config; for legacy config, use extends: ['plugin:vuejs-accessibility/recommended'].","message":"When using flat config, the config key is 'flat/recommended' (not 'recommended'). Using 'recommended' without 'flat/' will fail.","severity":"gotcha","affected_versions":">=2.3.0"},{"fix":"Correct rule name format: 'vuejs-accessibility/rule-name'. Example: 'vuejs-accessibility/alt-text'.","message":"Rules must be prefixed with 'vuejs-accessibility/' in rule settings. Omitting the prefix causes ESLint to throw 'Definition for rule was not found'.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run `npm install --save-dev eslint-plugin-vuejs-accessibility` (or yarn equivalent). Ensure the package is in your devDependencies.","cause":"Missing or incorrect installation of the plugin package.","error":"ESLint couldn't find the plugin \"eslint-plugin-vuejs-accessibility\"."},{"fix":"Prefix rule names with 'vuejs-accessibility/'. Example: 'vuejs-accessibility/alt-text': 'error'.","cause":"The rule prefix is missing or plugin not loaded correctly. Common mistake: using 'alt-text' instead of 'vuejs-accessibility/alt-text'.","error":"Definition for rule 'vuejs-accessibility/alt-text' was not found."},{"fix":"Import the plugin as default: `import plugin from 'eslint-plugin-vuejs-accessibility';`.","cause":"Using the wrong import style, e.g., `import { rules } from 'eslint-plugin-vuejs-accessibility'` instead of default import.","error":"Invalid plugin object, expected a plugin with a 'rules' property."},{"fix":"Add an `alt` attribute to your <img> elements: `<img src=\"...\" alt=\"description\">`.","cause":"The rule flags missing alt text on images; sometimes users misunderstand it expects a `title` prop instead of `alt`.","error":"Prop `title` is missing from template, but rule `vuejs-accessibility/alt-text` is enabled."},{"fix":"Install `globals` as a dev dependency: `npm install --save-dev globals`.","cause":"Missing peer dependency 'globals' required since v2.4.2.","error":"Cannot find module 'globals'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}