Images Rule

Image buttons must have alternative text input-image-alt

An input with type="image" is a submit button that looks like a picture, often a magnifying glass or an arrow. Because the picture is the whole button, its alt attribute is the button's name. Leave it off and the button is announced as button with nothing to say what pressing it will do.

WCAG 2.2 A 1.1.1 Non-text Content 4.1.2 Name, Role, Value

Websight reports this as Image buttons must have alternative text

Who it affects

Someone searching a library catalogue with a screen reader types a title, tabs to the magnifying-glass button and hears only button. They cannot tell whether it searches, clears or closes.

Someone with a tremor using voice control would say click search, but the button has no name to match, so nothing happens.

Someone whose images did not load sees a blank or broken button with no fallback text, so they do not know it is the search button at all.

Broken versus fixed

Both examples are live and rendered in a sandboxed frame. The broken one is deliberately broken.

Broken

Tab to the blue button with a screen reader on and it announces: button. Or, in some browsers, the word Submit, which is not what the page shows.

Fixed

Announced: Search, button. The listener knows exactly what Enter will do.

Show the markup behind both examples
Broken
<style>body{font-family:system-ui;padding:16px;margin:0}form{display:flex;gap:8px;align-items:center}input[type=text]{padding:8px;font-size:15px;border:1px solid #888;border-radius:6px;width:220px}input[type=image]{width:40px;height:40px;border-radius:6px}</style>
<form>
  <label for="q">Search the catalogue</label>
  <input id="q" type="text">
  <input type="image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' rx='6' fill='%231e5aa8'/%3E%3Ccircle cx='17' cy='17' r='7' stroke='white' stroke-width='3' fill='none'/%3E%3Cline x1='22' y1='22' x2='30' y2='30' stroke='white' stroke-width='3'/%3E%3C/svg%3E">
</form>
Fixed
<style>body{font-family:system-ui;padding:16px;margin:0}form{display:flex;gap:8px;align-items:center}input[type=text]{padding:8px;font-size:15px;border:1px solid #888;border-radius:6px;width:220px}input[type=image]{width:40px;height:40px;border-radius:6px}</style>
<form>
  <label for="q">Search the catalogue</label>
  <input id="q" type="text">
  <input type="image" alt="Search" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' rx='6' fill='%231e5aa8'/%3E%3Ccircle cx='17' cy='17' r='7' stroke='white' stroke-width='3' fill='none'/%3E%3Cline x1='22' y1='22' x2='30' y2='30' stroke='white' stroke-width='3'/%3E%3C/svg%3E">
</form>

Test it by hand in two minutes

  1. Find any button that is a picture rather than text: a search icon, an arrow, a shopping trolley. Right click it and choose Inspect.
  2. If the element is input type="image", check it has an alt attribute with a short action word such as Search or Go.
  3. Press Tab until the button has focus with VoiceOver (Cmd+F5 on a Mac) or NVDA running. You should hear the alt text followed by button, not just button or Submit.
  4. Say the alt text out loud as a command. If click search makes sense, the name is right.

The fix

Before
<input type="image" src="magnifier.png">
After
<input type="image" src="magnifier.png" alt="Search">

Name the action, not the picture. The alt should say Search, not Magnifying glass icon. Keep it to one or two words.

Replace the image input with a real button

Before
<input type="image" src="arrow.png">
After
<button type="submit">
  <img src="arrow.png" alt="">
  Continue
</button>

A button element with visible text is easier for everyone, and the icon inside can then be decorative with alt="".

Icon button named with aria-label

Before
<input type="image" src="trolley.svg" alt="">
After
<input type="image" src="trolley.svg" alt="Add to basket">

An empty alt is wrong here. The button does something, so it needs a name. Use alt rather than aria-label on this element, since alt also shows if the image fails.

Common mistakes

  • Describing the picture (alt="magnifying glass") instead of the action (alt="Search").
  • Using alt="" because the icon looks decorative; a button is never decorative.
  • Relying on a title attribute for the name, which is skipped by many screen readers and never shown on touch screens.
  • Putting the name in a nearby heading or placeholder and assuming it carries over to the button.
  • Using the file name (alt="btn_search_32px.png").

WCAG criteria this rule maps to

axe-core tags this rule as WCAG 2.2 level A. It is one of the checks for:

The scanner can see an input type="image" with no alt, an empty alt, and no aria-label or aria-labelledby to fall back on. It cannot tell whether the name describes what the button actually does. Automated tools find only part of the accessibility problems on a page; a pass on this rule is not a pass on the criterion.

A Images must have alternative text image-alt Every img element needs an alt attribute. A Input buttons must have discernible text input-button-name An input element with type="submit", type="button" or type="reset" draws a button whose text comes from its value attribute. A Elements with role="img" must have alternative text role-img-alt Adding role="img" to a div, span or any other element tells assistive technology to treat it as a single picture.

Scan your own page for this and 63 other checks

Open any page in Chrome, click Websight, and get a score out of 100 with every issue explained and a draft fix snippet per element.

Add Websight to Chrome

Free scans, no account, nothing leaves your computer. Automated tools find only part of the problems; the extension says so on every report.