Rule ID: ace-form-input-image-alt

Check that image-type input elements include descriptive alternative text

WCAG 2.0 (A) - WCAG 2.2 (A) 1.1.1: Non-text Content 4.1.2: Name, Role, Value Blind Deafblind Mobility Legal Risk

What This Rule Checks

Every <input type=”image”> element must have an accessible name that describes its function. This is crucial for users relying on screen readers or other assistive technologies to understand the purpose of the image button. The name can be provided using the alt attribute, aria-label, or aria-labelledby. Without this, users might not be able to interact with the form effectively.

Who Is Affected

This issue primarily affects: Blind users, who rely entirely on screen readers or braille displays to navigate and interact with content; Deafblind users, who rely on braille displays and cannot access visual or auditory content; Mobility users, who navigate using keyboards, switches, voice control, or other assistive input devices.

Why This Matters

Image-type inputs serve as submit buttons. Without alt text, screen readers announce “image, submit” without indicating what the button does. This is a WCAG 1.1.1 Level A violation.

How to Fix

To make input images accessible, every <input type=”image”> element must include a text alternative that describes its function. This can be done using the alt attribute, aria-label, or aria-labelledby.

Code Examples

Incorrect Markup Solutions:

Code example

<!-- Image input with no alt -->
<input type="image" src="submit-btn.png">

Copy

Correct Markup Solutions:

Code example

<!-- Image input with descriptive alt -->
<input type="image" src="submit-btn.png" alt="Submit order">

Copy

Common Mistakes to Avoid

Forgetting that input[type=”image”] needs alt text just like <img> elements.
Using alt text that describes the image rather than the action (e.g., “arrow icon” vs “Go to next page”).

AI Auto-Fix Available

This rule supports ACE™ AI Auto-Fix. When a violation is detected, ACE can automatically generate a code fix for review. The AI analyzes the specific element in context and proposes a targeted remediation that preserves your existing markup and styling. You can preview, modify, and approve the fix before it is applied.

Tip: Form accessibility is one of the most common sources of accessibility complaints. Every form control must have a programmatically associated label that is visible and descriptive. Test every form with keyboard-only navigation.

Related WCAG Criteria

1.1.1: Non-text Content
4.1.2: Name, Role, Value