or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

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

tessl/npm-eslint-plugin-vuejs-accessibility

ESLint plugin for checking Vue.js files for accessibility compliance with comprehensive accessibility rules.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/eslint-plugin-vuejs-accessibility@2.4.x

To install, run

npx @tessl/cli install tessl/npm-eslint-plugin-vuejs-accessibility@2.4.0

index.mddocs/

ESLint Plugin Vue.js Accessibility

ESLint Plugin Vue.js Accessibility is a comprehensive ESLint plugin that provides 23 specialized accessibility rules for Vue.js single-file components (.vue files). It helps developers identify and fix accessibility issues in Vue applications, ensuring compliance with web accessibility standards like WCAG and providing comprehensive coverage for ARIA usage, keyboard navigation, form labeling, media captioning, and interactive element accessibility.

Package Information

  • Package Name: eslint-plugin-vuejs-accessibility
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install eslint-plugin-vuejs-accessibility

Core Imports

const plugin = require("eslint-plugin-vuejs-accessibility");

For accessing individual rules and configs:

const { rules, configs } = require("eslint-plugin-vuejs-accessibility");

Basic Usage

Legacy ESLint Configuration

module.exports = {
  extends: ["plugin:vuejs-accessibility/recommended"],
  plugins: ["vuejs-accessibility"],
  parser: "vue-eslint-parser",
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: "module"
  }
};

Flat ESLint Configuration (ESLint v9+)

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

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

Individual Rule Usage

module.exports = {
  plugins: ["vuejs-accessibility"],
  rules: {
    "vuejs-accessibility/alt-text": "error",
    "vuejs-accessibility/anchor-has-content": "warn",
    "vuejs-accessibility/aria-props": "error"
  }
};

Architecture

The plugin is built around several key components:

  • Rule System: 23 specialized accessibility rules targeting Vue.js template patterns
  • Configuration Presets: Pre-configured rule sets for immediate accessibility compliance
  • Utility Library: 27+ utility functions for accessibility analysis and Vue.js AST processing
  • Vue Parser Integration: Deep integration with vue-eslint-parser for template analysis
  • Flat Config Support: Modern ESLint flat configuration format support

Capabilities

Plugin Export

Main plugin export containing rules and configuration presets.

interface PluginExport {
  configs: {
    recommended: Linter.BaseConfig;
    "flat/recommended": Linter.FlatConfig[];
  };
  rules: {
    [ruleName: string]: Rule.RuleModule;
  };
}

Configuration Presets

Pre-configured ESLint settings for immediate accessibility compliance, supporting both legacy and modern ESLint formats.

interface LegacyConfig {
  parser: string;
  parserOptions: {
    ecmaVersion: number;
    sourceType: string;
  };
  env: {
    browser: boolean;
    es6: boolean;
  };
  plugins: string[];
  rules: Linter.RulesRecord;
}

interface FlatConfig {
  name: string;
  files?: string[];
  plugins: {
    [pluginName: string]: PluginDefinition;
  };
  languageOptions: {
    parser?: any;
    sourceType: string;
    globals: Record<string, boolean>;
  };
  rules?: Linter.RulesRecord;
}

Configuration

Accessibility Rules

Comprehensive set of 23 accessibility rules covering ARIA usage, keyboard navigation, form labeling, media accessibility, and interactive elements.

interface Rule {
  meta: {
    type: "problem" | "suggestion" | "layout";
    docs: {
      url: string;
    };
    messages: Record<string, string>;
    schema?: JSONSchema4[];
  };
  create(context: Rule.RuleContext): Rule.RuleListener;
}

Accessibility Rules

Utility Functions

Extensive utility library for Vue.js accessibility analysis including element inspection, ARIA validation, and template processing.

// Template processing
function defineTemplateBodyVisitor(
  context: Rule.RuleContext,
  templateVisitor: TemplateListener,
  scriptVisitor?: Rule.RuleListener
): Rule.RuleListener;

// Element analysis
function hasAriaLabel(node: AST.VElement): boolean;
function isInteractiveElement(node: AST.VElement): boolean;
function isPresentationRole(node: AST.VElement): boolean;

// Attribute utilities
function getElementAttributeValue(node: AST.VElement, attributeName: string): string | null;
function getAttributeValue(attribute: AST.VAttribute): string | null;

Utility Functions

Types

interface TemplateListener extends Rule.NodeListener {
  VAttribute?(node: AST.VAttribute): void;
  VElement?(node: AST.VElement): void;
  VText?(node: AST.VText): void;
}

interface AST {
  VElement: {
    type: "VElement";
    name: string;
    startTag: VStartTag;
    children: VNode[];
    endTag: VEndTag | null;
  };
  VAttribute: {
    type: "VAttribute";
    directive: boolean;
    key: VIdentifier | VDirectiveKey;
    value: VLiteral | VExpressionContainer | null;
  };
}