Back to Info and Examples for Accessibility Insights for Web

input-image-alt

Image buttons must have alternative text.

Why it matters

An image button is an <input> element with type="image". Alternative text is a word or phrase that (1) is coded in a way that assistive technologies can associate it with a specific non-text object, and (2) conveys the same information as the non-text object.

Because assistive technologies can’t interpret an image directly, they rely on alternative text to communicate the image button’s purpose. When an image button doesn’t have alternative text, people who use assistive technologies have no way of knowing its purpose.

How to fix

Provide alternative text that describes the input button’s purpose using one of the following methods:

Good

title attribute

Better

aria-label attribute
aria-labelledby attribute

Best

alt attribute

For tips on writing good text alternatives, see Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content.

Example

Fail

This image button has no alternative text. People who use assistive technologies can't determine its purpose.

Pass

An alt attribute describes the image button's purpose. Everyone can tell what the button does.

<input type="image" src="envelope.png" name="new" alt="Create a new message" height="50" width="150">

About this rule

This rule passes if ANY of the following is true:

Element has a non-empty alt attribute
Element has a non-empty aria-label attribute
Element has an aria-labelledby attribute that references elements that are visible to screen readers
Element has a non-empty title attribute

More examples

Understanding Success Criterion 1.1.1: Non-text Content

Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content

Understanding Success Criterion 4.1.2: Name, Role, Value