Accessibility (a) 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.

Attribute	Example	Screen Reader Behavior	Use Case
alt="" (Empty)		Ignores the image completely	Decorative or non-informative images
Missing alt		May read the filename/URL	Not recommended; implies negligence

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.