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.

• 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