Images · Concept

Name the action, not the pixels.

When an image is inside a link or button, its alternative contributes to the control’s accessible name. Describe what activation does.

The principle

Informative image: replace what it shows. Functional image: name where it goes or what it does.

Image-only controls

The control needs a useful name.

An image-only link has no visible text to name it. In that case, the image’s alt becomes the link name. The same rule applies when an image supplies the only content of a button.

Image-only product link

Link: “Harbor trail boot”

The alternative names the destination product—not “photo of brown footwear.”

<a href="/products/harbor-trail-boot">
  <img src="boot.jpg" alt="Harbor trail boot">
</a>

Image-only print button

Button: “Print invoice”

The alternative names the action—not “printer icon.” A visible text label is even clearer when the design allows it.

<button type="button">
  <img src="printer.svg" alt="Print invoice">
</button>

Product cards

One destination, one link.

When the image and product title lead to the same page, combine them into one link. Let visible title text name the link and give the image an empty alt to prevent repetition.

Don’tCreate two duplicate stops
Boot image linkHarbor trail boot linkAdd to cart

Separate links to the same destination repeat information and add an unnecessary keyboard stop.

<a href="/boot"><img alt="Harbor trail boot"></a>
<h3><a href="/boot">Harbor trail boot</a></h3>
DoCombine image and title
Harbor trail boot linkAdd to cart

The title provides the link name. The image is redundant inside this link, so alt="" keeps the name concise.

<a href="/boot">
  <img src="boot.jpg" alt="">
  <h3>Harbor trail boot</h3>
</a>

Keyboard-testable pattern

Tab through the useful actions.

The image and visible title form one link. The image has an empty alt because the title names the destination. The separate Add to cart button performs a different action.

Product title linkAdd to cart button

Naming rules

Keep one clear source of truth.

The accessible name is assembled from the contents and attributes of the interactive element. Avoid making several sources compete or repeat.

Visible text exists

Prefer the visible text as the control’s name. Make accompanying images empty when they add no distinct meaning.

Image is the only content

Use its alt to name the link destination or button action.

Icon plus hidden label

Keep the icon decorative and give the button one text alternative, such as visually hidden text or aria-label.

Quick test

Name it, then tab it.

  1. List every image inside a link or button.
  2. Confirm the resulting control name describes the destination or action.
  3. Remove repeated image descriptions when visible text already names the same control.
  4. Press Tab and count stops. One destination should not appear twice in the same card.
  5. Confirm focus is visible around the complete interactive target.
  6. Inspect the accessibility tree or use a screen reader to hear each link and button name.