Skip to content

Images

People who are blind do not access images directly. They listen to their screen readers read the alternative text the developer or content creator provided for the image. In the case of users who are deafblind, the text is converted to refreshable braille characters that they feel with their fingers.

Alternative Text Best Practices

Alternative text for images is the first principle of web accessibility by providing text for the visually impaired through screen readers. It is also used by Google’s search engines to add to your page ranking and provides an image description if the image doesn’t load. Often alt text is improperly handled. By following these guidelines, you can ensure that you’re providing the best for your users.

  1. Programmatically Determinable - screen readers can access text.
  2. Meaningful - text describes the image's purpose or intent of the image.
  3. Concise - text does not exceed 150 characters and preferably is much shorter than that.

Do not include words like "a photo of" or "a graphic of." Screen readers automatically announce this, so adding it in the alt text would be redundant, and you’d hear something like "image, image of a beach ball."

Alternative Text Hierarchy

  • aria-labelledby - Will override all other values.
  • aria-label - Will override all values unless aria-labelledby is present.
  • alt - Recommended method of providing alternative text.
  • title - some screen readers like VoiceOver on Mac will treat the title attribute as an additional description for the image and will read both the alt and title.

Informative Images

Images that convey content MUST have programmatically determinable alternative text.

Therefore, developers MUST use the alt attribute on the img element; no exceptions!

The alternative text for informative images MUST be meaningful (accurately conveying the purpose of the image, and the author's intent in a way that is useful to those who cannot see the image).

The text must be an appropriate substitute for not being able to see the image. It should clearly represent the purpose of the image so the user can understand why the image is there and what it represents. Communicate intent, purpose, and meaning.

It's helpful to ask yourself these questions:

  • Why is this image here?
  • What information is it presenting?
  • What purpose does it fill?
  • If I could not use the image, what words would I use to convey the same information or function?

The purpose of the image can vary greatly! For example:

General Purpose 

<img src="../resources/beach.jpg" alt="Peaceful view of a beach chair on a Florida beach overlooking the ocean.">

Peaceful view of a beach chair on a Florida beach overlooking the ocean.

Specialized Purpose

<img src="../resources/beach.jpg" alt="The beaches in Bonita Springs Florida were re-opened on May 1." style="width: 50%">

The beaches in Bonita Springs Florida were re-opened on May 1.

Logos

The purpose of a logo is to identify a brand. In most cases, it is not necessary to indicate that it is a logo.

<img src="../resources/madisonCollegeLogo.png" alt="Madison Area Technical College">

Madison Area Technical College

Decorative or Redundant Images

Images that do not convey content, are decorative, or are redundant to content that is already conveyed in text MUST be given null alternative text (alt=""), ARIA role="presentation", or implemented as CSS backgrounds.

When the purpose of an image is purely decorative, meaning it serves no purpose other than to embellish the page, then do one of the following:

  • Use an empty alternative text. alt=""
  • Add the ARIA attribute for a presentation role. role=presentation
  • Move the images to CSS to be a background-image instead.

Decorative Image

<img src="../resources/pdf_icon.png" alt=""> 
<a href="resources/instructions.pdf">Instruction Manual (PDF)</a>

Instruction Manual (PDF)

Actionable Images

All actionable images (e.g., links, buttons, controls) MUST have alternative text.

  • For images, buttons, or other controls that are displayed by an image, make sure the alternative text describes the destination, purpose, function, or action.
  • Do not include "link to" in the alt text since screen readers already will announce that the image is a "link graphic." 
<img src="../resources/home.png" alt="Home" width="113">

Home

If the logo takes is a link. Describe the link's destination.

Home 

<a href="https://madisoncollege.edu/">
    <img src="../resources/matc_logo.png" alt="Home">
</a>

Below is a printer image that is set to print the page when clicked. The alt text is set to describe the functionality, not describe how the icon looks. 

<a href="javascript:print()">
  <img src="../resources/images_print.png" alt="Print this page">
</a>

Print this page

Complex images

Complex images contain substantial information:

  • Graphs and charts, including flow charts and organizational charts
  • Diagrams and illustrations where the page text relies on the user being able to understand the image
  • Maps showing locations or other information such as weather systems.

Complex images MUST be briefly described using alt text AND MUST have a more complete long description.

There are several ways to accomplish this.

Solution 1: Info in HTML

The easiest solution is to provide the long description itself in the HTML document right below the image.

We could write longer alt text, or you could even argue that we should use alt="" and leave the alt text empty. But "Bar chart with visitor totals. Extended description below chart." explains just enough information, without making it redundant.

<img src="../resources/images_altTextComplexImage.jpg"
    alt="Bar chart with vistor totals. Extended description below chart.">

<p>Long description goes here.</p>
Bar chart with vistor totals. Extended description below chart.

The chart shows the website hits for the first quarter of 2018. It shows that Site 1 has more visitors than either of the other sites, but the number of visitors is decreasing. Site 2 has a fairly constant number of visitors, while for Site 3 page hits are increasing month to month.

Site 1 Visitors

  • January 185
  • February: 140
  • March: 198

Provide a link that takes the user to a more detailed description of the image. The below link does not work (for demonstration purposes only).

Bar chart with vistor totals. Detailed description below chart.

Detailed description of chart

Solution 3: Use aria-describedby

The ARIA aria-describedby attribute is similar to the aria-labelledby, but it is used for longer descriptions. Also, unlike the aria-labelledby attribute it does not override the alt attribute.

Some assistive technologies read aria-describedby content immediately after an image's alt attribute information without user activation.

<h4>2018 First Quarter Visitors to Example.com Website</h4>

<img src="../resources/images_altTextComplexImage.jpg"
     alt="Bar chart with vistor totals"
     aria-describedby="describeChart">

<div id="describeChart">
<p>The chart shows the website hits for the first quarter
  of 2018. It shows that Site 1 has more visitors than either of the other
  sites, but the number of visitors is decreasing. Site 2 has a fairly constant
  number of visitors, while for Site 3 page hits are increasing month to month.
</p>
<h3>Site 1 Visitors</h3>
<ul>
     <li>January 185</li>
     <li>February: 140</li>
     <li>March: 198</li>
</ul>
</div>

2018 First Quarter Visitors to Example.com Website

Bar chart with vistor totals

The chart shows the website hits for the first quarter of 2018. It shows that Site 1 has more visitors than either of the other sites, but the number of visitors is decreasing. Site 2 has a fairly constant number of visitors, while for Site 3 page hits are increasing month to month.

Site 1 Visitors

  • January 185
  • February: 140
  • March: 198

Images of text

These images should be avoided if possible. If you cannot avoid text images, it's best to have the same text in the alt attribute. This is less of an alt text-specific best practice and more of a general SEO-friendly web development tenet. Because search engines can't read text within your images, you should avoid using images in place of words.

There is an exception to this rule for when you are using logos.

Animated Images

  • A method MUST be provided to pause, stop, or hide any prerecorded video-only content that begins playing automatically and lasts more than 5 seconds.
  • Animated images MUST NOT flash or flicker more than 3 times per second.