Input Image Alt

Why It Matters

• Screen reader users cannot see the image. An image-based submit button without alt text is announced as something generic like "image button" or sometimes just the filename. Users have no way to know what clicking it will do.
• It is a form control, not just decoration. Unlike a decorative image that can have an empty alt, a form button performs an action. Users need to know what action — "Search," "Submit Order," "Add to Cart" — before they click.
• Keyboard users rely on clear labels. People navigating with a keyboard tab through form controls. When they land on an image button with no label, they are stuck guessing what it does.
• It is a basic accessibility requirement. Providing alt text on image inputs is required by accessibility guidelines. It is one of the simplest checks and one of the most commonly failed.

How to Fix It

1. Add an alt attribute that describes the action. Use text that tells the user what the button does: <input type="image" src="/search.png" alt="Search">. Focus on the action, not the image appearance.
2. Keep it short and action-oriented. The alt text should be a brief label — "Submit," "Search," "Add to Cart," "Log In." Do not describe what the image looks like; describe what clicking it does.
3. Consider using a regular button instead. In most cases, a standard <button> element with text (styled with CSS) is more accessible, more flexible, and easier to maintain than an image input.
4. Test with a screen reader. Tab to the image button and listen to what the screen reader announces. If it says something unhelpful like "unlabeled image button" or reads a filename, your alt text is missing or wrong.
5. Check every form on your site. Image inputs can hide in search bars, checkout flows, newsletter signups, and older legacy forms. Audit all forms to catch any that are missing proper labels.

Common Mistakes

• Leaving the alt attribute off entirely. The most common mistake is simply not adding an alt attribute to the image input. Screen readers are left guessing, and users cannot determine what the button does.
• Describing the image instead of the action. Alt text like "magnifying glass icon" describes what the image looks like, not what it does. "Search" is the correct label because it describes the action.
• Using empty alt on an actionable element. An empty alt="" is correct for decorative images, but an image button is not decorative — it performs an action. An empty alt hides the button from screen reader users entirely.
• Using image inputs when a button would work better. Image inputs are a holdover from older web design. A styled <button> with visible text and a CSS background is almost always a better, more accessible choice.