A: Image buttons must have alternative text (WCAG 1.1.1 + 4.1.2) 

• Meaning
• Impact
• Recommendation
• Examples

This means

Buttons of the type input type="image" require an accessible name. This usually comes from the alt attribute. Without alt text or with empty alt text, the function is not recognizable for screen readers. Background images do not provide a name.

Impact

Without a clear name, users do not know which action will be triggered. Processes are aborted and a WCAG violation is threatened.

Recommendation

• Always set a descriptive alt text that names the action, for example "Start search".

• If no visible text is possible, aria-label can provide the name. The alt attribute remains required.

• Do not use input type="image" for decorative images. Instead, use <button> and embed the image as purely decorative graphics.

Example

Problematic

<input type="image" src="/icons/search.png">
<input type="image" src="/icons/next.svg" alt="">

Better

<input type="image" src="/icons/search.png" alt="Start search">
<input type="image" src="/icons/next.svg" alt="Proceed to next step">
 
<!-- Alternative with aria-label (alt remains technically necessary) -->
<input type="image" src="/icons/cart.svg" alt="" aria-label="Open shopping cart">
 
<!-- Preferably with button -->
<button type="submit" aria-label="Start search">
  <img src="/icons/search.png" alt="">
</button>

Related WCAG criterion:
WCAG 1.1.1 - Non-text Content
WCAG 4.1.2 – Name, Role, Value