Skip to content.

Quick tip

Using alt text properly

By: Susan Robertson. Published: .

Table of Contents

The alt attribute is meant to provide "alternate text" descriptions of images to help ensure people do not miss out on information conveyed by graphics.

Alternative text can help people using assistive technology, such as screen readers, or people who have images turned off on their mobile devices (to save data, for instance). Additionally, alt text can be useful to everyone in instances of poor Internet service, or your CDN of choice having a service hiccup (or attack), and images are slow or fail to load.

A few tips on how and when to use the alt attribute:

  • Use the alt attribute for images that are used as more than decoration. The alternative text describes the primary purpose of an image and is rarely a detailed description of the image itself (unless, for example, the page is actually about a specific image).
  • Make sure the description of the image is useful. For example, if the image is of a company's logo, the alt should be the company's name. The word "logo" is not necessary or useful as part of the alternative text.
  • Don't begin alternative text with "photo of..." or "picture of...". Assistive technologies already indicate the role of the element as an "image" or "graphic". Redundancy makes for poor user experiences.
  • Don't put line breaks in alt text. Doing so can cause awkward screen reader announcements. For instance, inserting the element's role "graphic" and unintended pauses prior to each line break.
  • Use an empty alt attribute for any image that is decorative or not necessary for understanding the content of the page. For example, an image providing decoration to an article's heading could be hidden by giving the image an alt="" or simply alt
  • Using an image several times in a website doesn't necessarily mean the alt attribute will be the same for each instance. For example, a logo within a website's header often doubles a link back to the home page. In this example, the alt would be useful as "Company's name - home". If that same logo were used in the footer of the site, next to the text "Company's name, copyright 20XX", then the logo would have an empty alt (alt="") so as to not create a redundant announcement of the company's name.
  • There may be other times where images are used within links, but are decorative to the visible label of the link. For example, if the image is an icon of a phone and part of a "contact" link, the alt could be empty as the text of the link indicates what the icon represents.

This post was last updated on by Scott O'Hara.

Further reading