<input type="image"> elements do not have [alt] text

<input type="image"> elements do not have [alt] text

Appears in: Accessibility audits

When an image is being used as an <input> button, providing alternative text helps users of screen readers and other assistive technologies understand the purpose of the button.

How this Lighthouse audit fails #

Lighthouse flags <input type="image"> elements that don't have alt text:

Lighthouse audit showing input types with a value of 'image' do not have alt attributes

The Lighthouse Accessibility score is a weighted average of all the accessibility audits. See the Lighthouse accessibility scoring post for more information.

How to add alternative text to image inputs #

Provide an alt attribute for every <input type="image"> element. Describe the action that occurs when the user clicks on the button in the alt text:

<input type="text">
<input type="image" alt="Sign in" src="./sign-in-button.png">

See the Include text alternatives for images and objects post for more information.

You can also use ARIA labels to describe your image buttons.

For example: <input type="image" aria-label="Sign in">

See also Using the aria-label attribute and Using the aria-labelledby attribute.

Tips for writing effective alt text #

  • As previously mentioned, describe the action that occurs when the user clicks on the button.
  • alt text should give the intent, purpose, and meaning of the image.
  • Blind users should get as much information from alt text as a sighted user gets from the image.
  • Avoid non-specific words like "chart", "image", or "diagram".

Learn more in WebAIM's guide to Alternative Text.

Resources #

Last updated: Improve article