Accessibility rules
Follow each rule for purpose, severity, scope, configuration, and Bad/Good examples. The complete catalogue keeps all examples and current support boundaries on one page.
Configure lint.vize.rules and run vp run lint with the Vite+ helper. Check each page for type-aware, filename, or additional-configuration prerequisites.
| Rule | Examples | Purpose |
|---|---|---|
a11y/alt-text |
Bad · Good | Require alternative text for media elements |
a11y/anchor-has-content |
Bad · Good | Require anchor elements to have accessible content |
a11y/anchor-is-valid |
Bad · Good | Enforce valid href on anchor elements |
a11y/aria-props |
Bad · Good | Disallow invalid ARIA attributes |
a11y/aria-role |
Bad · Good | Elements with ARIA roles must use a valid, non-abstract ARIA role |
a11y/aria-unsupported-elements |
Bad · Good | Disallow ARIA attributes on elements that do not support them |
a11y/click-events-have-key-events |
Bad · Good | Require keyboard event handlers with click events |
a11y/form-control-has-label |
Bad · Good | Require form controls to have associated labels |
a11y/heading-has-content |
Bad · Good | Require heading elements to have accessible content |
a11y/heading-levels |
Bad · Good | Disallow skipping heading levels |
a11y/iframe-has-title |
Bad · Good | Require iframe elements to have a title attribute |
a11y/img-alt |
Bad · Good | Require alt attribute on images for accessibility |
a11y/interactive-supports-focus |
Bad · Good | Require interactive role elements to be focusable |
a11y/label-has-for |
Bad · Good | Require labels to have associated form controls |
a11y/landmark-roles |
Bad · Good | Validate landmark role placement and uniqueness |
a11y/media-has-caption |
Bad · Good | Require media elements to have captions |
a11y/mouse-events-have-key-events |
Bad · Good | Require focus/blur events with mouse events |
a11y/no-access-key |
Bad · Good | Disallow the use of the accesskey attribute |
a11y/no-aria-hidden-on-focusable |
Bad · Good | Disallow aria-hidden="true" on focusable elements |
a11y/no-autofocus |
Bad · Good | Disallow the use of the autofocus attribute |
a11y/no-distracting-elements |
Bad · Good | Disallow distracting elements like <marquee> and <blink> |
a11y/no-i-for-icon |
Bad · Good | Disallow using <i> element for icons |
a11y/no-redundant-roles |
Bad · Good | Disallow redundant ARIA roles |
a11y/no-refer-to-non-existent-id |
Bad · Good | Disallow references to non-existent IDs |
a11y/no-role-presentation-on-focusable |
Bad · Good | Disallow role="presentation" or role="none" on focusable elements |
a11y/no-static-element-interactions |
Bad · Good | Disallow event handlers on static elements |
a11y/placeholder-label-option |
Bad · Good | Require disabled or hidden on select placeholder option |
a11y/role-has-required-aria-props |
Bad · Good | Require ARIA roles to have required properties |
a11y/tabindex-no-positive |
Bad · Good | Disallow positive tabindex values |
a11y/use-list |
Bad · Good | Suggest using list elements for bullet-like text |
vue/use-unique-element-ids |
Bad · Good | Enforce unique element IDs using useId() instead of static literals |
All rules · Rule Options · ESLint migration map · Project checks