Linter Rule: Require `alt` attribute on `<img>` tags

Rule: html-img-require-alt

Description

Enforce that all <img> elements include an alt attribute.

Rationale

The alt attribute provides alternative text for images, which is essential for accessibility (screen readers, assistive technologies), SEO, and proper fallback behavior when images fail to load. Even if the image is purely decorative, an empty alt="" should be provided to indicate that the image should be ignored by assistive technologies.

Omitting the alt attribute entirely leads to poor accessibility and can negatively affect user experience.

Examples

✅ Good

erb

<img src="/logo.png" alt="Company logo">

<img src="/avatar.jpg" alt="<%= user.name %>'s profile picture">

<img src="/divider.png" alt="">

<%= image_tag image_path("logo.png"), alt: "Company logo" %>

🚫 Bad

erb

<img src="/logo.png">Missing required `alt` attribute on `<img>` tag. Add `alt=""` for decorative images or `alt="description"` for informative images. (html-img-require-alt)

<img src="/avatar.jpg" alt>The `alt` attribute has no value. Add `alt=""` for decorative images or `alt="description"` for informative images. (html-img-require-alt)

<%= image_tag image_path("logo.png") %> <!-- TODO -->Missing required `alt` attribute on `<img>` tag. Add `alt=""` for decorative images or `alt="description"` for informative images. (html-img-require-alt)

Linter Rule: Require alt attribute on <img> tags ​

Description ​

Rationale ​

Examples ​

✅ Good ​

🚫 Bad ​

References ​