Success Criterion 2.5.3 Label in Name

For user interface components with labels that include text or images of text, the name contains the text that is presented visually.

Note

A best practice is to have the text of the label at the start of the name.

WCAG Level
A
WCAG Versions
2.1
2.2

What the issue is

The use of the "aria-labelledby" attribute is a powerful way to provide accessible names for buttons, especially when text alone does not convey enough context, or when aiming to combine text from multiple sources. 

What the issue is

When the visible label text of a button does not match its accessible name (the name exposed to assistive technologies), it can lead to confusion and inconsistency for users relying on screen readers or other assistive technologies. An example of this issue is when a button labeled "Submit Form" on the screen has an accessible name of "Go" due to a mismatch in the `aria-label` attribute.

What the issue is

Buttons that are inadequately labeled or utilize generic text such as "click here" or "submit" without providing context of the action being performed can significantly reduce accessibility. Users, especially those relying on screen readers, may not understand the purpose of the button or the action it initiates. This lack of clarity can lead to confusion and impede the ability to navigate and use a website effectively.