Digital Accessibility Knowledge Base

input-image-alt

Image buttons must have alternate text

Who might be affected
Screen Reader
Voice Control

Description

HTML <input /> based button elements require an accessible name so that screen readers can accurately read and convey their meaning and purpose to the user. The image type is different from the rest of the input buttons because it can not use the value attribute to assign an accessible name, and it uses the alt attribute instead.

Quick Fixes

Give the input buttons an accessible name in one of the following techniques:
1<!-- Use the alt attribute -->
2<input type="image" alt="submit"
3       src="/path/to/button.png" />
4

5<!-- Use "aria-label" -->
6<input type="image" aria-label="submit"
7       src="/path/to/button.png" />
8

9<!-- Use "aria-labelledby" -->
10<p id="submit-title">Submit</p>
11<input type="image" aria-labelledby="submit-title"
12       src="/path/to/button.png" />
13

See also input-button-name

How Users Are Affected

The accessible name is used by assistive technologies to label, announce and trigger actions of interactable UI elements (e.g. buttons, links, input fields). When interactable elements don’t have a valid accessible name, assistive technologies lack the hook they are designed to use to parse and read the content accurately.

WCAG Success criteria

This issue might cause elements to fail one or more of the following Success criteria:
4.1.2 Name, Role, Value (A)