Skip to Main Content

Creating Accessible Learning: Alt Text

Why It Matters

Images are a great way to add meaning to almost any content. But what good would those images be if you couldn’t perceive them at all?

Enter alt text! Alt text, short for alternate text, is a text description of an image. It creates equity by allowing assistive technology users to “see” an image in a way equivalent to looking at the image.

Alt text also benefits people of all abilities. For example, alt text will appear if a web page won't load images or if a person turns off images to conserve internet bandwidth. Alt text also helps improve a webpage's SEO.

Accessibility Guideline: Alt Text

Any non-text content has a text alternative that serves an equivalent purpose. (WCAG 1.1.1; A)

Try to avoid using images of text unless it's essential to the information being conveyed or is purely for decoration. (WCAG 1.4.9; AAA)

Types of Images Needing Alt Text

One factor that will help you in writing alt text is identifying what type of image you’re using: Informative, functional, or decorative.

  • Informative images are used to convey important information and need descriptive alt text.
  • Decorative images add decoration, don’t convey any important information, and need null alt text.
  • Functional images carry out a function, such as an icon that performs an action when clicked, and need alt text describing what the image does when interacted with.

Adding Alt Text

Add alt text when 2 conditions are met:

  1. The image conveys information to the user, and
  2. The image is not just decorative.

If the image is purely decorative, see Alt Text for Decorative Images.

Alt text is added to images by you, the content designer. You can find this option in most design programs, including Microsoft PowerPoint, Word, Excel, and Outlook. Typically, it’s found within the image format options.

In this example from Microsoft Word 365, alt text was added by selecting the image and going to the Alt Text picture formatting option in the toolbar. Alternatively, you can right click on the image and select View Alt Text.

Example image and alt text in Microsoft Word 365

Alt Text for Informative Images

The crux of good alt text is this: It communicates the goal or purpose of the image within its context. That’s it!

Good alt text should also be:

  • Concise. A short phrase or 1 sentence (2–3 maximum). For longer alt text, see Complex Images & Alt Text.
  • Prioritized. Try to include the most important info upfront.

Avoid:

  • Unnecessary extra info, e.g. “picture of” (unless it’s important context!).
  • Using automatic alt text generators.
  • Simply describing the image apart from its context.

Still not sure? Think about how you'd verbally describe the purpose or goal of the image, within its context, to someone who couldn't see it. What things would you include?

Rule of Thumb: Always base the alt text description on the image's context and purpose of use.

Here’s a great alt text example from our sled dog friends at ATAO Kennel on Twitter:

ATAO Kennel image from Twitter

Image alt text: A hand in the foreground holds several plain cheerios in front of a white sled dog and a black, white, and yellow cattle dog, who look upwards with interest

The alt text is succinct, prioritizes important information up front, and describes the purpose of the photo as well as what’s in it.

Complex Images & Alt Text

Sometimes informative images are complex and communicate more info than can be briefly summarized, such as a complicated figure, graph, or map.

In these cases, a two-part alt text is needed:

  1. A longer description of the image located elsewhere, and
  2. Alt text that briefly identifies the image and, if applicable, tells the user where the long description can be found.

Where you place the longer description will vary depending on the project. Some examples of long description locations include:

  • An image caption
  • Appendix
  • Notes section
  • Link to a webpage
  • Footnote
  • Recorded soundbite

Note: Not all complex images require two-part alt text. An image can be complex, but if the goal of what it communicates can be summarized in a brief alt text, then do that!

In this example, the flowchart decision tree contains important steps that, within its current use context, can’t be briefly summarized. The attached alt text tells users that it’s a decision tree outlining project design considerations and that its full text is found on slide 11, Appendix 1.

A flowchart decision tree image with associated alt text.

An Appendix including the full text of the decision tree image.

Alt Text for Decorative Images

Sometimes images have no purpose other than decoration. In those cases, you need a special kind of alt text, typically referred to as “null” or “empty” alt text. Entering this tells screen readers (a type of assistive technology) to ignore the image.

The example PowerPoint slide includes a decorative image of the Library. The image doesn’t convey any important information about the content of the slide, so it is considered decorative and will have a null alt text.

PowerPoint slide entitled Places to visit at Edmon Low Library

In some Microsoft Office apps 2019 and later (including Word, Excel, and PowerPoint) open the alt text formatting option for the image and check the box labeled “Mark as decorative.”

While editing your libguide, click on an image to open Image Properties. Add null alt text simply by leaving the Alt Text box blank, or by adding the null alt text attribute of two quotation marks with no spaces: ""

With web-based images, enter null alt text in the alt text attribute using two quotation marks with no spaces. Here’s an example of null alt text from a website image:

<src="https://picturefile.jpg" img alt="" />

Alt Text for Functional Images

Functional images are images that also carry out a function, such as an icon that performs an action when clicked.

Functional images require alt text that simply describes what the image does when the user interacts with it. There’s no need to describe what the image looks like unless it’s necessary for describing its function.

In this example from a Microsoft Outlook email signature, the highlighted icon is an Instagram logo that, when clicked, leads to the Library’s Instagram account. The alt text concisely states, “OKState Library Instagram.” Notice how it doesn’t include a description of the icon itself or unnecessary extra info, such as “link to.”

Instagram icon example

Resources