Skip to main content

Accessible Images: Alternative Text

All images must have alternative text that describes them. Screen readers and other machines (such as search engines) can't read images and rely on text alternatives. Users with low vision who need to enlarge the screen depend on alternate text, which often scales better than images. Also, some users with cognitive impairments find text easier to interpret than images. Supplying concise and equivalent alternate text enriches your webpage for all users and types of devices.

Images should be described in one of three ways:

  • In the surrounding content
  • In a caption
  • In the ALT tag

The exception are complex images (such as infographics, maps graphs, and charts), which can be described using the longdesc attribute or in the content.

All inline images must have an ALT tag (also called an ALT attribute):

  • ALT tags should be brief (less than 125 characters).
  • For decorative images and complex images described elsewhere, the ALT tag is left empty, or NULL: <img scr="images/bullet.gif" alt=" "/>

Describing images: what is good ALT text?

Effective ALT tags can be difficult to write. As a rule of thumb, ALT text should describe the content and function of the image, while taking the context into account.

Content images

Knowing how much description to give about an image can be difficult. Ask yourself what the image is trying to convey, and explain in as few words as possible, without sacrificing the meaning or intent of the image.

Inequivalent content Equivalent content

Seat belts are comprised of a buckle and a tongue.

Seat belt

ALT tag: "Seat belt"

Seat belts are comprised of a buckle and a tongue.

Insert the seat belt tongue into the buckle

ALT tag: "Insert the seat belt tongue into the buckle"

 

Inequivalent content Equivalent content

ASU fans

ALT tag: ASU football fans.

Football stands filled with ASU students, yelling and giving the Fork-em-Devils hand sign

ALT tag: Football stands filled with ASU students,
yelling and giving the Fork-em-Devils hand sign.

 

Inequivalent content Equivalent content

A student

ALT tag: A student

Undergraduate student performing an experiment in the chemistry lab

ALT tag: Undergraduate student performing an
experiment in the chemistry lab

Graphic text

When possible, try not to use images that contain text. Graphic text doesn't scale well for low vision users who must increase the page size, and search engines, screen readers and other assistive devices cannot read text in images. However, sometimes using graphic text is unavoidable. In these cases your ALT text usually should be the same as the text in the image.

Image ALT text
Hayden 50 - Celebrating our past, building our future Hayden 50 - Celebrating our past, building our future
Best Colleges U.S. News Most Innovative 2017 Best Colleges U.S. News Most Innovative 2017

Functional images

Some images not only supply content, but perform a function as well. In these cases it's usually more important to describe the function of the image than the content.

Image Function ALT text
Image removed. The function of this image as a link to https://www.asu.edu is more important than its content ASU homepage
Next The function of this image as a link to the next page of content is more important than what it looks like Next
Opens in a new window or tab The function of this image to inform users that a link opens in a new tab or window is more important than what it looks like Opens in a new window or tab

Context

Daniel Boone's home in Defiance, MissouriWhen writing ALT text, context is of the utmost importance. For instance, consider this photo of Daniel Boone's home. If the surrounding content is an article about famous houses around the nation, it may be enough to identify the house: "Daniel Boone House in Defiance, Missouri." If the article is about 19th century building techniques, it might be more appropriate to say: "The Georgian style Daniel Boone House in Missouri was built in 1800 from hand-hewn limestone blocks." Again, if the content is a club newsletter, the event may be of more importance: "Club members visiting the Daniel Boone House." Let context dictate what you include in ALT text.

Decorative images

Sometimes an image is used for visual effect only. Decorative images convey no information and/or are used strictly to enhance the visual appearance of a page. Decorative images still need an ALT tag, but it is left empty (or you can input a single space). Screen readers will recognize this null ALT as a decorative image and skip over it.

You should never remove or leave off ALT tags, even for decorative images. Screen readers don't know how to interpret an image if it has no ALT tag, and they often read out the full URL path to the image in an attempt to supply the user with some information.

To add an empty (or NULL) alt tag for a decorative image: In the ASU Webspark 2.0 - Drupal 8/9 distribution, add two quotation marks inside the WYSIWYG image alt text field. This will be displayed as alt=" ".

To determine if an image is decorative, ask yourself what information would be lost without the image. If none, its decorative. For instance, all of the images below are decorative:

Image Explanation

Call us at 480-965-0000.

The stock photo of a woman smiling conveys no information and has no function. It is strictly eye candy.

Text above.

Text below.

The horizontal line separates content visually. It conveys no new information and has no function or meaning beyond appearance.
Don't forget to watch our calendar of events! The image is used to visually highlight a block of text and has no real meaning beyond appearance.

ALT text using WYSIWYG toolbars

When adding images to a page using a WYSIWYG toolbar, always put something in the ALT field. In some CMSs, you can input a single space in the ALT text field when uploading a decorative images. In the ASU Webspark 2.0 - Drupal 8/9 distribution, add two quotation marks inside the WYSIWYG image alt text field. This will be displayed as alt=" ".

Do not use the TITLE field unless absolutely necessary. The TITLE tag is not recognized by screen readers. Also, it displays as a tooltip and can confuse and get in the user's way.

The ALT field for images in CMSs like WordPress and Drupal