The key principle for linked image alt text

Writing alternative text for linked images is straightforward if you follow this key principle:

The text description should communicate the action that will occur when interacting with the link or button.

Most websites include a company logo in the header or menu bar, wrapped in a link that points to the website’s home page. This serves as a quick way to return to the top of the site.

This creates an interesting challenge: since the logo image is often the only element within the link, using image alt text like “ABC News logo” isn’t ideal. While this accurately describes the image content, it fails to communicate the link’s action.

So what’s the best approach? Screen reader helper text is the solution.

<div class="site-header">
  <a class="site-title" href="https://litzdigital.com" rel="home">
    <span class="screen-reader-text">Litz Digital home</span>
    <img class="branding" src="https://litzdigital.com/wp-content/themes/mlitzinger/assets/img/litz-digital-logo.svg" alt="Litz Digital logo" role="presentation">
  </a>
  […]
</div>

The example above includes descriptive text that informs users what will happen when they interact with the link. The image has a role="presentation" attribute, which tells screen readers to exclude it from the link’s descriptive text.

In some cases, a logo’s alt text may provide important context. For example, in a sponsor logo grid where each logo links to the sponsor’s website, you’ll want to omit the role="presentation" attribute. This allows screen readers to announce both the helper text and the logo alt text.

<div class="sponsor-logo-grid">
  <ul>
    <li>
      <a href="https://workplaceaccessibility.group/">
        <span class="screen-reader-text">Workplace Accessibility Group</span>
        <img src="../WAG_logo.svg" alt="Workplace Accessibility Group logo" role="img">
      </a>
    </li>
    […]
  </ul>
</div>

This same principle applies for icon links too. When an icon image is the only content within a link, the text description should communicate the action that will occur when interacting with the link.