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

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:

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:

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

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

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 #

• Source code for <input type="image"> elements do not have [alt] text audit
• Image buttons must have alternate text (Deque University)