Image buttons must have alternate text
<input type="image"> button must have
alternate text, otherwise screen reader users will not know the button's purpose. Even if the
image contains only text, it still requires alternate text, since a screen reader cannot
translate images of words into output.
Text Alone Is Not A Label: Just typing text next to the form element is not sufficient to create a true label. Assistive technologies like screen readers require labels in code that can be determined programmatically. Some screen readers are programmed to guess what the label should be, based on the surrounding text, but this method is not fool-proof and can lead to confusion if the screen reader guesses wrong.
Fixing the problem
Check that the
<input type="image"> has a non-empty
Image buttons use the
alt attribute as the label. The
attribute value must be provided, and it must be clear and concise and representative of
the action performed when the button is activated by the user (not a description of the
Image Button Example
<input type="image" src="submit.png" name="submit" height="36" width="113" alt="Submit">
Check that all images used as buttons have accessible alternate text.
How to add alt text to an image
<input type="image" alt="submit button">
<input type="image" aria-label="submit button">
<input type="image" aria-labelledby="someElementID">
If you are using an
alt attribute or an
aria-label, ensure it
is not empty. If you are using an
aria-labelledby attribute, ensure that
the ID to which it points exists and is accessible to a screen reader (i.e. is not
hidden using CSS with
display: none or
Tips on writing alt text
When writing the
alt text, keep in mind that the purpose of the
alt text is to relay information to blind users about the image’s contents
and purpose - blind users should be able to get as much information from
alt text as a sighted user gets from the image itself.
text should give the intent, purpose, and meaning of the image.
alt text, it is helpful to keep the following questions in
- Why is the non-text content here?
- What information is it presenting?
- What purpose does it fulfill?
- If I could not use the non-text content, what words would I use to convey the same information or function?
Be sure that all text contained in the
alt attribute is useful. Words like
"chart," "image," "diagram," or image file names tend not to be very useful and thus
should not be used in