Accessible images: alternative text guidelines

• All images must have an ALT tag, and meaningful images must have alternative text that describes them.
  • Alternative text can be located in the ALT tag, a caption or the surrounding text.
• Describing images: write effective alternative text:
  • Meaningful images
    • Context matters
    • Images with graphic text
  • Functional images
    • Linked images
  • Decorative images
• Using rich-text toolbars to add alternative text

 

On digital content, all images must have alternative text that describes them, except for decorative images, which should have an empty ALT tag.

Supplying concise and equivalent alternate text enriches your content, sites and apps for all users and types of devices. For instance:

• 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 graphic text.
• Some users with cognitive impairments find text easier to interpret than images.

Ways to provide alternative text

All images must have an ALT tag (also called an ALT attribute). The most common way to add alternative text is in an ALT tag. When you upload an image to a website, Canvas, or other digital software or platform, you are usually provided with a field to add alternative text of the image to an ALT tag. However, you can add alternative text in two other ways:

1. In the ALT tag (the most common method) (When uploading an image, include a description In the alternative text field.)

2. In the surrounding content were having a good time, when a man in a pink tutu appeared and

3. In a caption Fig. 23. Man in a tutu

For images described in captions or the surrounding content, leave the ALT tag empty, similar to decorative images. (The underlying code would look like: <img scr="images/bullet.gif" ALT=" "/>)

The exception is complex images like infographics, maps, graphs, and charts, which use both the ALT tag and a long description attribute, which is covered in the Accessible Complex Image Guidelines.

Describing images: how to write effective alternative text

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

Currently, there's no official limit to the characters or words allowed in alternative text. However, try to be as succinct as possible while still conveying the essential information. (For instance, don't say "Image of Hayden Library" or "ASU logo" because screen readers already provide that information. Simply write: "Hayden Library" or "ASU").

Complex images with a lot of meaningful text, such as infographics, maps, graphs, and charts, use both the ALT tag and a long description attribute, which is covered in the Accessible Complex Image Guidelines.

Use the ASU Online Image Description Generator to easily generate alt text and long descriptions. 

Meaningful images

Meaningful images are those that convey essential or useful information. They should be described with as few words as possible, without sacrificing the meaning or intent of the image.

Paring down an image description to only the most essential information can be difficult. Ask yourself, "What key points is the image trying to convey?" A trick is to imagine yourself explaining the image over the phone to an impatient friend.

Graphic text

Try not to use images that contain text. Graphic text doesn't scale well for users with low vision who must increase the page size. Also, search engines, screen readers and other assistive devices cannot read image text.

If using graphic text is unavoidable, your alternative text should be the same as the text in the image.

Context matters

When writing alternative 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 alternative text.

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 or appearance.

Linked images

One of the most common functional images is a linked image. When an image functions as a link, the alternative text should be the destination of the link. (For code examples, see linked images and linked background images.)

Decorative images

An image that's used only for visual effect is a decorative image. Decorative images convey no meaningful information or are used strictly to enhance the visual appearance of a page.

All images must have an ALT tag (aka ALT attribute). However, for decorative images, the ALT tag should be empty (a single empty space works, too). Screen readers and other technologies will recognize an empty ALT tag, identify the image as decorative and skip over it.

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

 

Using rich-text toolbars to add alternative text

Rich-text toolbars (also called WYSIWYG or formatting toolbars), like this one from Canvas, make uploading images much easier.

Meaningful images: When uploading meaningful images to a page using a rich-text toolbar, always add an equivalent text description in the ALT field.

Decorative images: If a checkbox is available to indicate the image is decorative, check it and leave the ALT field blank. (If there isn't a way to indicate the image is decorative, you can input a single space in the ALT text field.)

"Title" field: If there is a title field, don't use it (the exception is if there is no ALT field). The TITLE tag displays as a tooltip, which obscures content and can confuse users.

 

• Add alternative text to images in Canvas
• Add alternative text to existing Canvas images

Images are a powerful way to help students emotionally connect to your content, which can aid in information retention and recall.

But too many images on the page can have the opposite effect. Students may be overwhelmed by too many images on the screen, and that “busyness” can cause cognitive overload.

As a rule of thumb, limit a page (or a section of a large document) to three or less images that really illustrate or underscore the point you're making. Try to remove images that are more decorative (nonessential).

Add alt text to images in Canvas

The Upload Image dialog in Canvas gives you two options--add alternative text or mark the image as decorative.

• Meaningful image: If the image is meaningful (e.g., if it illustrates a meeting location on Hayden lawn), supply succinct yet descriptive text in the Alt Text field.
• Decorative image: If the image is decorative, leave the Alt Text field empty, and check Decorative image.

For instructions on how to upload images from a variety of sources, please see How do I upload and embed an image in the Rich Content Editor as an instructor?

Add alternative text to existing Canvas images

There are two ways to add alternative text to images already uploaded to a Canvas page.

1. Edit the page, and select the image. Select the Image Options tooltip that appears. An Image Options pane will appear on the right. Add descriptive alternative text to the Alt Text field or check Decorative Image.
   
2. If there are any accessibility issues on the page, the Canvas Accessibility Checker icon (in the lower right of the edit pane) will be flagged with the number of issues. Click the icon.
   
   
   Clicking the Accessibility Checker icon causes the Accessibility Checker pane to appear on the right. Add descriptive alternative text to the Alt Text field or check Decorative Image.
   

 

• Alternative text for linked images
• Alternative text for linked background images
• Alternative text for image buttons
• Alternative text for  SVGs
• Hiding decorative images from screen readers
   

Alternative text for linked images

The alternative text for linked images should be the destination of the link. The image's function as a link is more important than its content or appearance. For example, logos are often used as a home link:

HTML:
<a href="/"><img src="logo.png" alt="Home" /></a>

Alternative text for linked background images

Generally, background images that are added to the page with CSS are decorative and don't require alternative text. However, linked background images and icons are functional images and must have text alternatives. There are a number of ways to add alternative text to linked background images.

A text alternative can be descriptive text added directly on the page, then hidden from all but assistive technologies with a CSS hide method. For example:

Home

HTML:
<a href="/" class="bg-img"><span class="visually-hidden">Home</span></a>

CSS:
.bg-img {
  background-image: url('/images/logo.png');
  width: 70px;
  height: 64px;
  display: block; /* display:inline-block also works */
}

.visually-hidden {
  position: absolute;
  overflow: hidden;
  background-color: transparent;
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  text-decoration: none;
}

ARIA-label

You can also add alternative text to a linked background image with an ARIA-label attribute. The ARIA-label will be read by screen readers but be hidden from the visual display. You will also need to give the <span> an img role so that screen readers will announce the element as an image. For example:

<a href="/"><span class="bg-image" role="img" aria-label="Home"> </span></a>

Keep in mind that assistive technologies think of images as black boxes and will overlook all descendants of a role="img". Anything between the <span></span> tags will be ignored.
 

Alternative text for image buttons

Images used in place of buttons need alternative text:

<input type="image" src="search.png" alt="Search">
<input type="image" src="submit.png" aria-label="Submit">
 

Alternative text for SVGs

The following is the recommended method for supplying an SVG with a text alternative:

1. Add a visually-hidden <span>Image description</span> as a sibling element to the <svg> (see this method for visually hiding elements) AND
2. Add an aria-hidden=“true” to the <svg> element itself (to prevent screen readers from announcing other text that may be embedded within the SVG).

You can also add a <title>Short title for the SVG</title> inside the <SVG>. However, this will result in a visible tooltip on hover. In addition, the <title> must be the first child of the <SVG> parent.

Read more on accessible SVGs.

Hide decorative images from screen readers only

Decorative images can be hidden from screen readers in multiple ways.

• A null alt attribute: All images must have an ALT attribute, but leaving the value empty (NULL) conveys to screen readers that the images are decorative and safe to ignore. This is the most common way to hide decorative images from assistive technologies:
   <img src="jump.png" ALT=" ">
   
• ARIA role="presentation": You can use the role="presentation" attribute to hide elements from screen readers although this is not as widely supported as using a null alt attribute:
  <img src="jump.png" role="presentation">
   
• CSS background image: Images added to an element via the CSS are not available to screen readers or other assistive technologies, which don't make use of CSS. (However, meaningful CSS background images must have alternative text.)