When should I use alt-text?

The first thing you need to decide is if alt text is needed.  W3C has a decision tree to help with that.

• https://www.w3.org/WAI/tutorials/images/decision-tree/
  • Image of text?
  • Decorative or informative?
    • Informative
      • Image as part of link or button?
      • Complex image? (Graph)
    • Type of images: https://www.w3.org/WAI/tutorials/images/
    • Note that the "alt" attribute is *always* required as per HTML specs, but the value of the alt attribute can be the empty string, "" (quote-quote), or just "alt" by itself with no value. An empty alt attribute will hide the image from the screen reader.

Once you decide you need alt text, then you need to decide what type of alt text.

• Simple informative image
• Image as part of an interactive element (button or link)
• Complex image (graph, infographic)
• Image of text

Some basic concepts on good alt text:

• Be descriptive but succinct
• Describe the *purpose* of the image, not necessarily what the image is a picture of.
  • Eg, a picture of a smiling person on a phone might be a "contact us" link.
    Contact Us
    
    
  • The image alt should be "contact us", not "smiling person on a phone"
• Don't use "image of" or "picture of" or "logo" in the alt text. The screen reader will already announce that it's an image.  Just describe the purpose.
• If the image contains text, include that text in the alt text.
  • Eg, a picture of an ad that shows the product and also says 25% off today!, the alt text should state what the product is and include "25% off today"
  • Sometimes not all text needs to be included in the alt if the extra text is just decorative. For example,
    
    The alt text should be "Keyboard Shortcuts for Chromebook.  54 Shortcuts, 3 Styles, by Integration".  The keyboard picture itself technically has text on it but there's no need to list the alphabet in the alt text, or even that there's a keyboard in the picture.  The purpose of the image is to show the title and author of the book.
• Use punctuation in the alt text
  • The screen reader honors punctuation so capitalize, use commas, use periods, use exclamation points, etc., if the alt text is more than just a simple phrase
• What about a bio picture? Or a list of bio pictures such as speakers at a conference or the executive team at a company?
  • In this example, the person's name is the link so the image doesn't necessarily need alt text.
  • But do you describe the person anyway since sighted users are getting details from the picture? Gender, nationality, etc?
  • That's a design decision. The images could have alt text but don't really need it.
• What about pieces of art?

• • In this case, you might want to describe the picture itself if the purpose of the picture is to show the work of art.