Alternative text

Provide alternative text for images

Individuals with visual disabilities or other cognitive impairments often cannot perceive information conveyed through images without help from a textual alternative. Image-based content that impedes accessibility includes charts, graphs, and other non-textual content.

Textual alternatives accompany images in order to make the content and purpose of images accessible. All alternatives need to be compatible with screen-reading software.

Alternative text for images on web pages is provided via the alt attribute on the <img> and <input type="image"> tags. Always include the alt attribute on these tags.

Guidelines

Alternative text used should follow these considerations:

  • If the image is necessary for understanding the page content, equivalent information should be communicated as text using the alt attribute.
  • If the image is decorative and not necessary for understanding the page content, the alt attribute should be empty (alt="").
    • Empty attributes tell screen-reading software to completely ignore the image.
  • If an image is used inside of a link or as a button, the alternative text should describe the link's destination or the button's purpose.

Benefits

These measures allow users with visual disabilities to understand information communicated using images, as well as the destinations or purpose of image links and controls.

These measures also instruct screen reading software to ignore decorative-only images, which makes navigating content faster and easier.

Examples

Informative image markup (<img> element)

See the alt attribute on line 10 below:

<!doctype html>
<html lang="en-US">
  <head>
    <title>Alternative Text for Images - Web Accessibility Top Ten - UITS</title>
  </head>
  <body>
    …
    <main role="main">
      …
      <img src="fig12.png" alt="Three school kids waiting at a bus stop.">
      …
    </main>
    …
  </body>
</html>

Decorative image markup (<img> element)

Images that are decorative or redundant should have an empty alt="" attribute. The empty attribute value instructs assistive technologies to ignore the image.

Note: if the alt attribute is missing and no other label exists, assistive technologies will read the src attribute, i.e. the filename. This might confuse the user, so double-check these attributes.

See the empty alt attribute on line 9 below:

<!doctype html>
<html lang="en-US">
  <head>
    <title>Alternative Text for Images - Web Accessibility Top Ten - UITS</title>
  </head>
  <body>
    …
    <main role="main">
      <img src="spacer.gif" alt="">
      …
    </main>
    …
  </body>
</html>

Image link markup (<img> element child of an element)

Images should not be the sole descriptors of links or buttons. Make sure all links and buttons defined with images also provide alternative text that effectively describes the function of the link or button.

See the alt attribute on line 10 below:

<!doctype html>
<html lang="en-US">
  <head>
    <title>Alternative Text for Images - Web Accessibility Top Ten - UITS</title>
  </head>
  <body>
    …
    <nav role="navigation">
      <a href="index.html">
        <img src="smlogo.png" alt="home page">
      </a>
  …
    </nav>
    …
  </body>
</html>

Image input markup (<input[type="image"]> element)

The input element of type="image" is the only other element that requires the "alt" attribute. Make sure the text provided acts as a descriptive label for the button.

See alt attribute on line 12 below:

<!doctype html>
<html lang="en-US">
<head>
  <title>Alternative Text for Images - Web Accessibility Top Ten - UITS</title>
</head>
<body>
  …
  <main role="main">
    …
    <form id="siteSearch" action="search.php">
      <input type="text" name="searchTerms" title="Enter site search terms"/>
      <input type="image" src="sbmt_icon.png" alt="Submit search terms" />
    </form>
    …
  </main>
  …
</body>
</html>

Best practices

  • Check that an alternative text attribute accompanies all img and input[type="image"] elements
  • Keep alternative text concise, e.g. no more than 10-15 words
  • Include any words that appear in informative images in the alternative text
  • Verify that alternative text for links or controls helps to form the link text and/or control label.
  • Treat images as decorative if the proposed alternative text would repeat neighboring text
  • Use an empty alt="" attribute for decorative images to indicate that it should not be announced

Checking for correct usage

  • All images are required to have an alternative text attribute.
  • Alternative text for informative images needs to provide the same information as the image.
  • Each decorative image should have an alternative text attribute with an empty string (alt="").
  • Alternative text for images used in links or buttons must describe the function or destination of the link, even when read out of context.

Relevant standards

WCAG 2.0 SC 1.1.1 (Level A) - Non-Text Content
All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below.

WCAG 2.0 SC 2.4.4 (Level A) - Link Purpose (In Context)
The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.