Description

A text equivalent for every non-text element must be provided.

Scope

This standard applies to input buttons. If input buttons are not in use, the provision is satisfied.

Explanation

Typical HTML-generated form buttons are rendered as gray rectangles containing whatever text you code into the tag. However, some developers prefer to use a custom-designed graphical image for aesthetics reasons. A graphical image used as a form input button is treated exactly as any other graphic or button, in that assistive technology cannot identify its intended function unless an alt attribute is included.

If necessary, search through the page's source code for an <input> tag that contains the attribute type of "image" and an src attribute that contains a URL to a graphical image (e.g. <input type="image" src="button.gif" name="submit_button" alt="search">).

Procedure

Provide a descriptive text equivalent for each input button that conveys meaning.

Guidelines

For each graphical image tag used in place of a form button, add an alt attribute to describe it.

Alt attribute descriptions for images used as form input buttons should, at the very least, list the same functionality that is displayed on the graphical image. However, because this graphical image leads to a function, it is strongly recommended that a brief description of what will happen when the user clicks on the button is included in the alt attribute.

If necessary, search through the page's source code for an <input> tag that contains the attribute type of "image" and an src attribute that contains a URL to a graphical image (e.g. <input type="image" src="button.gif" name="submit_button" alt="search">).

Source

1 TAC 206.50 • 1 TAC 206.70 • Section 508 1194.22(a)

To Learn More

See WebAim’s Creating Accessible Images, including the section on icons.