Accessible images: alternative text guidelines

For everyone

 

At ASU, all images must have alternative text that describes them (unless they are decorative, in which case they must have an empty [or NULL] ALT tag).

Supplying concise and equivalent alternate text enriches your content, sites and apps for all users and types of devices, such as:

  • 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

Alternative text can be added in one of three places on the page:

1. In the ALT tag
(the most common method)
Example image of a man in a pink tutu
(In description field when you
upload the image: Man in tutu)

2. In the surrounding content

Example image of a man in a pink tutu
were having a good time, when
a man in a pink tutu appeared and

3. In a caption

Example image of a man in a pink tutu
Fig. 23. Man in a pink tut

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

Regardless of where the image is described, all images must have an ALT tag (also called an ALT attribute).  The ALT tag contains the alternative text for an image.  The exception is complex images like infographics, maps, graphs, and charts, which use both the ALT tag and a long description and are covered in the Accessible Complex Image Guidelines.

Describing images: 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.

There's no need to identify the element as an image in the ALT tag (e.g., "Image of an apple" or "ASU logo"). Screen readers already announce the element type as a graphic (VoiceOver) or an image (JAWS).

Content images

Content images are those that convey meaningful information or content. Knowing how much description to give about an image can be difficult. Ask yourself what key points 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"

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.

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

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, 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 alternative text usually should be the same as the text in the image.

Image with graphic text Equivalent alternative 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 2019

Context matters

Daniel Boone's home in Defiance, MissouriWhen 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.

Image Function Alternative text
Home The function of this image as a link to https://www.asu.edu is more important than its content or appearance. 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

Decorative images

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.

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

Decorative images must still have an ALT tag, but it is left empty (or you can input a single space). Screen readers and other technologies will recognize the empty ALT tag, identify the image as decorative and skip over it.

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:

Decorative image Reason

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.

 

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.

Rich-text toolbar from Canvas

Canvas image upload pane with alt text field and decorative image checkbox options.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.

The ALT field for images in CMSs like WordPress and Drupal

TOP

For instructors

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 CanvasUpload image screen in Canvas showing alternative text field and decorative image checkbox options.

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.
    Canvas image options dialog
  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.
    Canvas Accessibility Checker icon on the edit pane

    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.
    Accessibility Checker pane in Canvas

TOP

For developers

Alternative text for linked background images

Linked background images and icons that are added to the page with CSS must have text alternatives, which will also act as the link text. There are a number of ways to add alternative text to linked background images.

You can hide the text alternative from all but assistive technologies with a CSS method--

Home

HTML:
<a href="/"><i class="fa fa-search"><span class="meaningful-bg-img">Home</span></i></a>

CSS

.meaningful-bg-img {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
text-decoration: none;
background-image: url('/sites/default/files/inline-images/logo_1.png');
width: 110px;
height: 100px;
display: block; /* display:inline-block also works */
}

You could also add alternative text for screen readers only with an ARIA-label attribute. The ARIA-label text will be read by screen readers but be hidden from the visual display. For example:
<a href="/"><i class="fa fa-search" aria-label="Home"></i></a>

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.)

TOP

 

Was this helpful?

 
 

Slack

Accessibility Connections