When to Add Empty alt Attribute to HTML img Element?

The empty alt attribute (i.e. alt="") indicates that the image is not an important part of the content. Adding an empty alt attribute is typically done when:

  • The image does not convey any meaning (e.g. image is transparent);
  • The image does not add anything useful to the document (e.g. image is used as a decoration or a tracking pixel).

For example:

<img src="tracking-pixel.gif" alt="" />

In such cases, the user agent may choose to omit/ignore the image, for example, when:

  • The image appears broken (because the resource might be unreachable for example);
  • The image is unsupported or invalid;
  • The image is being interpreted by non-visual browsers (such as screen readers, text-only browsers, etc.) or assistive technologies (such as braille readers, etc.);
  • Images are turned off by the user in a visual browser (for example, to save bandwidth or mobile data, for privacy reasons, etc.).

When this happens, the user agent may provide the user with a notification (or some sort of indication) that an image is present but has been omitted from rendering.

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.