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

<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

<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> <!-- TODO -->

<img src="/divider.png" alt=> <!-- TODO -->
Attribute value should be quoted: `alt="value"`. Always wrap attribute values in quotes. (html-attribute-values-require-quotes)

<%= image_tag image_path("logo.png") %> <!-- TODO -->
Duplicate attribute `todo` found on tag. Remove the duplicate occurrence. (html-no-duplicate-attributes)

References

• W3C: Alternative Text
• WCAG 2.1: Non-text Content