Input-image-alt - Accessibility Insights

Trang chủ » Html Alt Text For Buttons » Input-image-alt - Accessibility Insights

Có thể bạn quan tâm

Back to Info and Examples for Accessibility Insights for Web

input-image-alt

Image buttons must have alternative text.

Why it matters

An image button is an <input> element with type="image". Alternative text is a word or phrase that (1) is coded in a way that assistive technologies can associate it with a specific non-text object, and (2) conveys the same information as the non-text object.

Because assistive technologies can’t interpret an image directly, they rely on alternative text to communicate the image button’s purpose. When an image button doesn’t have alternative text, people who use assistive technologies have no way of knowing its purpose.

How to fix

Provide alternative text that describes the input button’s purpose using one of the following methods:

Good

  • title attribute

Better

  • aria-label attribute
  • aria-labelledby attribute

Best

  • alt attribute

For tips on writing good text alternatives, see Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content.

Example

 

Fail

This image button has no alternative text. People who use assistive technologies can't determine its purpose.<input type="image" src="envelope.png" name="new" height="50" width="150"> 

Pass

An alt attribute describes the image button's purpose. Everyone can tell what the button does.<input type="image" src="envelope.png" name="new" alt="Create a new message" height="50" width="150">

About this rule

This rule passes if ANY of the following is true:

  • Element has a non-empty alt attribute
  • Element has a non-empty aria-label attribute
  • Element has an aria-labelledby attribute that references elements that are visible to screen readers
  • Element has a non-empty title attribute

More examples

Understanding Success Criterion 1.1.1: Non-text Content

Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content

Understanding Success Criterion 4.1.2: Name, Role, Value

Từ khóa » Html Alt Text For Buttons