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

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.

<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.

<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.

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

Using the alt attribute (correct)

<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)

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

Using aria-labelledby (correct)

<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)

<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.

Learn more:

W3C Reference

Understanding Success Criterion 1.1.1: Non-text Content

→

W3C Reference

H36: Using alt attributes on images used as submit buttons

→

MDN Reference

MDN: <input type="image">

→