---
title: "<input type=image> Alt Text | Accessibility Rule"
description: Image buttons need to have alternate text
source_url:
  html: https://testingbot.com/support/accessibility/web/rules/input-image-alt
  md: https://testingbot.com/support/accessibility/web/rules/input-image-alt/index.md
---
# Ensure \<input type="image"\> elements have alternative text

Rule ID: input-image-altUser Impact: criticalGuidelines: WCAG 2.0

Ensure that all `<input type="image">` elements include appropriate alternative text to convey their purpose and function to users who rely on assistive technologies.

## About This Rule

This rule ensures that image buttons have appropriate alternative text, enhancing accessibility for users who rely on screen readers. Adhering to this guideline aligns with the following standards:

- WCAG 2.1 (A): 1.1.1 Non-text Content
- WCAG 2.0 (A): 1.1.1 Non-text Content
- WCAG 2.2 (A): 1.1.1 Non-text Content
- WCAG 2.1 (A): 4.1.2 Name, Role, Value
- WCAG 2.0 (A): 4.1.2 Name, Role, Value
- WCAG 2.2 (A): 4.1.2 Name, Role, Value
- Section 508: 1194.22 (a)
- Trusted Tester: 7.A
- EN 301 549: 9.4.1.2 Name, Role, Value

## Why It Matters

Screen readers cannot interpret images without textual descriptions. For image buttons, the `alt` attribute serves as the accessible name, informing users of the button's action. Without this attribute, or if it contains an inappropriate value, users who are blind or have low vision may be unable to understand the button's purpose, leading to confusion and a diminished user experience.

## How to Fix

To make image buttons accessible:

- **Use the `alt` Attribute:** Provide a clear and concise `alt` attribute that describes the action performed when the button is activated. For example: 

    <input type="image" src="submit.png" alt="Submit">

- **Avoid Describing the Image Itself:** The `alt` text should represent the button's function, not a description of the image. For instance, use "Search" instead of "Magnifying glass icon." 
- **Ensure Non-Empty `alt` Text:** Do not leave the `alt` attribute empty, as this renders the button inaccessible to screen reader users. 
- **Alternative Methods:** If necessary, you can use `aria-label` or `aria-labelledby` to provide an accessible name, but the `alt` attribute is the most straightforward method for `<input type="image">` elements. 

### Examples

#### Incorrect

An image button without an `alt` attribute:

    <input type="image" src="search.png">

#### Correct

An image button with a descriptive `alt` attribute:

    <input type="image" src="search.png" alt="Search">

## More Information

- [H36: Using alt attributes on images used as submit buttons](https://www.w3.org/WAI/WCAG21/Techniques/html/H36)
- [WebAIM: Image Buttons](https://webaim.org/techniques/forms/controls#input_image)

## Other Rules

Interested in other web accessibility rules? Please see these other rules:

- [label](https://testingbot.com/support/accessibility/web/rules/label)
- [link-in-text-block](https://testingbot.com/support/accessibility/web/rules/link-in-text-block)
- [link-name](https://testingbot.com/support/accessibility/web/rules/link-name)
- [list](https://testingbot.com/support/accessibility/web/rules/list)
- [listitem](https://testingbot.com/support/accessibility/web/rules/listitem)