Comprehensive set of 23 ESLint rules for Vue.js accessibility compliance, covering ARIA usage, keyboard navigation, form labeling, media accessibility, and interactive elements.
Each accessibility rule follows the standard ESLint rule format with Vue.js-specific template analysis.
/**
* Standard ESLint rule module structure
*/
interface Rule {
meta: {
type: "problem" | "suggestion" | "layout";
docs: {
url: string;
};
messages: Record<string, string>;
schema?: JSONSchema4[];
};
create(context: Rule.RuleContext): Rule.RuleListener;
}Rules ensuring proper alternative text and media accessibility.
/**
* Ensures images and media have appropriate alternative text
* Applies to: img, object, area, input[type="image"]
*/
"vuejs-accessibility/alt-text": Rule;Checks that img, object, area, and input[type="image"] elements have proper alternative text through alt, aria-label, or aria-labelledby attributes.
/**
* Requires video/audio elements to have captions or alternatives
* Applies to: audio, video
*/
"vuejs-accessibility/media-has-caption": Rule;/**
* Ensures iframe elements have a descriptive title attribute
* Applies to: iframe
*/
"vuejs-accessibility/iframe-has-title": Rule;Rules ensuring elements have accessible content and proper labeling.
/**
* Requires anchor elements to have accessible content
* Applies to: a
*/
"vuejs-accessibility/anchor-has-content": Rule;/**
* Requires heading elements to have accessible content
* Applies to: h1, h2, h3, h4, h5, h6
*/
"vuejs-accessibility/heading-has-content": Rule;/**
* Ensures form controls have accessible labels
* Applies to: input, textarea, select
*/
"vuejs-accessibility/form-control-has-label": Rule;/**
* Ensures label elements are properly associated with form controls
* Applies to: label
*/
"vuejs-accessibility/label-has-for": Rule;Rules for proper ARIA attribute usage and validation.
/**
* Validates ARIA properties are spelled correctly
* Applies to: All elements with aria-* attributes
*/
"vuejs-accessibility/aria-props": Rule;/**
* Ensures ARIA roles are valid and supported
* Applies to: All elements with role attribute
*/
"vuejs-accessibility/aria-role": Rule;/**
* Prevents ARIA usage on elements that don't support it
* Applies to: meta, html, script, style
*/
"vuejs-accessibility/aria-unsupported-elements": Rule;/**
* Ensures ARIA roles have all required properties
* Applies to: All elements with role attribute
*/
"vuejs-accessibility/role-has-required-aria-props": Rule;/**
* Prevents redundant ARIA roles that match semantic HTML
* Applies to: Elements with implicit roles
*/
"vuejs-accessibility/no-redundant-roles": Rule;/**
* Prevents aria-hidden on focusable elements
* Applies to: Focusable elements with aria-hidden
*/
"vuejs-accessibility/no-aria-hidden-on-focusable": Rule;/**
* Prevents presentation role on focusable elements
* Applies to: Focusable elements with role="presentation" or role="none"
*/
"vuejs-accessibility/no-role-presentation-on-focusable": Rule;Rules ensuring proper keyboard accessibility and event handling.
/**
* Requires keyboard event handlers alongside mouse click events
* Applies to: Elements with @click handlers
*/
"vuejs-accessibility/click-events-have-key-events": Rule;/**
* Requires keyboard event handlers alongside mouse events
* Applies to: Elements with @mouseover or @mouseout handlers
*/
"vuejs-accessibility/mouse-events-have-key-events": Rule;/**
* Requires interactive elements to be focusable
* Applies to: Elements with interactive roles or event handlers
*/
"vuejs-accessibility/interactive-supports-focus": Rule;/**
* Prevents interaction handlers on non-interactive elements
* Applies to: Non-interactive elements with event handlers
*/
"vuejs-accessibility/no-static-element-interactions": Rule;/**
* Prevents positive tabindex values which disrupt natural tab order
* Applies to: Elements with tabindex attribute
*/
"vuejs-accessibility/tabindex-no-positive": Rule;Rules preventing accessibility-problematic patterns and attributes.
/**
* Prevents use of accesskey attribute which can conflict with screen readers
* Applies to: Elements with accesskey attribute
*/
"vuejs-accessibility/no-access-key": Rule;/**
* Prevents use of autofocus attribute which can be disorienting
* Applies to: Elements with autofocus attribute
*/
"vuejs-accessibility/no-autofocus": Rule;/**
* Prevents use of distracting elements like marquee and blink
* Applies to: marquee, blink elements
*/
"vuejs-accessibility/no-distracting-elements": Rule;/**
* Prevents onchange without onblur for accessibility
* Applies to: Elements with @change handlers
*/
"vuejs-accessibility/no-onchange": Rule;Many rules accept configuration options to customize their behavior:
{
"vuejs-accessibility/alt-text": ["error", {
"elements": ["img", "object", "area", "input[type=\"image\"]"],
"img": ["Image", "Picture"],
"object": ["Object", "Embed"],
"area": ["Area"],
"input[type=\"image\"]": ["InputImage"]
}]
}All rules provide documentation links following the pattern:
https://vue-a11y.github.io/eslint-plugin-vuejs-accessibility/rules/{rule-name}.html