require-img-alt

This rule enforces the use of alt attribute in img tags.

Why?

1. Accessibility
   1. The primary purpose of the alt attribute is to enhance web accessibility. Screen readers and other assistive technologies rely on alternative text to describe images to users with visual impairments. This allows users who cannot see the images to understand the content and context of the images on a webpage.
2. SEO
   1. Search engines use the alt text as part of their algorithms to understand the content and context of images. Providing descriptive and relevant alternative text can improve the search engine optimization (SEO) of your website, making it more likely to appear in relevant search results.
3. Broken Image Replacement
   1. If an image fails to load for any reason, the alt text is displayed in its place. This helps users understand what the image was supposed to convey, even if they cannot see the actual image.

How to use

.eslintrc.js

module.exports = {
  rules: {
    "@html-eslint/require-img-alt": "error",
  },
};

Screen readers use alt attributes in img tags for describing images. The alt value is displayed if the image fails to load. So the img tag should contain the alt attribute for those who cannot see images.

Rule Details

This rule enforces the alt attribute at img tag.

Examples of incorrect code for this rule:

<img src="image.png" />

Examples of correct code for this rule:

<img src="image.png" alt="some description" />

<img src="image.png" alt="" />
<!-- empty value for decorative image -->

Options

This rule takes an object option.

1. substitute: Specifies an array of attribute keys that can replace the alt attribute.

Examples of correct code for the { substitute: ["[alt]", "[attr.alt]"] } option:

<img src="image.png" [alt]="..." />

<img src="image.png" [attr.alt]="..." />

Further Reading

1. MDN - img