a11y/role-img-has-name

Require an accessible name on elements with role="img".

Applies to: Vue SFC templates and blocks, with script context where the rule requires it.

Bad

The image sets role="img" after an empty alt, so it is exposed as an image with no accessible name.

<template>
  <img src="/a.png" alt="" role="img" />
</template>

Good

alt="Network diagram" names the image, so role="img" has an accessible name.

<template>
  <img src="/a.png" alt="Network diagram" role="img" />
</template>

Configuration (Vite+)

import { defineConfig } from "@vizejs/vite-plugin/vite-plus";

export default defineConfig({}).withVue({
  linter: {
    "preset": "incremental",
    "rules": {
      "a11y/role-img-has-name": "warn"
    }
  },
});

Then run vp run lint.

Differences from eslint-plugin-vuejs-accessibility

This rule reports an element whose explicit role is img when that element has no accessible name. a11y/no-redundant-roles keeps role="img" on <img alt=""> because an empty alt makes the implicit role presentation under HTML-ARIA, so the explicit role is not redundant. eslint-plugin-vuejs-accessibility still reports that attribute as a redundant img role. WAI-ARIA 1.2 requires an accessible name for the img role. A non-empty alt on <img>, or aria-label, aria-labelledby, or title, supplies that name.

Related

• Accessibility rules
• All rules
• Source code