A button made from an image, such as a “Submit” graphic or an icon that sends a form, communicates its purpose visually, but users who can’t see the image rely on text alternatives to understand what it does.
For someone using a screen reader, that button might not make any sense at all unless it has a proper label.
Image button examples (Icon category)
If the button lacks alternate text, a screen reader user might only hear “button” or “image,” without knowing what it actually does.
This is why every image button needs a clear, accessible name.
WCAG Success Criteria
Several WCAG 2.1 success criteria cover the use of image buttons:
1.1.1 Non-text Content (Level A)
All meaningful images, including images used as buttons, must have a text alternative that serves the same purpose.
Example: A paper plane icon used to send a message must include alt="Send" so screen readers can announce its function.
2.4.6 Headings and Labels (Level AA)
Labels and accessible names must describe the purpose of interface components.
Example: Instead of alt="icon", use alt="Submit form" so users know exactly what the button does.
4.1.2 Name, Role, Value (Level A)
Interactive elements such as buttons must expose their name, role, and state to assistive technologies.
When you use <input type="image"> or a <button> with an <img>, screen readers can identify the control as a button and read its accessible name.
What Is an Accessible Name
An accessible name is a text label that tells assistive technologies, such as screen readers, what an element is and what it does.
For normal buttons, the text inside the <button> tag already provides that label. For example:
<button>Submit</button>For image buttons created with <input type="image">, there is no visible text inside the tag.
You must add a name using one of these attributes:
- alt
- aria-label
- aria-labelledby
This name should describe the action of the button, not what the image looks like.
Example:
<input type="image" src="send.png" alt="Send message">For image buttons made with an <img> inside a <button>, the accessible name can come from either the visible text or from an ARIA attribute.
If there’s visible text:
<button>
<img src="send.png" alt=""> Send
</button>The screen reader will use “Send” as the accessible name, and the image’s alt can stay empty (alt="") because it’s decorative.
If there’s no visible text, provide a label through the image’s alt:
<button>
<img src="send.png" alt="Send message">
</button>The screen reader will announce:
“Send message, button.”
Why This Matters
Without alternate text, screen readers cannot announce what the button does.
Sighted users might see a picture of a paper plane and understand it means “Send,” but a screen reader user will only hear “button.”
That is confusing and makes it difficult to use the site effectively.
With a proper name such as “Send message”, the user knows exactly what will happen when the button is activated.
When You Should Use It
You need to add alternate text every time you use an image as a button, for example:
- A Submit button made from a PNG or SVG
- A Search icon that submits a form
- A Save, Delete, or Download button is shown as an image
If it performs an action, it must have a descriptive text label.
How to Add Alternate Text
There are three reliable ways to make image buttons accessible.
1. Use the alt Attribute
This is the most common and straightforward method.
<input type="image" src="submit.png" alt="Submit form">The screen reader will announce:
“Submit form, button.”
2. Use aria-label
If you cannot use alt, for example, when the same image is reused for different actions, you can provide a name directly with aria-label.
<input type="image" src="send-icon.png" aria-label="Send message">Screen reader output:
“Send message, button.”
3. Use aria-labelledby
If there is already visible text near the button that describes its function, you can reference that text using aria-labelledby.
<span id="saveText">Save changes</span>
<input type="image" src="save-icon.png" aria-labelledby="saveText">Now the button is linked to that existing label, and the screen reader will read:
“Save changes, button.”
Examples of What Not to Do
Here are some incorrect patterns and why they fail:
No alternate text at all
<input type="image" src="submit.png">The screen reader will say “button” or “image,” giving no context.
Empty alt or aria-label
<input type="image" src="submit.png" alt="">Empty labels override everything else, leaving the button unnamed.
Broken aria-labelledby reference
<input type="image" src="submit.png" aria-labelledby="missingText">
<!-- There is no element with ID 'missingText' -->If the ID does not exist, there is no label to announce.
Writing Good Alt Text
When writing alt text for an image button:
- Focus on the action, not the image’s appearance.
- “Search” ✅
- “Magnifying glass” ❌
- Keep it short and clear, usually one or two words.
- Avoid file names or generic terms such as “button,” “image,” or “icon.”
- Make sure the label accurately describes what happens when it is clicked.
Ask yourself:
- What does this button do?
- What action is the user performing?
- What words would I use if I could not see the image?
Fixing the Problems
Here is how to fix each issue:
- No alt or ARIA label → Add one.
- Empty alt text → Give it meaning.
- Wrong or missing ID in aria-labelledby → Fix the reference.
Example:
<input type="image" src="upload.png" aria-label="Upload photo">Now a screen reader will say:
“Upload photo, button.”
Wrapping Up
Image buttons without alternate text leave screen reader users guessing.
By adding a meaningful label with alt, aria-label, or aria-labelledby, you ensure that everyone can understand and use your buttons.
Without a name → “Button” (confusing)
With a name → “Submit form button” (clear and useful)
Always provide accessible names for image buttons.
It is a simple code change that makes a major difference for accessibility.
