Image buttons must have alternative text

Rule input-image-alt · Images & non-text content · impact critical · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

An is a functional button. Without a text alternative its action (e.g. "Search") is unknown to screen-reader and speech-input users.

How to fix#

Add an alt attribute (or aria-label) describing what the button does, not what it looks like.

Example#

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

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

Example#

<input type="image" src="go.png" alt="">

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

An authored alt="Submit" is a valid accessible name — only the browser default (no alt at all) fails.

WCAG success criteria#

1.1.1 Non-text Content — Level A#

All non-text content (images, icons, controls) needs a text alternative that conveys the same purpose, or be marked decorative so assistive tech can ignore it.

Understanding 1.1.1

4.1.2 Name, Role, Value — Level A#

Every UI component must expose a correct name, role, and (where relevant) state/value to assistive technology.

Understanding 4.1.2

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549 Section 508 Trusted Tester ACT

References#

• W3C — Functional Images