Accessibility (a11y) Rules - 3

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.