Ensure input types with a value "image" have alternate text

When an image is being used as an <input> button, providing alternative text helps screen reader users understand the purpose of the button. Lighthouse reports when any <input type="image"> elements do not have alt text':

Lighthouse audit showing input types with a value of 'image' do not have alt attributes
Fig. 1 — <input type="image"> elements do not have alt attributes

How to fix this problem

To fix this problem, provide alt attributes for every <input type="image"> element. Decribe the action that occurs when the user clicks on the button in the alt text (see also Include text alternatives for images and objects):

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

</form>

Even if the image contains only text, provide alternate text. Screen readers can't translate images of words into output. Learn more in Image buttons must have alternate text.

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.

More information

Last updated: Improve article