Ensure <input type="image"> elements have alternative text
This rule checks that each image button element has a non-empty accessible name.
Autoren: Anne Thyme Nørregaard
Finanzierung: WAI-Tools
This rule applies to any input element with a type attribute value of image, and that is included in the accessibility tree.
Each target element has an accessible name that is neither empty (""), nor the default name for this element (localized version of "Submit Query").
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.
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.
The image button has an accessible name through the alt attribute.
<input type="image" src="/test-assets/shared/search-icon.svg" alt="Search" />
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" />
The image button has an accessible name through the title attribute.
<input type="image" src="/test-assets/shared/search-icon.svg" title="Search" />
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>
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" />
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="" />
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" />
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>
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" />
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>
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" />
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;" />