Images have alt attributes that describe the said image for screen readers. The alt tags are also shown by browsers when the image does not load. The question we are looking at today is, When is it okay to skip the alt tag?

Never.

That was a trick question, you should never skip the alt tag.

But there are times when you can leave it empty and those are the cases I plan to explore in this post.

How do we leave it empty?

<img src="{source}" alt="" />

That was simple.

What are the consequences of leaving it empty?

1. Screen readers will not detect your image.
2. If it is broken, there will not be an alternative text to determine the context provided by the image.

When do we use the alt tag?

This depends on the picture and the context it is presented in.

If a user is able to understand the use of the picture in the context it is used in without using any caption, this would be the case for you to use an alt tag to explain it to a non visual user.

For example, consider this image:

Without any companion text, a person who uses the visual stimulus can tell that this is a boy and a tiger (probably an imaginary friend of the small boy) dancing in joy. This is the context you need to provide to the non visual user using the alt tag.

Decorative Images

These cover the cases when the image is merely used for decoration purposes. For example, the images that could be used to seperate sections in articles.

These can already be indicated in HTML using section tags and do not require the presence of these decorative images. Providing an alt text to these images just confuse the non visual user further to their usage. Furthermore, these tend to be repeated across the page in most cases and would be irritating when repeated by reader several times.

It is okay to leave the alt tag empty in this case.

When do we use the caption?

Sometimes just the image is not enough. Even for the visual user,it requires some kind off textual information to make sense of the data.

For example, consider the same image that we used in the earlier example with a different title: