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 #
<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 in the
<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
alt text #
- 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.