Why Image Text Alternatives Matter

Images are central to most web pages, and they present a unique challenge for low-vision users. The key question isn't whether to provide a text alternative, but what kind of alternative each image needs—and that depends entirely on the role the image plays in the page.

Consider a photo of a cat used to illustrate an article about feline behavior. Without any additional markup, a screen reader will announce the image using its literal file name, such as "/160204193356-01-cat-500.jpg". That's technically accurate but completely unhelpful to someone trying to understand the page's content.

The alt attribute solves this problem by providing a meaningful substitute. For the cat photo, an appropriate alternative might be "A cat staring menacingly off into space." This gives screen reader users a succinct description, letting them decide whether to continue reading the article or move on.

How alt Works

Two details about alt are worth keeping in mind:

  • alt supplies a simple string that is used whenever the image isn't available—whether it fails to load, is encountered by a web crawler, or is read by a screen reader.
  • alt differs from title or captions in that it is only used when the image itself cannot be seen.

Writing effective alt text is more art than science. For a string to work as a genuine text alternative, it must convey the same concept as the image, within the same context. That means there's no one-size-fits-all answer.

Context Determines the Alternative

Take a logo in a site's masthead that links to the homepage. A literal description might be "The Funion logo," which is accurate but not necessarily the most useful choice. One might be tempted to use "home" or "main page" instead. However, that approach creates confusion for everyone. A screen reader user trying to locate the masthead logo on the page would find an alt value of "home" more disorienting, not less. And a sighted user faces the same puzzle of figuring out what clicking the logo does—neither group gets clearer guidance from the oversimplified label.

On the flip side, describing every image is not always the right call. Consider a magnifying glass icon inside a search button that already has the visible text "Search." If that text weren't present, the image would definitely need an alt value of "search." But because the screen reader will announce the visible word Search anyway, duplicating it in the alt attribute is redundant noise.

Yet leaving out the alt attribute entirely is also a problem—screen readers will fall back to announcing the image file name, which is useless and potentially confusing. The solution in this case is an empty alt attribute (alt=""), which tells the screen reader to skip the image altogether.

The Bottom Line

Every image should have an alt attribute, but not every image needs text in it. Important images deserve descriptive alt text that succinctly captures what the image shows, while decorative images should use an empty alt attribute so assistive technology passes right over them.