# Image inputs (<input type="image">) must have alternate text describing the button action.

> Canonical HTML version: https://rocketvalidator.com/accessibility-validation/accesslint/0.16/text-alternatives/input-image-alt
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

An `<input type="image">` element acts as a submit button that displays a custom image instead of the browser's default button styling. When this element lacks alternate text, screen readers have no way to communicate what the button does. Users hear something like "image" or the raw filename (e.g., "submit-btn-v2.png"), which tells them nothing about the action they are about to take.

This problem affects screen reader users most directly, but it also impacts users who browse with images disabled or who rely on voice control software. Voice control users need a spoken label to target interactive elements by name. Without one, they cannot activate the button by voice.

## Why this matters

This rule relates to two WCAG 2 Level A success criteria:

- **1.1.1 Non-text Content** requires that all non-text content serving a function has a text alternative describing that function.
- **4.1.2 Name, Role, Value** requires that all user interface components have an accessible name that can be programmatically determined.

An image button is an interactive control, not a decorative image. Even an empty `alt` attribute (`alt=""`) does not make it decorative the way it would for an `<img>` element. Image buttons always have the `button` role, so they must always have a non-empty accessible name.

The default accessible name for image buttons, defined by the HTML Accessibility API Mapping, is a localized version of "Submit Query." This default is not considered descriptive and does not satisfy the rule.

## How to fix it

Add alternate text that describes the action the button performs, not the appearance of the image. For example, if the button submits a search form, the text should be "Search", not "magnifying glass icon."

There are three ways to provide the accessible name:

1. Use the `alt` attribute directly on the `<input>` element.
2. Use the `aria-label` attribute.
3. Use the `aria-labelledby` attribute to reference a visible text element.

The `title` attribute can also provide an accessible name, but `alt` or `aria-label` are preferred because `title` has inconsistent behavior across browsers and assistive technologies.

Pick whichever method fits your situation. The `alt` attribute is the simplest and most widely supported option for most cases.

## Examples

### Missing alternate text (incorrect)

This image button has no `alt`, `aria-label`, or `aria-labelledby` attribute. A screen reader will announce "image" or the filename.

```html
<form action="/search" method="get">
  <label for="q">Search</label>
  <input type="text" id="q" name="q">
  <input type="image" src="search-icon.svg">
</form>
```

### Empty alternate text (incorrect)

An empty `alt` attribute does not make an image button decorative. The button still needs an accessible name because it is an interactive control.

```html
<input type="image" src="search-icon.svg" alt="">
```

### Default name only (incorrect)

If no name is provided through any attribute, some browsers fall back to "Submit Query." This default does not count as a descriptive name.

```html
<input type="image" src="go-button.png">
```

### Using the `alt` attribute (correct)

```html
<form action="/search" method="get">
  <label for="q">Search</label>
  <input type="text" id="q" name="q">
  <input type="image" src="search-icon.svg" alt="Search">
</form>
```

### Using `aria-label` (correct)

```html
<input type="image" src="cart-checkout.svg" aria-label="Submit order">
```

### Using `aria-labelledby` (correct)

```html
<span id="btn-label" hidden>Submit order</span>
<input type="image" src="cart-checkout.svg" aria-labelledby="btn-label">
```

### Using the `title` attribute (correct, but less preferred)

```html
<input type="image" src="search-icon.svg" title="Search">
```

The `title` attribute works as a last resort, but some screen readers do not consistently announce it, and its tooltip behavior varies across platforms. Prefer `alt` or `aria-label` when possible.