Image input buttons must have alternative text

WCAG 1.1.1
Non-text Content

Content available in English only.

Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).

These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.

Describe the action, not the picture.

Why this matters and how to fix it

Why this matters

Screen reader users need alternative text to understand what an image-based button does. Without an `alt` attribute, the control is announced only as 'button' or 'graphic', providing no indication of its action. This can make critical functionality inaccessible.

How to fix this issue

Give each `<input type="image">` a meaningful `alt` attribute that describes the action it performs. If the control is decorative and not interactive, do not use `type="image"` — use CSS background images instead.

Automated detection · Manual review recommended

Developer guidance

Do not rely on the image filename or surrounding text to convey purpose. The alt text should describe the action, not the visual appearance (e.g., use `alt="Search"`, not `alt="Magnifying glass icon"`). In component libraries, require an explicit accessible name for image-based buttons.

Code examples

Incorrect Implementation

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

Correct Implementation

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

Real-World Examples

Before

<input type="image" src="download.svg"> <!-- Screen reader: 'button' → no meaning -->

After

<input type="image" src="download.svg" alt="Download file"> <!-- Screen reader: 'Download file, button' → clear purpose -->

CSS Example (Guidance)

/* Convert decorative image-button into CSS-based styling */
button.download {
  background: url(download.svg) no-repeat center;
  width: 32px;
  height: 32px;
}
<button class="download" aria-label="Download file"></button>

Manual testing

  1. 1. Turn on a screen reader (NVDA, VoiceOver, JAWS, or TalkBack).
  2. 2. Navigate to the image-based button using Tab or Arrow keys.
  3. 3. Listen to what is announced:
  4. • Expected: The action is described clearly (e.g., 'Search, button', 'Download file, button').
  5. • Failure: The screen reader announces only 'button', 'graphic', or reads the file name.
  6. 4. Inspect the element in DevTools → Accessibility pane and confirm the Accessible Name is the action.
  7. 5. If the control is visual-only or purely decorative, replace `input type="image"` with a `<button>` + CSS background and add an accessible name.
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance