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

Link to The visible 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-visible-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.

When using icons as visible labels, ensure that you either use a universally recognizable icon (such as a magnifying glass for a search button) or provide an additional label to clarify the icon.

Code Examples

Good Examples:

Recognizable icon plus aria-label:

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

Unusual icon with button inner-text label:

<button id="vit-c-button">
  <span class="erlenmeyer-flask-icon"></span>
  <span>Show chemical formula for Vitamin C</span>
</button>

Failure Example:

Visible label not descriptive (aria-labels specify foods, but the icon for stroopwafel may not be understood by sighted users):

<fieldset>
  <legend>Choose a favorite dessert:</legend>
  <p>
    <input type="radio" id="stroopwafel" aria-label="Stroopwafel">
    <label for="stroopwafel"><span class="fas fa-stroopwafel fa-2x"></span></label>
  </p>
  <p>
    <input type="radio" id="cookie" aria-label="Cookie">
    <label for="cookie"><span class="fas fa-cookie fa-2x"></span></label>
  </p>
  <p>
    <input type="radio" id="cheese" aria-label="Cheese">
    <label for="cheese"><span class="fas fa-cheese fa-2x"></span></label>
  </p>
  <p>
    <input type="radio" id="bacon" aria-label="Bacon">
    <label for="bacon"><span class="fas fa-bacon fa-2x"></span></label>
  </p>
</fieldset>

How To Fix

Fix this issue by using some of the following:

Ensure that the visual 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.
Provide a descriptive visible label for the control using the <label> element.
Provide a descriptive visible label and associate it with the form using aria-labelledby.
Use a universally recognized icon and an aria-label.
Use a less common icon, and an additional visible, descriptive, programatically associated label.

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 benefit from the information.
Use uncommon icons that may be confusing as the only visual label.