button-name

Ensures buttons have discernible text

Description

All button elements must have accessible names.

For screen reader users, buttons must have legible text to communicate the location, goal, function, or activity in detail.

Why is it important?

An accessible name is a word or phrase written in the code for assistive technologies to link it to a particular UI object. Now, you can refer to the UI object by accessible name instead of type in assistive technologies. When a button lacks an accessible label, assistive technology users cannot determine what it does.

Screen reader users cannot understand the function of components with role="link", role="button", or role="menuitem" that lack an accessible name.

Examples

• Success:
  • Visible inner text is present to give the button an accessible name.
• Failure:
  • Button contains an image to convey its purpose visually but does not have an accessible name.

How to fix?

Ensure all buttons have a discernible, accessible name using title, aria-label, aria-labelledby or use inner text available to assistive technologies.

Tags

cat.name-role-value, wcag2a, wcag412, section508, section508.22.a, ACT

References

• WCAG 4.1.2: Name, Role, Value
• Deque University: button-name
• Accessibility Insights: button-name
• Evinced Digital Accessibility Knowledge Base: button-name