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

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:
<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.
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
- Source code for
<input type="image">
elements do not have[alt]
text audit - Image buttons must have alternate text (Deque University)