What does this accessibility issue mean?
Accessibility issue summary: button text is indiscernible
If buttons on your website do not have a name or accessible text that describes the button’s purpose or destinaiton, it can cause confusion for assistive technology users.
Buttons without discernible or accessible text violate WCAG Level A rules. This accessibility issue is related to WCAG Level A rules around Name, Role, Value.
Solution:
Ensure buttons have discernible text that describes their purpose, destination, or action.
Example HTML violation: Indiscernible button text (WCAG Level A Issue)
<button></button>The above HTML violates the button-name accessibility rule because it does not provide an "accessible name" for the button. An accessible name is typically added as text within the button tag or through the use of the aria-label attribute. Without an accessible name, users with disabilities may not be able to understand the purpose or function of the button, which hinders their ability to navigate and interact with the website effectively.
How to fix "Indiscernible button text (WCAG Level A Issue)" issue
<button aria-label="Submit">Submit</button>In this correction, we've added text "Submit" inside the <button> tag and also added aria-label="Submit" which will give the button an accessible name that can be used by screen reader software. </button>
The W3C Web Accessibility Initiative (WAI) explains the importance and the rule of having a non-empty accessible name for a button.
-
An accessible name allows users of assistive technologies to understand the function of the button.
-
An accessible name can be provided by adding text between the opening and closing tags of the button element.
-
The "aria-label" attribute can be used to provide an accessible name when traditional mechanisms are not suitable or desired.
For related rules and samples about accessible names, you may also want to look at the rules provided by the W3C.
