WebAIM - Web Accessibility In Mind

Alternative Text

Introduction

Adding alternative text for images is the first principle of web accessibility. It is also one of the most difficult to properly implement. The web is replete with images that have missing, incorrect, or poor alternative text. Like many things in web accessibility, determining appropriate, equivalent, alternative text is often a matter of personal interpretation. Through the use of examples, this article will present our experienced interpretation of appropriate use of alternative text.

Important

Also see our article on images for additional information about image accessibility.

Alternative Text Basics

Alternative text provides a textual alternative to non-text content in web pages. We will be discussing alternative text for images only, though the principles can be applied to media, applets, or other non-text web content.

Alternative text serves several functions:

  • It is read by screen readers in place of images allowing the content and function of the image to be accessible to those with visual or certain cognitive disabilities.
  • It is displayed in place of the image in browsers if the image file is not loaded or when the user has chosen not to view images.
  • It provides a semantic meaning and description to images which can be read by search engines or be used to later determine the content of the image from page context alone.

The key principle is that computers and screen readers cannot analyze an image and determine what the image presents. As developers, text must be provided to the user which presents the CONTENT and FUNCTION of the images within your web content.

Alternative text can be presented in two ways:

  • Within the alt attribute of the img element.
  • Within the context or surroundings of the image itself.

This means that the alt attribute (sometimes called the alt tag, though technically this is incorrect) is not the only mechanism for providing the content and function of the image. This information can also be provided in text adjacent to the image or within the page containing the image. In some cases where the equivalent cannot be presented succinctly, a link to a separate page that contains a longer description of the image content can be provided.

Important

The term alternative text, as used in this article, refers to the text equivalent for an image, regardless of where that text resides. It does not refer solely to the alt attribute of the image tag. Alt attribute will be used when referring to the attribute itself, which often will, but does not exclusively, contain the alternative text.

Every image must have an alt attribute. This is a requirement of HTML standard (with perhaps a few exceptions in HTML5). Images without an alt attribute are likely inaccessible. In some cases, images may be given an empty alt attribute value (e.g., alt="", sometimes call "null" alternative text).

Context is Everything

When determining appropriate alternative text for images, context is everything. The alternative text for one image may be vastly different based upon the context and surroundings of the image itself. Take, for instance, the following image of George Washington:

example image

The alternative text for this image might change immensely based upon context, as demonstrated below.

Note

To best present these principles of alternative text, most images within this article have been given alternative text of "example image". However, the content of the images is typically presented within page context.

Example 1

example image

Because of his role as the Commander in Chief of American forces in the Revolutionary War, and, later, the first President of the United States, George Washington is often called the "Father of his Country".

What would be appropriate alternative text for the image in Example 1?

  1. "Image of George Washington"
  2. "George Washington, the first president of the United States"
  3. An empty alt attribute (alt="") will suffice.
  4. "George Washington"

The first step when determining appropriate alternative text for an image is to decide if the image presents content and if the image has a function. In most cases, an image will only have a function if it is contained within a link (or is an image map hotspot or a button). Determining if the image presents content and what that content is can be much more difficult. If the content that the image conveys is presented within text in the surrounding context of the image, then an empty alt attribute may suffice. In the example above, the content being presented by the image is to inform the user that this is George Washington. The image has no function because it is not a link and is not clickable.

Let's look at some important rules regarding the alt attribute.

Important

The alt attribute should typically:

  • Be accurate and equivalent in presenting the same content and function of the image.
  • Be succinct. This means the correct content (if there is content) and function (if there is a function) of the image should be presented as succinctly as is appropriate. Typically no more than a few words are necessary, though rarely a short sentence or two may be appropriate.
  • NOT be redundant or provide the same information as text within the context of the image.
  • NOT use the phrases "image of ..." or "graphic of ..." to describe the image. It is usually apparent to the user that it is an image. And if the image is conveying content, it is typically not necessary that the user know that it is an image that is conveying the content, as opposed to text. If the fact that an image is a photograph or illustration, etc. is important content, it may be useful to include this in alternative text.

Based upon these rules, Option D (alt="George Washington") would likely be the best alternative text in this instance. Option A unnecessarily describes the image as an image. Option B provides extra information that is not presented directly in the image and it is also redundant with content presented later within the text. Option C (no alt attribute) is not appropriate because the image conveys content that is not directly presented in the surrounding context. Even though the surrounding text does indicate that it's referring to George Washington, visual users can tell this directly from the content of the image - so if the image conveys content, it should be given alternative text.

Example 2


George Washington

Because of his role as the Commander in Chief of American forces in the Revolutionary War, and, later, the first President of the United States, George Washington is often called the "Father of his Country".

What would be the appropriate alt attribute for the image in Example 2?

  1. "George Washington"
  2. An empty alt attribute (alt="") will suffice.
  3. "Image"
  4. The image does not need an alt attribute.

In this case, the content of the image is presented within the surrounding content, so Option B (alt="") is the best choice. Option A would be redundant. Option C provides extraneous and useless information. Option D (no alt attribute) is never the right choice - every image must have an alt attribute.

Example 3

example image
George Washington

What would be the appropriate alt attribute for the image in Example 3?

  1. An empty alt attribute (alt="") will suffice.
  2. "Wikipedia entry for George Washington"
  3. "Read More"
  4. "George Washington"

In this case, the image is also a link, so it has a function. Whenever an image is within a link, the function of the image must be presented in alternative text that is also within the link. In this case, there is no adjacent text within the link that describes the function, so it must be presented within the alt attribute. As a result, option D ("George Washington") is likely the best choice. While the words "George Washington" in the alt attribute are redundant with the text that follows, in this case the redundancy is necessary to adequately describe the function.

Option A is not adequate. An image that is the only thing inside a link must never have a missing or empty alt attribute. This is because the screen reader must read SOMETHING to identify the link. Screen readers might read the image file name or the URL of the page being linked to, which may or may not be useful. And remember, that the link may be read out of context of the surrounding text, such as when the user is navigating by links within the page. Option B provides content that is not available through the image alone (i.e., you can't tell the image links to Wikipedia simply by looking at it). Option C does not provide an adequate description of the function, especially out of context.

This entire example could also be make much better by placing both the image and the text caption within one link:

example image
George Washington

In this case, both the content and function of the link and image are presented within the link, so the image can be given alt="" to avoid any redundancy.

When possible, avoid using "link to..." or "click this image to..." or similar wording in the alt attribute. Links are identified as links by screen readers and should be visually apparent to sighted users.

Example 4

example image

In this painting, the artist Emanuel Leutze used light, color, form, perspective, proportion, and motion to create the composition.

What would be the most appropriate alt attribute for the image in Example 4?

  1. "George Washington"
  2. "Painting of George Washington"
  3. "Painting of George Washington crossing the Delaware River"
  4. "A classic painting demonstrating the use of light and color to create composition."
  5. "Painting of George Washington crossing the Delaware River. Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle."

As before, we should determine if the content of the image is presented in the surrounding context. In this case, it is not (at least not entirely). The image is not within a link, so there is no function. But this image provides a much more difficult examination, and the best answer may not be adequately determined by the limited context we've been given. Regardless, let's look at the possible options.

Option A ("George Washington") probably does not adequately describe the content of the image. The fact that it is George Washington in the painting may not necessarily be relevant in this context. Option B ("Painting of George Washington") may be adequate, but does not provide much additional content. However, it may be appropriate to describe the image as a painting, as opposed to a photograph or other image type. Option C provides more information that may help the user identify the content itself. Remember that alternative text is not just for the blind. Many sighted users would be able to identify the specific painting in question given this description, whereas "George Washington" alone would not be descriptive enough. Option D might be appropriate if the purpose of the image is to present a specific art technique and the content of the image itself is not important. Option E may also be an appropriate alternative if a detailed examination of the painting is in order, but is too long and verbose to be of much use - such text would be better served as text within the web page.

As you can see, there is no one right answer here. The best alternative text will depend on the context and intended content of the image.

Functional Images

Images are often used not only to provide content, but to provide important functions, such as navigation.

Example 5

example image

The "Products" image is part of a navigation bar.

What would be the most appropriate alt attribute for the "Products" navigation image in Example 5?

  1. "Products"
  2. "Link to Products"
  3. The image doesn't convey content, so (alt="") will suffice.

In this case, option A is the best answer. It provides both the content and the function of the image. The image displays the word "Products" and also is a link to the products page on the site. The image will be identified as being within a link, so "Link to" is not necessary, making option B a poor choice. Because the image is the only object within a link, alt="" is never appropriate. When an image contains only text, the text being displayed can usually be used as alternative text.

Example 6

Continue to the next page to read about George Washington's presidency.

example image

What would be the most appropriate alt attribute for the blue arrow image in Example 6?

  1. "next"
  2. "next page"
  3. "George Washington's Presidency"
  4. "Continue to George Washington's Presidency"

Again, this is an example that does not have a clear cut best answer. In fact, any of the options could probably be appropriate in this example. Option A and B will probably be sufficient in most cases, as long as it is clear to the user that there are multiple pages within the article. Option C presents very clearly the function of the link, but does not present that the link goes to the next page in a series. Option D may be the best solution as it presents the function of the link and conveys that it is part of a series of pages. As stated previously, determining the most appropriate alternative text is up to personal interpretation based upon the larger context of the image in question. A description of this image ("arrow") would not be appropriate. Perhaps a better solution would be to have the text "Next Page" or similar adjacent to the image and within the link, in which case, the image could be given alt="".

Example 7

Download the Employment Application example image

What would be the most appropriate alt attribute for the icon image in Example 7? Note that the icon is within the link.

  1. "Employment Application"
  2. "PDF File"
  3. "PDF icon"
  4. The content of the image is presented in context, so (alt="") is appropriate.

Notice that the image is within the link. If it were not within the link, then the alt text might be different. In this case, because the image provides additional information about the function of the link, it's important that it be within the link itself and is read with the link. This is vital because links are often accessed out of context from their surroundings.

Option A ("Employment Application") is redundant with surrounding text so it is not the best choice. Option B is the best choice (though perhaps even the more succinct "PDF" would be sufficient) - it clearly provides the content that is being presented by the image - that the link is to a PDF file. The function ("Download the Employment Application") is presented within the text of the link, so it does not need to be included again within the alt attribute. Option C ("PDF icon") really describes the image itself, so it is not most appropriate for this context. In another context, it may be important that the user know that this image is indeed an icon. Option D (empty alt text) would not provide the important information that the image presents.

It is important to note here that if the icon itself were the link to the document, the alternative text should provide a full alternative of the content and function of the link/image combination. Something like, "Download the employment application in PDF format". "PDF format" itself would not be sufficient, especially if there are multiple documents all with links of this nature. In that case, a screen reader user that is navigating through the links on a page would hear, "PDF format, PDF format, PDF format..." As a general rule, if the same image is used multiple times on a page to link to different locations, alternative text within the link should identify the differences.

Decorative Images

Decorative images do not present important content, are used for layout or non-informative purposes, and do not appear within a link. In almost all cases, spacer and decorative images should have empty alt attribute values (alt="").

Example 8

Content text here.

example image

Footer text here.

What would be the appropriate alt attribute for horizontal separator image in Example 8?

  1. "decorative line"
  2. "Beginning of footer"
  3. "separator"
  4. alt="" will suffice

Because the image does not convey content and is not within a link, option D is the most appropriate choice. A description of the image is not appropriate.

Note

When an image is used only for decorative purposes, it is often best to remove the image from the page content and add it as a background image using CSS. This will remove the need for alternative text at all and will remove the image from the semantic and structural flow of the page.

Example 9

example imageOur business promises the best service you will find on the planet. Our team is professionally trained to offer excellent customer service throughout the contract negotiation process.

Customer satisfaction is our top priority and is guaranteed, or your money back.

What would be the appropriate alt attribute for the image in Example 9?

  1. "handshake"
  2. "Businessmen shake hands to complete a contract"
  3. alt="" will suffice
  4. "We guarantee our professional services"

When analyzing this example, determine whether the image is presenting important content. In this case, I would argue that it does not. In current practice on the web, many such images are given descriptive alternative text even though the images don't seem to provide useful content. Option C (alt="") would probably be most appropriate in this case because the image does not convey relevant or important content. Options A and B are descriptive of the image, but do not convey an equivalent of what the image itself is conveying - which in this case is nothing, or perhaps only an emotive mood or feeling. In other words, the image is mostly decorative. Option D is clearly not correct, though it is worth noting that additional information is often injected into alt text to provide additional information or to provide additional keywords to search engines. Such practices are not an appropriate use of alternative text.

Note

In many cases you can ask the question "If I could not use this image, what would I put in its place?" to determine appropriate alternative text.

In the example above, it's not likely that the handshake photo would be replaced with text, thus alt="" is probably sufficient.

Advanced Images

There are some cases wherein determining alternative text can be more difficult. With all images, user testing and testing in screen readers and text-only browsers can help you determine the most appropriate method for implementing alternative text.

Form image buttons

Form image buttons must have an alt attribute that describes the function of the button. Image buttons are often used to provide a more visually appealing or a smaller version of the standard form buttons. The alternative text should describe what the button will do when selected, such as "Search", "Submit", "Register", "Place your order", etc. For instance, <input type="image" alt="Submit Search"> might be appropriate for an image button on a site search form.

Image maps

When using client-side image maps, the main image must have an alt attribute. The alt attribute should present any content that is presented with the image, but that is not presented with the image map hotspots. For instance, if you had a State of New York map that had hotspots for each region, the image may have an alt attribute value of "Regions of New York ". If the main image does not convey content, but is primarily just a container for the hot spots (e.g., a navigation bar), then alt="" is appropriate.

Each image map hotspot (area element) must have an equivalent alt attribute. Because the hot spots are clickable, each one must have alternative text that describes the function of that hotspot.

Because hotspots for server-side image maps cannot be given alternative text and because they are not keyboard accessible, they should not be used.

Image slices

Sometimes large images are sliced into multiple images on a web site for design purposes. When multiple image slices together convey content, then that content must be presented to the user. Typically, this is done by providing the alternative text in the alt attribute of the largest or most prominent image slice. It is not appropriate to repeat the alternative text unnecessarily, break the alternative text across multiple image alt attributes, or provide no alternative at all. If an image slice is within a link, alternative text describing the function of the link must be provided in the images alt attribute, in the alt attribute of another image within the same link, or within text within the same link. Each link must contain functional text that describes the links function.

Background images

It is not possible to add alternative text directly to CSS or other background images. Images that convey content should not generally be placed in page or element backgrounds.

Background images can, however, be used for decorative images, thus removing the image from the content flow of the page and removing the need for an empty alt attribute.

Sometimes image sprites or other background images are used to present content. While these should generally be avoided, if they are used, any content conveyed through the background image must be made accessible within the page markup. If the PDF icon image in Example 7 above were instead presented via a CSS background image, you could use a text replacement technique to present the content within the link:

<a href="application.pdf">Download the Employment Application<span class="pdficon"> (PDF)</span></a>

You would then use CSS to position the "(PDF)" text (the span class="pdficon" element) off-screen. See CSS in Action: Invisible Content Just for Screen Reader Users for more details. Sighted users would see the PDF background image and screen reader users would hear the off-screen "(PDF)" text.

Logos

It is common practice on the web to have the main site logo also link to the site home page. Because this is fairly standard practice, providing alternative text for the image, such as your company name (alt="Acme Company), will usually suffice. Identifying the logo as actually being a logo (alt="Acme Company Logo") is not typically necessary. The content and function is not "logo". Developers will often identify the image as being to the home page (alt="Acme Company home page), though if the image is consistently at the beginning of the page and the alternative text is appropriate, this additional information should not be needed.

Complex images

When an equivalent alternative for a complex image, such as a chart, graph, or map cannot be limited to a succinct alt attribute (perhaps a couple sentences in length), then the alternative should be provided elsewhere. The alternative content can often be presented within the context of the page, such as in an adjacent data table. The alternative text can also be provided by linking to a separate web page that provides the longer description of the complex image. The link can be adjacent to the image or the image itself could be linked to the long description page. The alternative text for the image should still describe the general content of the image.

<img src="sales.jpg" alt="Line chart of annual sales data"><br>
<a href="salesdata.htm">View sales data</a>

Note on longdesc

The longdesc attribute was intended to provide a reference to the long description page. The value of the longdesc attribute of the img element would contain the URL of the long description page, NOT the long description text itself. However, longdesc only works in some screen readers. Additionally, sighted users will not generally be aware that the description page is available. Also, the longdesc attribute is not part of HTML5. For these reasons, it is recommended that longdesc should not be relied upon to provide access to this long description page.

We have provided an overview of longdesc support (conducted September 2015).

Figure and figcaption

HTML5 introduces the figure element, optionally with a figcaption, which is self-contained and that is typically referenced as a single unit from the main flow of the document. A figure can be moved away from the main flow of the document without affecting the document's meaning.

figure and figcaption allow a semantic association between a figure and the figure's caption. The figcaption may provide a summary of or additional information about the figure and/or relate the figure back to the containing document. However, any image within a figure must still have an alt attribute value that presents the alternative text of the image - this should not be conveyed via the figcaption.

You can learn much more about figure and figcaption in How do you figure?

Conclusion

Despite being the biggest issue affecting web accessibility, there are still divergent and incorrect methods for implementing alternative text. By following the basic principles outlined here, web developers can make their web content more accessible to individuals with disabilities.

  • Adding alternative text to images is one of the easiest accessibility principles to learn and one of the hardest to master.
  • Alternative text may be provided in the alt attribute or in the surrounding context of the image.
  • Every image must have an alt attribute.
  • Alternative text should:
    • present the CONTENT and FUNCTION of the image.
    • be succinct.
  • Alternative text should not:
    • be redundant (be the same as adjacent or body text).
    • use the phrases "image of…" or "graphic of…".
  • Appropriate alternative text depends heavily on the image's context.
  • Alt text of a functional image (e.g., an image within a link) should describe the function as well as the content.
  • Decorative images still need an alt attribute, but it should be empty (alt="").

The accessibility of the web in general would increase dramatically if alternative text were provided and implemented correctly.