input-image-alt-quality

<input type="image"> text alternative must be appropriate (manual review)

manualWCAG 1.1.1 (A)confidence: mediumseverity: minorperceivable

Flags <input type="image"> elements with a non-empty text alternative (alt, aria-label, aria-labelledby or title) for human review of appropriateness. Says when the name looks like a file name, a web address, a placeholder, an "image of" opening or is very long.

Applies to. Applies to <input type="image"> elements that get a non-empty text alternative from any source: aria-labelledby (resolving to text), aria-label, alt or title. An element whose alt is present but empty is left to input-image-alt-decorative, which asks about that case. The element must be included in the accessibility tree, and role="presentation"/"none" takes it out of scope unless it is focusable, which restores its role.

Expectation. Human review is required to confirm that the provided text alternative is accurate and appropriate. Each occurrence lists every source present (data.details.sources), so the reviewer checks each one. The name is also checked for what the img-alt-quality rule checks in an alt (helpers.getTextAlternativeSignal): a file name, a web address, only symbols, a placeholder or generic word, an opening that says it is an image, or more than 150 characters. Such a name gets its own summary and hint; the finding stays cantTell.

What a finding reports.

  • reasonCode: TEXT_ALTERNATIVE_REVIEW, whatever the signal.
  • name: the control's text alternative as announced, from the first source that gives one.
  • sources: every source that gives a non-empty text alternative, in the order they are used for the name. One item is aria-labelledby, aria-label, alt or title.
  • altSignal, and length and limit for too-long: what made the name look like something other than a description, as for img-alt-quality. Absent when the name is ordinary.
  • alt (a control with a non-empty alt): the alt text.

These data.details fields help to read and reproduce a finding. Apart from reasonCode and the few fields Output schema names as stable, they are not a stable contract: a field may be renamed or dropped in a minor release, so don’t build on them.

Examples

can't tell
<input type="image" src="submit.png" alt="Submit order">

Non-empty alt is present on this image button, worth confirming "Submit order" matches what the button actually does. An image button named only by aria-label, aria-labelledby or title is asked about too.

n/a
<input type="image" src="submit.png" alt="" title="Submit order">

Empty alt on a functional control is input-image-alt-decorative's question, not this rule's.

How to check

When this rule can’t decide, it reports cantTell and leaves the question to a person. Each question it can ask is listed here under its reason code, with the steps to answer it. A finding carries the same steps as howToCheck, in the scan’s language. See Output schema.

TEXT_ALTERNATIVE_REVIEW

  1. Find the image button the report names and read the name it gives; check each listed source (alt, aria-label, aria-labelledby, title).
  2. Press the button or read the form to learn what it does.
  3. Decide whether the announced name says what the button does, and that the other sources do not contradict it.

Pass. The name states the button's action, such as "Submit order" or "Search".

Fail. The name does not say what the button does, for example a file name, address, generic word or symbols, which fails WCAG 1.1.1 (H36, F30).

View source