When is it acceptable to leave the alt text empty on an HTML image (if ever)?

Question

It has been my understanding up to this point that the alt attribute is required, and should not be left blank. This seems to be confirmed in existing questions, such as this one.

However, in reading the HTML spec today, I noticed the following:

A single image can have different appropriate alternative text depending on the context.

In each of the following cases, the same image is used, yet the alt text is different each time. The image is the coat of arms of the Carouge municipality in the canton Geneva in Switzerland.

Here it is used as a supplementary icon:

<p>I lived in <img src="carouge.svg" alt=""> Carouge.</p> 

It goes on to show other examples with various alt text, but this in this (and a couple other examples) the alt text is missing.

The spec later says (emphasis mine):

Except where otherwise specified, the alt attribute must be specified and its value must not be empty; the value must be an appropriate replacement for the image.

Is it ok to use alt=""? If so, when is this an acceptable use? If the image does not need alt text, should it be a CSS background image?

Note: This is based on the WHATWG HTML Living Standard, not the W3C HTML5 specification.

Answer 1

When to leave the alt attribute empty

Typically, the alt attribute is required; however, there are several cases in which the HTML spec says it is OK to leave the alt attribute's contents empty. The alt attribute is the text equivalent of the image, which means that it should only be empty if the meaning of the image is already encapsulated by the surrounding text.

Graphical representation of surrounding text (link)

It is important to think about the alt text as what content the image should be conveying in the case that it is unavailable. If the image can be summarized by text surrounding it, then it should have an empty alt attribute, because the redundancy would not be beneficial.

Examples include flowcharts or graphs that repeat the surrounding text.

If a caption is to be used, that caption should be included as a title element or using <figcaption>. The alt should be used if the graph can be described by information not available elsewhere on the page. The spec says the following on why this repetition should be avoided:

Including the caption in the alternative text like this isn't useful because it effectively duplicates the caption for users who don't have images, taunting them twice yet not helping them any more than if they had only read or heard the caption once.

Decorative images (link)

Generally, the spec recommends that the CSS background-image be used for this, but clarifies that in certain cases this may be done through the markup, such as a painting next to a poem, or a photo of the landscape at an event. In these cases, the images are content, but that content is only relevant if the user is able to see the images.

Groups of images that form a larger picture (link)

With no links

Only one image should have alt text to avoid repetitive text to users who can't see the images.

With links

The spec recommends that an image map be used for this instead, but if the image is sliced, there must be one image with alt text per link.

When to omit the alt attribute entirely

In some cases, the alternate text cannot be known or is unnecessary, and in these cases, alt="" is inaccurate, because it implies that the image does not add anything. The HTML spec warns:

If there is even the slightest possibility of the author having the ability to provide real alternative text, then it would not be acceptable to omit the alt attribute.

However, it acknowledges a couple of cases in which the alt may be omitted.

Unknown alt (link)

In certain cases, such as a blind user's blog or a photo sharing website where the metadata does not contain helpful information, the alt may be unknown.

In these cases, using the title attribute or a <figcaption> is required. Though it may be unknown the exact details of the image, some explanatory text should still be included. In this case, <figcaption> is preferred because

Relying on the title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification.

Known recipient(s) who can view images (link)

If you are writing a document that will only be viewed by a few known recipients, all of whom are known to be able to see images, the alt attribute may be omitted. It is recommended that the alt be included anyway, in case the email or document is forwarded.

Appendix: What about CSS background images?

If the image is not content, it should probably be a background image. For a breakdown of the rationale behind <img> vs. background-image, check out When to use IMG vs. CSS background-image?