input-button-name
Ensures input buttons have discernible text.
Description
In order to ensure that input buttons have readable text, the input-button-name rule separates functionality from button names.
Why is it important?
When an input button lacks an accessible name, users of assistive technologies are unable to determine what it is intended to do.
Examples
-
Success:
- The input button’s name is made available by the
aria-label
attribute. The function of the switch is obvious to both sighted and non sighted users.
- The input button’s name is made available by the
-
Failure:
- An input button displays a picture using CSS. The button’s function can be deduced from the image by sighted users. However, users of assistive technology are unable to understand the button’s function because it lacks an accessible name.
How to fix?
Ensure an accessible name is provided for each input button using ‘title’ attribute, non-empty ‘value’ attribute, ‘aria-label’ or ‘aria-labelledby’ attributes.
Tags
cat.name-role-value, wcag2a, wcag412, section508, section508.22.a, ACT
References
- WCAG 4.1.2: Name, Role, Value
- Deque University: input-button-name
- Accessibility Insights: input-button-name
- Evinced Digital Accessibility Knowledge Base: input-button-name
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
Thank you for your valuable feedback!