Functional Images

When using an image as a link the image cannot be considered decorative. It is functional, and the ALT text must communicate the link destination, not describe the details of the actual image. For example:

<a href="https://stanford.edu">
   <img src="images/home-icon.png" alt="Stanford University Homepage">
</a>

If text appears inside the link alongside the image, use null ALT text.

Stanford University

<a href="https://stanford.edu">
   <img src="image.jpg" alt="">
   Stanford University
</a>

If the image link is redundant to an adjacent text link, hide the image link from assistive technology. This eliminates unnecessary tab stops for keyboard users and unwanted repetition for screen reader users. Follow three steps:

1. Remove the image link from the tab order using tabindex="-1"
2. Add aria-hidden="true" on the image link
3. Keep the ALT text on the image for for users who might be using both a screen reader and a mouse (low vision users)

Stanford University

<a href="https://stanford.edu" tabindex="-1" aria-hidden="true">
   <img src="image.jpg" alt="Stanford University">
</a>

[... snip ...]

<a href="https://stanford.edu">
   Stanford University
</a>