Images

It's not just about adding alt text to an image; it's much more than that.

Decorative images

• If an image doesn't add additional context or information (decorative image) that allows the user to better understand the context then it should be hidden from assistive technology (AT), such as a screen reader.

• Use any of these methods to hide images from AT:

  • An empty or null text alternative (alt)
  • Applying ARIA
  • Add the image as a CSS background

<!-- All of these choices lead to the same result. -->
<img src=".../Ladybug.jpg" role="presentation">
<img src=".../Ladybug.jpg" role="none">
<img src=".../Ladybug.jpg" aria-hidden="true">

• When in doubt, add descriptions to images.

Empty or null alt

• Do not set the image alt attribute to "" unless the image is purely decorative.

Informative images

• If an image conveys a concept, idea, or emotion you should include programmatic alternative text describing the purpose of the image.

• Add a highly detailed description of the image wherever possible.

e.g.

<img src=".../Ladybug_Swarm.jpg" alt="A swarm of red ladybugs is resting 
on the leaves of my prize rose bush.">

• If the image is an (inline), add role="img".

• Since elements do not support the alt attribute, use alternative coding methods to provide a description.

Functional images

• Any image with a functional purpose (e.g., a logo that links to the home page, a magnifying glass icon used as a search button) should include appropriate alt text.

• Alt text should describe the image’s action, not its visual aspects.

• If the image is both informative and actionable you can add alternative descriptions to each element—but it is not a requirement. e.g.
  

<div title="Navigate to the homepage">
   <a href="/">
      <img src=".../Ladybug_Logo.png" alt="Lovely Ladybugs for your Lawn"/>
   </a>
</div>

Complex images

• If an image requires more explanation than a decorative, informational, or functional image include infographics, maps, graphs/charts, and complex illustrations use any of these methods to add alternative descriptions

• Link out to a resource or provide a jump link to a longer explanation later on the page. e.g.
  

<img src=".../Ladybug_Anatomy.svg" alt="Diagram of the anatomy of a ladybug.">
<a href="ladybug-science.html">Learn more about the anatomy of a ladybug</a>

• Append the aria-describedby attribute to the <img> element then link the image to an ID containing a longer description. e.g.

 <img src=".../Ladybug_Anatomy.svg" alt="Diagram of the anatomy of a ladybug." 
 aria-describedby="description">
 <p id="description">In this course, you will learn more about the 
    anatomy of a ladybug, including the head, 
    antenna, eye, pronotum, elytra, leg, abdomen, and wing.
 </p>

• Group short alternative descriptions with a longer one is to use the <figure> and <figcaption> elements. e.g.

 <figure role="group">
      <img src=".../Ladybug_Anatomy.svg" alt="Diagram of the anatomy of a
      ladybug.">
      <br><br>
      <figcaption>
        <a href="ladybug-science.html">Learn more about the anatomy of a 
        ladybug</a>
      </figcaption>
  </figure>

Alternative text best practices

• Advised to cap alternative text to 150 characters or less to avoid reader fatigue.

• Avoid using words like "image of" or "photo of" in the description, as the screen reader will identify these file types.

• When naming images, be as consistent and accurate as possible. Image names are a fallback when the alternative text is missing or ignored.

• Avoid using non-alpha characters (for example, #, 9, &)

• Use dashes between words rather than underscores in image names or alternative text.

• Use proper punctuation whenever possible. Without it, the image descriptions will sound like one long, never-ending, run-on sentence.

• Write alternative text like a human and not a robot. Keyword stuffing does not benefit anyone—people using screen readers will be annoyed, and search engine algorithms will penalize them.