EA-R33
Image button missing accessible name
This rule is an error and tests the following accessibility guidelines:
This is an error that should be corrected manually.
Description
This rule checks that each image button element has a non-empty accessible name.
Explanation
A graphical input requires (<input type="image">) alternative text so that screen readers can reflect its purpose.
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").
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
There is a known combination of a popular browser and assistive technology that does not by default support title as an accessible name.
Background
Related Rules
Tip
Add a meaningful alt or aria attribute that describes the content and purpose of this image.
Examples
Passed
Example 1 - Passed
The image button has an accessible name through the alt attribute.
Example 2 - Passed
The image button has an accessible name through the aria-label attribute.
Example 3 - Passed
The image button has an accessible name through the title attribute.
Example 4 - Passed
The image button has an accessible name through the aria-labelledby attribute.
Failed
Example 1 - Failed
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.
Example 2 - Failed
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".
Example 3 - Failed
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".
Inapplicable
Example 1 - Inapplicable
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.
Example 2 - Inapplicable
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.
Example 3 - Inapplicable
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
Acknowledgments
This document includes material copied from or derived from https://www.w3.org/WAI/standards-guidelines/act/rules/59796f/. Copyright © 2023 W3C® (MIT, ERCIM, Keio, Beihang).
