noRedundantAlt (HTML)

Summary

Rule available since: v2.4.0
Diagnostic Category: lint/a11y/noRedundantAlt
This rule is recommended, meaning it is enabled by default.
This rule doesn’t have a fix.
The default severity of this rule is error.
Sources:
- Inspired from jsx-a11y/img-redundant-alt

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "a11y": {
5
        "noRedundantAlt": "error"
6
      }
7
    }
8
  }
9
}

Description

Enforce img alt prop does not contain the word “image”, “picture”, or “photo”.

The rule will first check if aria-hidden is truthy to determine whether to enforce the rule. If the image is hidden, then the rule will always succeed.

Examples

Invalid

1
<img src="src" alt="photo content" />;

code-block.html:1:20 lint/a11y/noRedundantAlt ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Avoid the words "image", "picture", or "photo" in img element alt text.
  
  > 1 │ <img src="src" alt="photo content" />;
      │                    ^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Screen readers announce img elements as "images", so it is not necessary to redeclare this in alternative text.

1
<img alt="picture of cool person" aria-hidden="false" />;

code-block.html:1:10 lint/a11y/noRedundantAlt ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Avoid the words "image", "picture", or "photo" in img element alt text.
  
  > 1 │ <img alt="picture of cool person" aria-hidden="false" />;
      │          ^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Screen readers announce img elements as "images", so it is not necessary to redeclare this in alternative text.

Valid

1
<div>
2
  <img src="src" alt="alt" />
3
  <img src="bar" aria-hidden alt="Picture of me taking a photo of an image" />
4
</div>