Alternative Text

Overview

Alternative text (or alt text), is text that describes an image for those who cannot see the image. This text is not visible on screen, but will be read by a screen reader.

Alt text that is written well is context dependent and conveys the meaningful visual information in the image.

Best Practices

Here are some general guidelines for writing good alt text:

Keep it short (one or two sentences)
There is no need to say “image of," because screen readers say “Image:" before reading alt text. It is OK to include the format if it is meaningful in context: a student's painting, a screenshot, a caricature.
Decorative graphical elements such as lines, separators and icons connected to text with the same meaning ("⏸️ Pause") should have empty alt text. Some editors have a checkbox to do this called “Mark as Decorative.”
All images must either include alt text or be marked as decorative.

Example

For example, let's say you want to include an image of Nassau Hall in an article on your website but you need to write the appropriate alt text to describe the image. Start by asking the following questions:

What is the context of the article?
What is the meaningful visual information in the image based on the context of the article? This information will help determine what part of the building to focus on in the alt text description.

With those questions in mind, here are some possible alt text descriptions for this image:

Front of Nassau Hall, a stone building with ivy crawling up the walls and two tiger statues on either side of the front door.

Article Context	Alt Text Example	Explanation
The architecture of Nassau Hall.	The front of a stone building with a central cupola over a grid of evenly spaced, paned windows. Ivy climbs the walls behind two statues of tigers, laying down on either side of the front door.”	Since the article is about architecture, it should focus on the visual architecture of the building.
The History of Nassau Hall.	"The front of Nassau Hall today, with ivy crawling up the stone."	Since the image doesn't give us any information on the history of Nassau Hall, all that's needed is a description of the building or simply, “Nassau Hall.”
Types of ivy native to Princeton, NJ.	"Ivy climbing up four stories on the side of a stone building."	Since this context has nothing to do with the actual building, the ivy is the focus of the alt text.
An admissions brochure.	“The front of a historic stone building with ivy crawling up the sides. Two copper statues of tigers lie on either side of the front door.”	Since this is a brochure enticing students to come to Princeton, you may want to focus on campus beauty since just saying “Nassau Hall,” doesn't tell an incoming student much about the campus.
A banner image that has nothing to do with the context.	"Nassau Hall."	There is no meaning in context in this example, so a simple alt works here.

Note that these are just examples of possible alt text for each situation. There will be variations on details and language based on who writes the alt text and what they know about the subject. There is no “right” answer; the alt simply needs to be short, clear, and focused on the relevant, meaningful content of the image.

Decorative Images and Onscreen Elements

Some images are used to break up text and do not contain any meaningful information (e.g. divider lines). These graphics can be marked as “decorative.” This tells a screen reader to skip over the graphic as it does not contain any meaningful information. Here are some examples.

Decorative lines can be marked “decorative.”

Icons without meaning can be marked as decorative. In the example below, the labels next to the icons already provide the meaning of the icon. If we put alt text on the icons, it would be redundant.

Example of icons with corresponding labels

Icons with meaning should include alt text. For example, a search icon without a corresponding “search” label would need alt text.

search bar with search icon and no label

FAQ

Here are some frequently asked questions:

How do I include alt text, or mark an image as decorative, in Site Builder?: When you upload an image to Site Builder and mark it “public image,” you will have two options: write your alt text in the Alternative Text field, or click the “Decorative” checkbox.
How do I write alt text for headshots?: It is fine simply provide the person's name. Never describe what a person looks like in a photograph in the alt text unless they provide the description.
How do I write alt text for logos?: If the logo is a link or part of a group of logos, do not mention it is a logo; in this context, the logo means the name of its organization. Simply provide the text equivalent: "Princeton University," “Instagram.”
If the logo is an unlinked decoration, it is OK to mention the format. For example, in the header of a document “Princeton University logo” might make sense. For large documents where the logo appears on multiple pages, include the alt text the first time, and mark every subsequent logo as decorative.
Do not visually describe the logo itself ("A black and orange shield") unless the context is about the visual characteristics of the logo (For example, an article detailing how Princeton's shield has evolved over time).
What about data visualizations that require alt text that is longer than one or two sentences?: If the visual is too complex for one or two sentences of alt text, it is likely too complex for many users to understand visually, not just screen reader users.
First, determine whether or not a simpler visual is better suited for the content.
If a simpler version is not possible, the more detailed description of the visual should be included in the content of the page so it is accessible to everyone.
For complex charts, consider providing an accessible, alternative table view or download so users can explore the data by row and column.
Once you have provided a detailed description in the content, you do not need to repeat it in the alt text. Simply refer the user to the detailed description of the visual: “Chart showing Princeton's endowment performance for the past 30 years; details follow in caption.”
What about photographs used for aesthetic purposes, or to create a mood, without any apparent meaningful information?: These types of visuals still need some alt text to explain their presence, though it can be quite short. For example, if you have a banner image of trees in autumn you picked to convey an autumn-like mood, you could simply state “Trees in autumn” without mentioning details about the the setting, the people under the trees, etc.

Testing for Accessibility

It is helpful to review alt text in context on a page, to see if the alt works together with the text and captions to tell a complete story, without repetition and redundancy. It may help to read out loud, pretending the page is an audio book.

Several tools will draw the alts on the images in context.

Princeton staff maintain two, so tell us if you find bugs:

InstaAlt does this and only this.
The Editoria11y plugin built in to the University's Drupal and WordPress sites has a button on its toolbar to display alts on images.

Our automated testing tools will also highlight many common mistakes.

For more details consult: