• June 1, 2025

Accessible Image Button Labels: Fixing <input type="image"> Without Text Alternatives

Rule ID: input-image-alt
Ruleset: axe-core 4.10
User Impact: Critical
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Section 508, Trusted Tester, EN 301 549

How to Fix the Problem

To ensure full accessibility, every <input type="image"> element used in a form must have an accessible name. This can be done by including one of the following:

1. alt attribute (recommended):
   This is the most common and straightforward method.

   html

   KopierenBearbeiten

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


2. aria-label attribute:
   Useful if you want to provide a label without changing the visual interface.

   html

   KopierenBearbeiten

   <input type="image" src="submit.png" aria-label="Submit form">


3. aria-labelledby attribute:
   Use when referencing a separate visible element that acts as the label.

   html

   KopierenBearbeiten

   <span id="submitText">Submit form</span>
<input type="image" src="submit.png" aria-labelledby="submitText">


Important Guidelines:

• Do not leave alt, aria-label, or aria-labelledby empty.

• If using aria-labelledby, make sure the referenced element:

  • Exists in the DOM,

  • Is not hidden via display: none or aria-hidden="true".

Tips for Writing Effective alt Text:

• Focus on function not appearance: “Submit form” not “Arrow button”.

• Avoid unhelpful words: Skip terms like “button”, “image”, or file names.

• Be concise and specific.

• Match the alt text to the purpose of the action, not the look of the image.

Why it Matters

Screen reader users rely on alternate text to understand and interact with buttons rendered as images. If an <input type="image"> lacks a descriptive label, blind users may not know its purpose, creating a significant barrier to submitting forms or performing critical actions.

Even if text is visually present near the image, it is not sufficient unless programmatically associated using alt, aria-label, or aria-labelledby. Some screen readers might try to guess the function from nearby text, but this is unreliable and often fails to provide a clear experience.

Ensuring accessible names for image inputs supports:

• Blind and low vision users,

• Users relying on speech input software,

• General compliance with international accessibility standards.

Rule Description

Every <input type="image"> element must have a programmatically determined accessible name. This ensures users using assistive technologies can identify the button’s purpose and take the appropriate action.

The Algorithm (in Simple Terms)

The rule checks all <input type="image"> elements to verify whether:

• They include an alt attribute with meaningful text,

• Or an aria-label attribute with text,

• Or an aria-labelledby attribute referencing a valid, visible label element.

If none of these are present, the element fails the rule.