Images on web pages sometimes convey important information. Alternative text, called alt text for short, provides a text equivalent of the information presented visually. Alt text is an important way to make sure everyone can understand the content of your page.

Alt text should be:

• Accurate: including spelling, grammar, and proper punctuation.
• Concise: using the fewest words possible while providing a meaningful description for the image.
• Equivalent: presenting the same content and/or function of the image.

Assistive technologies will announce when an object is an image, so including this information is redundant and not necessary.

Tips for writing effective alt text

1. Describe the image as specifically as possible 
2. Keep it short 
3. Don't include "image of," "picture of," "graphic of" etc. 
4. Don't include the file extension, .jpg or .png, .gif, etc. 
5. Image buttons should have an alt attribute that describes the function of the button like, "search," "donate," “sign up,” etc.

Photos

The alt text will depend on the context and intention of the image. For the image below, the alt text could be "Hands of students fly small Brown University pennants in front of the Van Wickle Gates during Commencement."

Buttons

There are times when images also serve a function, like a button for example. In these cases, the alt text should communicate the function and include the appropriate text from the image. For the button below, the alt text could be "Read news from Brown."

Illustrations, graphs, and charts

Illustrations, graphs, and charts should include alt text that describes the important, relevant information. Instead of repeating every single data point in a chart or graph, it may be more effective to summarize the overall meaning or intent of the graphic representation. Following the image, the key elements may be presented as text on the page for an individual to read and review.

For the graph below, the alt text could be "Graph depicting Stanford's path to reduced emissions from 2011 to 2021"

The text on the page could then identify the key elements as presented in the image, such as:

"Bar chart showing the number of students enrolled in the Brown-RISD Dual Degree program from Fall 2016 to Fall 2025. Enrollment peaked in Fall 2023 with 79 students."

Decorative Images

If an image is purely decorative "eye candy" that doesn't convey meaning, or a decorative element like a section break, give it  an ALT text of alt=”” (quotes with nothing in between). 

It's important to do this instead of leaving out the alt attribute entirely - without this empty alt attribute, screen reading programs will attempt to ‘guess’ as to what the information is by reading other elements, such as the file name of the image.

A decorative image showing an aerial view of Brown and Providence. 

Images may also be used in conjunction with other text on the page without providing any additional content or information. For example, when looking at a list of news articles from the Brown website, there is both the title of the story and the picture from the story. In this context, the image doesn’t provide any additional relevant information to a user that is trying to decide if they want to read additional details about the event or not. The news could therefore have a NULL alt text for each image.