The programmatic label does not convey the purpose of the control. The programmatic label and visual label do not convey consistent information.

Link to The programmatic label does not convey the purpose of the control. The programmatic label and visual label do not convey consistent information. copied to clipboard

Rule ID:: label-programmatic-not-descriptive
User Impact:: Serious
WCAG :: 2.4.6.b

Rule

Labels MUST be meaningful.

Background

When form fields or interactive controls have vague or misleading labels, people may not understand the type of data expected or what a control will do if activated. This is especially true for people with cognitive disabilities and people who are blind and use a screen reader. Both the visible and the programmatic label must sufficiently describe the purpose of the form field or control. Descriptive labels give people confidence when filling out a form or using interactive content and help prevent mistakes.

To fix this issue, make sure that the visible and programmatic labels are both descriptive and consistent with each other. This issue can come up, for example, when code is reused while creating a form, but aria-labels, ids, or aria-labelledby values were not updated correctly.

Code Examples

Good Example:

Recognizable icon plus aria-label:

<input type="text" aria-label="Search">
<button id="search-button" aria-label="Search">
  <span class="search-icon"></span>
</button>

Failure Example:

Programmatic label does not match icon:

<input type="text" aria-label="Search">
<button id="search-button" aria-label="Go">
<span class="search-icon"></span>
</button>

How To Fix

To fix this issue:

Ensure that the programmatic label for the control correctly conveys the purpose of the control.
Check that the information conveyed by the visual label and the programmatic label match.
If extra description is needed for non-sighted users, such as information about each part of a 3 part Social Security Number, use the aria-label to explain that information.

Don't do this:

Use non-descriptive labels that don't give users enough information.
Provide additional description only to non-sighted users through the aria-label when sighted users would also benefit from the information.