Why Add alt Attribute to HTML img Element?

You should consider adding a descriptive text to the alt attribute (on HTML the <img /> tag) because it helps improve:

  1. Accessibility;
  2. User Experience;
  3. SEO.

On the flip side, there could be instances where it may not necessary to add description to images. This could be the case, for example, when the image is used as a decoration or a tracking pixel. In such instances, you can specify an empty alt attribute (i.e. alt="") instead, which indicates that the image is not an important part of the content. If you do so, then, for example, a visual browser may choose to hide the broken image icon.

Improves Accessibility

Adding an alternative text to images can serve as information for non-visual browsers (such as screen readers) and assistive technologies (such as braille readers). It can help these devices represent the visual content in a meaningful way for their audience. For example, a screen reader does so by reading aloud the alt text. Making information accessible/available in this way is especially useful for people with visual impairments, who rely on such tools and technologies.

Improves User Experience

In certain situations, the browsers might not display images at all. For example, when:

  • Using non-visual browsers or assistive technologies (such as screen readers, braille readers, etc.);
  • The user turns off images in the browsers (for example, to save bandwidth or mobile data, for privacy reasons, etc.);
  • A visual browser fails to load the image (for example, when the resource might not be reachable, the image format might be unsupported/invalid, etc.).

In such instances, a descriptive alt text provides great value as it can be served by the browser instead of the visual content, leading to a better user experience. Other than that, some browsers also use the alt text when:

  • Copy/pasting the image to text;
  • Saving a linked image to a bookmark.

Improves SEO

For visual content, search engines might rely on image recognition technologies to better understand the content. However, by providing an alt text, you add great semantic value to your images, as it can give better context/descriptions to search engine crawlers/bots for the images. This might help them index/classify images better, which can in-turn impact SEO positively, as otherwise, it is possible that you could rank for unintended keywords or miss out on ranking opportunity altogether.

This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.