Functional Images

title: "Functional Images — Images Used as Links or Buttons" description: "Learn how to make functional images accessible when they serve as links or buttons, with alt text describing the link target or button action." weight: 4 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, images]

Functional images act as links or buttons. Their alt text must describe the function or destination, not the visual appearance of the image.

## What You'll Learn

How to write alt text for linked images, image buttons, and icon-based controls.

## Why It Matters

When an image is a link, the alt text becomes the link text. Screen reader users hear it when navigating by links. "Click here" on an image link is meaningless.

## Real-World Use

A product image in a catalog is a link to the product page. The alt text says "Blue cotton t-shirt - view product details." The screen reader user knows the link destination.

## Linked Image

```html
<!-- Image as link -->
<a href="/products/blue-tshirt">
  <img src="blue-tshirt.jpg"
       alt="Blue cotton t-shirt - view product details">
</a>

<!-- Logo linked to homepage -->
<a href="/">
  <img src="logo.svg" alt="DodaTech home page">
</a>

Image Button

<!-- Image as submit button -->
<button type="submit">
  <img src="search-icon.svg" alt="Search">
</button>

<!-- Image as button -->
<button onclick="printPage()">
  <img src="print-icon.svg" alt="Print this page">
</button>

Icon with Text

<!-- Icon + text: Icon can be decorative -->
<a href="/cart">
  <img src="cart-icon.svg" alt="">
  Shopping cart (3 items)
</a>

Common Mistakes

1. Alt describes the image, not the function

alt="Magnifying glass" on a search button is less useful than alt="Search".

2. Redundant alt on linked logo

alt="DodaTech logo" is redundant. alt="DodaTech home page" is better.

3. "Link to" or "Go to" in alt text

Screen readers already announce "link." Just describe the destination.

4. Image only button without alt

A button with only an image and no alt is announced as an unlabeled button.

5. Same alt for different functional images

Each functional image needs unique alt text describing its specific function.

Practice Questions

1. What should the alt text of a linked image describe? The link destination or the action of clicking the link.

2. What should the alt text of an image button describe? The button's action, such as "Search" or "Print this page."

3. If an icon is next to visible text, do you need alt text on the icon? No. The icon can have alt="" since the text label conveys the meaning.

Challenge: Find 5 functional images (linked images, icon buttons, submit buttons) and evaluate their alt text. Rewrite any that describe appearance instead of function.

FAQ

Mini Project

Create a navigation bar with 5 icon-only links (home, search, cart, profile, settings). Use proper alt text for each functional image.

What's Next

Learn about Complex Images such as charts, infographics, and diagrams that need extended descriptions.