Images and Alt Text

Images are a type of embedded (non-downloadable) media used on webpages, documents and various forms electronic communication.

This page provides an overview of what alt text is and how it helps make your Webpages, documents (Microsoft and PDF) and more accessible.

How to write alt text

Since images are visual media, they require a text alternative (alt text) — a short description that can be read by assistive technology to relay the meaning of the image.

Alt text is helpful for people using screen readers and for people using a slow internet connection. Below are helpful tips for writing good alt text. 

• Avoid using phrases like "image of" or "picture of" since screen readers already state "graphic" for images.
• Be short. Alt text should be no longer than one or two sentences.
• Don't repeat descriptive text surrounding the image.

For alt text, context matters

When writing alt text, it is important to consider the context of the image. As WebAIM notes in its documentation, there are several contexts that can impact the alt text needs for images.

What information is this image conveying within a webpage, web application, document or social media post? 

Your alt text should describe what is going on within the context of the page. For example, the first photo included on this page is used on the Wellness website.

Good description: A fitness group of five people stretch their arms together while smiling and laughing on the lawn of a park.

Avoid images of text

In general, it is best to avoid using images of text because assistive technologies are unable to read information. 

This includes screenshots of text, photos of text, scanned documents or images of promotional flyers.

There is at least one exception to this rule: logos. 

Alt text: Macon and Joan Brock Virginia Health Sciences at Old Dominion University logo with the Crown of Asclepius.

Complex images are difficult (not impossible)

Complex images can include, but not limited to, graphs and charts.

Because there is so much information on these images, a short description is not enough to capture its full meaning.

Complex images require two elements: alt text and long description. The alt text describes the big takeaway of the information and references the long description that further explains the image. 

Long descriptions can either be directly below the image on a webpage or on another page.

The example below is from a story in EVMS Magazine Issue 14.1, "EVMS project targets diabetes in Western Tidewater." It featured three charts or graphics to highlight the prevalence of diabetes in the Western Tidewater region.

To make these images accessible, a handful of elements were put in place.

1. Alt text describing the purpose of the chart
2. A link navigating to a separate page with the full description
3. Full description that included accessible tables for the chart information

Decorative images

Images that are not intended to convey meaning or important information to the user generally don't require descriptive alt text.

Examples of decorative images, according to the World Wide Web Consortium (W3C), include:

• Image that's part of the design
• Image with adjacent alt text
• Image used as "eye-candy"

In these situations, images need to either be marked as decorative (like in Adobe Acrobat or Microsoft Office) or have an empty alt="" value on a webpage. 

WCAG Success Criteria

• 1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. (Level A)
• 1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)