Alt text and image descriptions

Using alt text and image descriptions is one of the 10 fundamental concepts that can support digital accessibility in all of your content.

Alternative (alt) text and image descriptions are brief written descriptions to describe and image. It explains the “what” of an image, and the “why”—the meaning the image gives to our visual audience.

When reading normal text, screen readers can go slowly, reading each line, word, or even letter. But for picture descriptions, they read the whole thing at once. If the user misses a detail, they have to listen to it all again from the start. Because of this, it’s best to keep picture descriptions short — 150 letters or less. Don’t use extra words like “image” or give too many small details about the picture.

Bascom Hill in fall with students walking in the grass.

Good alt text for an article about campus and its buildings:
Bascom Hall proudly displaying a bold W banner at the top of Bascom Hill.

Good alt text for an article about the start of the new school year:
Students walking in the grass in front of Bascom Hall on a crisp fall day.

For more information and examples, refer to the Alternative text guide.

Alt text vs captions

Alt text supports screen readers and is hidden for sighted readers. Use alt text to briefly describe the image to people who use screen readers.

Captions give information about the image to all readers. You can use them to augment your storytelling, share context about the image subjects, and credit the image creator or source.

Long descriptions for complex images

Images like infographics and charts contain a lot of information. These complex images usually need more than 150 characters to describe. In those cases, we recommend creating longer image descriptions instead of alt text. Image descriptions are part of the body copy of a web page or document, giving screen reader users more flexibility. Image descriptions can also benefit all audience members, describing the main takeaways of a complex image.

For more information and examples, refer to the Accessible complex images guide.

  • Keep alt text to 150 characters or fewer
  • Don’t use extra words like “image” or give too many small details.
  • Describe the “why” of the image as well as the “what”
  • Keep alt text and image captions unique
  • Describe major themes or takeaways from the image
  • For complex images, add longer image descriptions to the main text of the page

Fundamentals

Clipboard Icon

Download the checklist

Download our digital accessibility fundamentals checklist PDF to help you keep track of the core principles of accessibility while creating and editing digital resources.

Download the checklist

The Center for User Experience

At the Center for User Experience, we are committed to working with you to make digital spaces more accessible, usable and inclusive for all students, faculty and staff at UW–‍Madison. We help the university follow its Digital Accessibility Policy by offering free evaluation and consultation services to all UW–‍Madison community members. For guidance on complying with digital accessibility requirements, visit Digital accessibility and the Americans with Disabilities Act (ADA).

Get in touch

  • Meet with us: Book a quick chat with one of our team members to ask any questions you have.
  • Start a project with us: We support accessible design and development. Fill out our Let’s Connect form to begin working with us on your project or to request an accessibility evaluation.
  • Email us: Not sure if you’re ready to meet? Email us to start talking and figure out what to do next.