Ensure <input type="image"> elements have alternative text

Rule ID: input-image-alt User Impact: critical Guidelines: 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

Other Rules

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

logo TestingBot