or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration.mdindex.mdrules.mdutilities.md
tile.json

configuration.mddocs/

Configuration

ESLint configuration presets for Vue.js accessibility compliance, supporting both legacy and modern ESLint formats.

Capabilities

Recommended Configuration (Legacy)

Legacy ESLint configuration preset with all accessibility rules enabled at error level.

/**
 * Legacy ESLint configuration preset
 * Compatible with ESLint versions 5-8
 */
interface RecommendedConfig {
  parser: "vue-eslint-parser";
  parserOptions: {
    ecmaVersion: 2020;
    sourceType: "module";
  };
  env: {
    browser: true;
    es6: true;
  };
  plugins: ["vuejs-accessibility"];
  rules: Linter.RulesRecord;
}

Usage:

module.exports = {
  extends: ["plugin:vuejs-accessibility/recommended"]
};

Flat Recommended Configuration

Modern flat ESLint configuration array for ESLint v9+ with proper Vue.js file targeting.

/**
 * Flat ESLint configuration array
 * Compatible with ESLint v9+
 */
interface FlatRecommendedConfig extends Array<FlatConfigObject> {
  0: {
    name: "vuejs-accessibility:setup:base";
    plugins: {
      "vuejs-accessibility": PluginDefinition;
    };
    languageOptions: {
      sourceType: "module";
      globals: Record<string, boolean>;
    };
  };
  1: {
    name: "vuejs-accessibility:setup:with-files-rules-and-parser";
    files: ["*.vue", "**/*.vue"];
    plugins: {
      "vuejs-accessibility": PluginDefinition;
    };
    languageOptions: {
      parser: VueESLintParser;
      sourceType: "module";
      globals: Record<string, boolean>;
    };
    rules: Linter.RulesRecord;
  };
}

Usage:

import vueA11y from "eslint-plugin-vuejs-accessibility";

export default [
  ...vueA11y.configs["flat/recommended"]
];

Rule Configuration

Rule mapping object defining severity levels for all accessibility rules.

/**
 * Rule configuration mapping with severity levels
 */
interface RulesRecord {
  "vuejs-accessibility/alt-text": "error";
  "vuejs-accessibility/anchor-has-content": "error";
  "vuejs-accessibility/aria-props": "error";
  "vuejs-accessibility/aria-role": "error";
  "vuejs-accessibility/aria-unsupported-elements": "error";
  "vuejs-accessibility/click-events-have-key-events": "error";
  "vuejs-accessibility/form-control-has-label": "error";
  "vuejs-accessibility/heading-has-content": "error";
  "vuejs-accessibility/iframe-has-title": "error";
  "vuejs-accessibility/interactive-supports-focus": "error";
  "vuejs-accessibility/label-has-for": "error";
  "vuejs-accessibility/media-has-caption": "error";
  "vuejs-accessibility/mouse-events-have-key-events": "error";
  "vuejs-accessibility/no-access-key": "error";
  "vuejs-accessibility/no-aria-hidden-on-focusable": "error";
  "vuejs-accessibility/no-autofocus": "error";
  "vuejs-accessibility/no-distracting-elements": "error";
  "vuejs-accessibility/no-redundant-roles": "error";
  "vuejs-accessibility/no-role-presentation-on-focusable": "error";
  "vuejs-accessibility/no-static-element-interactions": "error";
  "vuejs-accessibility/role-has-required-aria-props": "error";
  "vuejs-accessibility/tabindex-no-positive": "error";
}

Note: The no-onchange rule exists but is not included in the recommended configuration preset. It can be enabled individually if needed.

Configuration Examples

Custom Rule Selection

module.exports = {
  plugins: ["vuejs-accessibility"],
  rules: {
    // Enable specific rules only
    "vuejs-accessibility/alt-text": "error",
    "vuejs-accessibility/aria-props": "warn",
    "vuejs-accessibility/form-control-has-label": "error",
    
    // Disable specific rules
    "vuejs-accessibility/no-autofocus": "off"
  }
};

Mixed with Other Vue.js Plugins

module.exports = {
  extends: [
    "plugin:vue/vue3-recommended",
    "plugin:vuejs-accessibility/recommended"
  ],
  plugins: ["vue", "vuejs-accessibility"]
};

Flat Config with Custom Settings

import vue from "eslint-plugin-vue";
import vueA11y from "eslint-plugin-vuejs-accessibility";

export default [
  ...vue.configs["flat/recommended"],
  ...vueA11y.configs["flat/recommended"],
  {
    files: ["**/*.vue"],
    rules: {
      "vuejs-accessibility/alt-text": "warn",
      "vuejs-accessibility/no-autofocus": "off"
    }
  }
];