Write helpful Alt Text to describe images
Alternative (Alt) Text is a brief text description of images and graphics, and is an essential part of making content accessible. When adding images, icons or other graphic elements to digital content, be sure to add alt text so that your content will be accessible to all users.
Alt Text is read by screen readers (or other assistive tech) to provide information about the image to the reader. Alt text should not just describe the image, but provide context on how the image relates to the page content.
Alt Text Best Practices
- Keep it short, usually 1-2 sentences. Don’t overthink it.
- Consider key elements of why you chose this image, instead of describing every little detail.
- No need to say “image of” or “picture of.”
- But, do say if it’s a logo, illustration, painting, or cartoon.
- Don’t duplicate text that’s adjacent in the document or website.
- End the alt text sentence with a period.
Alt Text Examples
Browse examples of alt text for different types of images.
Photographs
For photographs consider the specifics included in the image, such as names, proper nouns, locations, or action words. Consider why you have chosen that particular image and what you hope it will convey to your audience.
Example 1
Alt Text: Group of young college students laugh and walk along a tree-lined pathway.
Example 2
Alt Text: Harvard’s Memorial Church with grand columns and hanging banners displaying Harvard shields.
Icons
For icons consider the purpose of the icon — whether it is to share a logo, to indicate an available action, or to serve as a link to a new page.
Example 1 - Logo
Alt Text: Harvard's Crimson Veritas Shield.
Example 2 - Action
For action icons, the alt text should describe the action intended by the icon, such as “Download Syllabus PDF” or "Search."
Alt Text: Print the Weekend Event Schedule.
Example 3 - Link
If the icon is being used as a link to another page, the alt text should describe what will happen when the icon is clicked.
Alt Text: Visit the Harvard Library Instagram.
Illustrations
For creative illustrations, the intent of the image matters more than the specific details. If there is text included (such as in a cartoon or screenshot of an application) describe both relevant visuals and the relevant text.
Example 1
Alt Text: Cartoon of a business man seated behind a desk interviewing a candidate in a suit who has scruffy hair and a long white beard. Text below reads "Mr. Crusoe, I’m concerned about this 20 year gap in your resume."
Example 2
Alt Text: Illustration of right and left brain theory — left brain is black and white with ideas adjacent in nice organized text while right brain is vivid rainbow colors spilling out into dots of bright painted hues.
Example 3
Alt Text: Illustration of a business person in a bright yellow suit sipping coffee. Instead of a head there is a swirl of ideas and objects.
Diagrams
For diagrams and other images that aim to share specific data points, consider if you can summarize in a sentence or two the graphic’s key meaning and data points. For complex images, you may want to supplement with adjacent page text and/or a link the the full data. More guidance is available at Data Visualizations, Charts, and Graphs.
Example 1
Alt Text: Diagram of Soil Layers on Earth, from top going down: organic layer, topsoil layer, subsoil layer, parent rock layer, and last bedrock layer.
Example 2
Alt Text: World Map of GDP per country in the Trillions. From most to least: US $20, China $13, Japan $5, Germany $4, India $2.80, UK $2.80, France $2.70, Brazil $2.10, Italy $2, and Canada $1.70.
Example 3
Alt Text: A word cloud with business terms, largest to smallest: Business, Success, Idea, Money, Creative, Presentation, and other smaller business terms.
Consider the Context
When writing alt text, consider the context of where and how the image is being used. The surrounding text of the document, website, or email may affect which parts of the image are most important to describe. In this example, the image of Hollis Hall in Harvard Yard is used in two different contexts, and requires different alt text for each use case.
Use Case 1
An article titled "Spring is Here!" that highlights students enjoying the nice weather and the Luxembourg chairs being returned to Harvard Yard.
Alt text: Students lounge and work in brightly colored Luxembourg chairs in Harvard Yard.
Use Case 2
An article titled "Famous residents of Hollis Hall" that touches on the prime location of Hollis Hall in relation to common spaces.
Alt text: Hollis Hall, a red brick building, sits directly adjacent to the open grassy space of Harvard Yard.
Additional Benefits
- Alt text is indexed by search engines, and can boost your site's online presence.
- Alt text will display if the image fails to load, such as in the following example of a missing image.
Related Techniques
✎ Technique: Describing graphs
Some people understand complex information best when it's presented visually, such as as a chart or diagram, while others find that reading the information suits them better.
✎ Technique: Text and images of text
When text is presented as an image of text, that limits peoples' ability to change the appearance of that text. So wherever possible, use text along with CSS to apply styling.
✎ Technique: Using diagrams to illustrate text
While accessibility for images often focuses on providing a text alternative for screen reader users, we can also look at the issue another way—providing a graphic alternative for text to make the underlying information or concept easier to understand.