Home / Best Practices / Images: ALT Text

Images: Alternative Text

Basics

  1. All images must have an ALT attribute.
  2. Equivalent alternate text for images can be located in the content itself, a caption or an ALT attribute.
  3. For linked images, the ALT attribute should describe both the content of the image and the function of the link.
  4. For decorative images, the ALT attribute should be left blank.
  5. When CSS background images convey information, provide alternate text.
  6. Images that contain graphic text should be avoided.

In depth

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 contentEquivalent 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 contentEquivalent content

ASU football fans   

ALT tag: ASU football fans.

 Football stands filled with ASU students, yelling and giving 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 contentEquivalent 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.

ImageALT text
Hayden 50 - Celebrating our past, building our futureHayden 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.

ImageFunctionALT text
ASU homepage  The function of this image as a link to https://www.asu.edu is more important than its contentASU homepage
NextThe 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 tabThe function of this image to inform users that a link opens in a new tab or window is more important than what it looks likeOpens 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 determine if an image is decorative, ask yourself what information would be lost without the image.  If none, it's decorative.  For instance, all of the images below are decorative:

ImageExplanation

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.

For more on writing effective ALT text, see the W3C's Images Tutorial.

ALT text using WYSIWYG toolbars

When adding images to a page using a WYSIWYG toolbar, always put something in the ALT field (input a single space for decorative images).

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 

CSS background images

CSS background images are a technique to separate style (decorative images) from meaningful content on a page. Although not recommended, it's occasionally necessary to use the CSS background technique to add meaningful images that convey information, such as a logo or button with text. In these cases use a CSS replacement technique to ensure the information conveyed by the image is accessible within the content.

How to test

Relevant W3C WAI documents