When an image is being used as an
providing alternative text helps users of screen readers and other
assistive technologies understand the purpose of the button.
How this Lighthouse audit fails
<input type="image"> elements that don't have
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
alt attribute for every
<input type="image"> element.
Describe the action that occurs when the user clicks on the button
<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.
<input type="image" aria-label="Sign in">
Tips for writing effective
- As previously mentioned, describe the action that occurs when the user clicks on the button.
alttext 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.
- Source code for
<input type="image">elements do not have
- Image buttons must have alternate text (Deque University)