label-content-name-mismatch

Ensure that the visible labels of interactive elements either match their accessible names or are included within them to improve accessibility.

Description

Visible labels of interactive elements must either match or be included within their corresponding accessible names. This practice helps users who rely on assistive technologies, such as screen readers and speech recognition software, by helping them navigate and interact with web content more effectively.

When the visible text label of an interactive element doesn’t match its accessible name (e.g., aria-label), it can confuse users. For example, speech recognition users might say the visible label to activate a button, but if the accessible name differs, the command might fail. Screen reader users also need accurate accessible names to understand and use interface components effectively.

Example

In the following example, the aria-label (“Proceed”) doesn’t match the visible text (“Next Page”), which can confuse assistive technology users. This example violates the label-content-name-mismatch rule.

The following sample code corrects the issue in the earlier example by using the same aria-label and visible text (“Next Page”).

How to fix?

• Match the labels: Ensure that the accessible name fully includes the visible text label.
• Start with the visible text: Use the visible label at the beginning of the accessible name to create consistency.
• Test with assistive technologies: Verify that screen readers and voice commands work as expected.

Reference

• WCAG 2.5.3: Label in Name (Level A)