Audit input-image-alt

Applicability

This rule applies to any input element with a type attribute value of image, and that is included in the accessibility tree.

Expectation

Each target element has an accessible name that is neither empty (""), nor the default name for this element (localized version of "Submit Query").

Background

Unlike for img elements, an empty alt attribute (alt="") does not make an image button decorative; image buttons have a button role and are therefore exposed as interactive elements. An empty alt attribute therefore does not provide a "usable string" for image buttons and the computation defaults to other means of providing a name, as defined in input type="image" Accessible Name Computation algorithm.

Assumptions

• This rule assumes that all image buttons are user interface components as defined by WCAG 2.
• This rule assumes that the default name for image buttons ("Submit Query"), as defined by the HTML Accessibility API Mapping, is never descriptive.

Accessibility Support

The input type="image" Accessible Name Computation algorithm uses the first defined attribute, even if the attribute has an empty value. In contrast, some user agents and assistive technologies ignore empty attributes.

Related rules

• Button has non-empty accessible name

Bibliography

• Understanding Success Criterion 1.1.1: Non-text Content
• Understanding Success Criterion 4.1.2: Name, Role, Value
• WCAG Technique H36: Using alt attributes on images used as submit buttons
• HTML Accessibility API Mappings for computing the accessible name of image buttons

Test Cases

Passed

Passed Example 1

The image button has an accessible name through the alt attribute.

<input type="image" src="/test-assets/shared/search-icon.svg" alt="Search" />

Passed Example 2

The image button has an accessible name through the aria-label attribute.

<input type="image" src="/test-assets/shared/search-icon.svg" aria-label="Search" />

Passed Example 3

The image button has an accessible name through the title attribute.

<input type="image" src="/test-assets/shared/search-icon.svg" title="Search" />

Passed Example 4

The image button has an accessible name through the aria-labelledby attribute.

<input type="image" src="/test-assets/shared/search-icon.svg" aria-labelledby="id1" />
<div id="id1">Search</div>

Failed

Failed Example 1

The image button element has an accessible name equal to the default "Submit Query". The name attribute can not be used to provide an accessible name.

<input type="image" name="search" src="/test-assets/shared/search-icon.svg" />

Failed Example 2

The image button has an empty alt attribute, and no other attributes that can give it an accessible name, hence its name is the default "Submit Query".

<input type="image" src="/test-assets/shared/search-icon.svg" alt="" />

Failed Example 3

The image button has an aria-labelledby attribute, but the referenced element does not exist. This gives the button the default accessible name of "Submit Query".

<input type="image" src="/test-assets/shared/search-icon.svg" aria-labelledby="non-existing" />

Inapplicable

Inapplicable Example 1

The button element is not an image button. Success Criterion 1.1.1 Non-text Content can not fail text buttons. Only non-text content is applicable.

<button>My button</button>

Inapplicable Example 2

The input element with the type attribute value of button is not an image button. Success Criterion 1.1.1 Non-text Content can not fail text buttons. Only non-text content is applicable.

<input type="button" value="My button" />

Inapplicable Example 3

The button element is tested separately from the img element. Success Criterion 4.1.2 Name, Role, Value is applied to the button, whereas the image is tested under Success Criterion 1.1.1 Non-text Content

<button><img src="/test-assets/shared/search-icon.svg" alt="Search" /></button>

Inapplicable Example 4

The img element is not a user interface component, and so is not tested for Success Criterion 4.1.2 Name, Role, Value.

<img src="/test-assets/shared/w3c-logo.png" alt="W3C logo" />

Inapplicable Example 5

The image button is ignored by assistive technologies because it is not included in the accessibility tree. These are not required to have an accessible name. If at some future state of the page the element gets included in the accessibility tree, an accessible name will be necessary.

<input type="image" src="/test-assets/shared/search-icon.svg" style="display: none;" />