How to Write Accessible Alt Text
Video Length
3:31
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:
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.
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.