In this Article
Why is alternate text important for buttons that use images?
An <input type="image"> button must include alternate text to convey its purpose to accessible technology users. Even if the image consists solely of text, alternative text is necessary, as screen readers cannot interpret text embedded within images.
Troubleshooting Image Buttons must have Alternate Text Issues
Follow these steps to begin your diagnosis:
From the Detail Page View in DubBot, expand the details for the Issue you are investigating
In the Element Source section, you will find the
<input>tag that has been flagged as missing alternate text.In the Failure Summary section, you will see tips for possible solutions to the Issue.
Possible Solutions Explained
Buttons used in forms also need readable (discernible) text to allow accessible technology users to understand the purpose of the input field.
Flagged:
<input type="image"src="button.png" name="submit" height="30" width="80" />
The input button above can be corrected by adding any one of the following to the <input> tag:
alt="Submit"aria-label="Submit Button"aria-labelledby="IDwithName"
One Correct Example:
<input type="image"src="brand-button.png" name="submit" height="30" width="100" aria-label="Submit Button" />
Tips
If you use the
altoraria-labelattribute, ensure it is not empty.If using
aria-labelledby, ensure the ID being referenced is spelled correctly and not empty.
Resources
Labeling Controls - part of W3C Forms Tutorial
Learn More with WCAG
Learn more on Creating Good Alt Text for Images.
DubBot Flag:
Ensures <input type="image"> elements have alternate text
If you have questions, please contact our DubBot Support team via email at help@dubbot.com or via the blue chat bubble in the lower right corner of your screen. We are here to help!