How to Write Accessible Alt Text

Video Length

3:31

Watch the Video

Video Transcript

DESCRIBE THE PURPOSE OF THE IMAGE

Accessible alt text communicates to users the purpose of the image. While your instincts may be to describe the content of the image, this only matters in context. In other words, focus on the why of the image, not the what.

Consider this photo of Ball State's campus:

Ball State University McKinley Avenue with Shafer Bell Tower in background

While you could describe all the features of this image—the pink flowers, the bright green trees, the buildings on the side, the crosswalks, etc.—this would be extremely frustrating for users with a screen reader.

Instead, effective alt text concisely describes why the image is present on the page. For example, here are several contexts and how the alt text would change for this image based on its context.

Alt Text in Different Contexts
Context Alt Text
Page about Midwest colleges Ball State University campus
Page about colleges going remote during the pandemic Ball State University campus with empty roads and sidewalks
Page about beautification efforts on Ball State's campus McKinley Avenue with flower planters in median

Accessible alt text answers this question: What meaning is being conveyed by the image in this context?

DOS AND DON'TS OF ALT TEXT

Try to keep your alt text short and to-the-point. Most alt text is no longer than a short phrase or a sentence. While some special cases require long descriptions, we will cover those separately in Complex Images: Diagrams, Graphs, Maps, Art, and More.

When writing alt text, make sure you do the following:

  • Describe the purpose of the image on the page.
  • Use precise language.
  • Be concise.
  • Reproduce any text on the image exactly in the alt text or surrounding text content.

When writing alt text, make sure you don't do the following:

  • Use the file name or include any file extensions (e.g., .jpg, .png).
  • Simply state what the image is of, unless that is all that is all that is important in the context.
  • Describe the visible features of the image, unless they are necessary to convey the purpose of the image.
  • Use the phrase "image of" or "photo of," except if the medium is important to the purpose of the image, such as in art. Screen readers will indicate that an image is an image, so including "image" in your alt text is unnecessary.
  • Copy and paste alt text if the same image is used multiple times on a page.

Continue on to take a quick, 3-question quiz about alt text or skip the quiz and go to Step 2.

Take the Alt Text Quiz Skip to Step 2

Quick Recap

Accessible alt text is concise and describes the purpose the image serves in a particular context.