Skip to content
Biome
Docs Blog Playground

noRedundantAlt

Diagnostic Category: lint/a11y/noRedundantAlt

Since: v1.0.0

Sources:

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

Section titled Examples

Invalid

Section titled Invalid
<img src="src" alt="photo content" />;
code-block.jsx: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.
  
<img alt={`picture doing ${things}`} {...this.props} />;
code-block.jsx:1:10 lint/a11y/noRedundantAlt ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Avoid the words “image”, “picture”, or “photo” in img element alt text.
  
  > 1 │ <img alt={picture doing $&#123;things&#125;} {…this.props} />;
      │          ^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Screen readers announce img elements as “images”, so it is not necessary to redeclare this in alternative text.
  
<img alt="picture of cool person" aria-hidden={false} />;
code-block.jsx: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

Section titled Valid
<>
  <img src="src" alt="alt" />
  <img src="src" alt={photo} />
  <img src="bar" aria-hidden alt="Picture of me taking a photo of an image" />
</>
Section titled Related links