3.3.2 Labels or Instructions

Introduction¶

This article provides information about the Acquia Optimize check:

• Labels or instructions are provided when content requires user input.

What¶

When a webpage includes input fields such as text boxes, dropdowns, or checkboxes that require user interaction, visible labels or instructions must always be present to describe the purpose of the input. These labels help users understand what information is expected and improve accessibility for assistive technologies.

This check ensures that:

• Every input field has a visible label that does not disappear when users interact with the field.
• The label provides clear and descriptive information about the required input.
• If additional instructions are needed, they are visible and persistently available to the user.

Why¶

This section provides information about why this check is important and provides some examples.

Why is this important?¶

• Improves accessibility: Users who rely on assistive technologies, such as screen readers, need properly labeled inputs to understand what to enter.
• Enhances usability: All users can complete forms accurately.
• Prevents confusion and input errors: Users are less likely to enter incorrect information or struggle to complete the form.

Examples¶

Pass examples¶

• The label is explicitly associated with an input field

  copy

  <label for="email">Email Address:</label>
  <input type="email" id="email" name="email">

  • Why this works:
    • The label is always visible and clearly describes the expected input.
    • The for attribute correctly associates the label with the input field.

• The input field has a persistent placeholder text and instructions

  copy

  <label for="phone">Phone Number:</label>
  <input type="tel" id="phone" name="phone" placeholder="Format: 123-456-7890">

  • Why this works:
    • The label remains visible at all times.
    • The placeholder text provides additional guidance but does not replace the label.

• Grouped radio buttons with a fieldset and legend

  copy

  <fieldset>
    <legend>Select your preferred contact method:</legend>
    <input type="radio" id="email" name="contact" value="email">
    <label for="email">Email</label>
    <input type="radio" id="phone" name="contact" value="phone">
    <label for="phone">Phone</label>
  </fieldset>

  • Why this works:
    • The legend provides a clear description of the group of inputs.
    • Each radio button has an associated visible label.

Fail examples¶

• Missing a visible label

  copy

  <input type="text" name="username">

  • Issue:
    • The input field has no label.
    • Screen readers cannot announce the purpose of the field.

  • Fix:

    copy

    <label for="username">Username:</label>
    <input type="text" id="username" name="username">

    • Users can see the label and screen readers can correctly announce it.

• Placeholder text used instead of a label

  copy

  <input type="text" name="email" placeholder="Enter your email">

  • Issue:
    • The placeholder disappears when users start to type.
    • Some users with low vision or cognitive disabilities may struggle to remember what they were supposed to enter.

  • Fix:

    copy

    <label for="email">Email Address:</label>
    <input type="email" id="email" name="email" placeholder="[email protected]">

    • The label remains visible at all times, and the placeholder only provides extra context.

• Labels that disappear on focus

  copy

  <input type="password" name="password" aria-label="Password">

  • Issue:
    • The label is not visible and is only accessible to screen readers.
    • Users who do not use screen readers have no clear instruction.

  • Fix:

    copy

    <label for="password">Password:</label>
    <input type="password" id="password" name="password">

    • The label is visible to all users.

How¶

This section provides instructions on how to review and fix the issue.

How to review it¶

1. Check all input fields to ensure that they have a visible label:
   • Labels must not disappear when the user starts typing.
   • Placeholder text alone is not a sufficient label.
2. Ensure that labels describe the expected input clearly:
   • Avoid vague labels such as Enter value. Be specific about the required information.
3. Test the form with a screen reader:
   • Ensure that labels are correctly associated with input fields and announced properly.

How to fix it¶

• Always provide a <label> element for each input field and associate it with the for attribute.

  • Example:

    copy

    <label for="fullname">Full Name:</label>
    <input type="text" id="fullname" name="fullname">

• Use fieldsets and legends for grouped inputs, for example radio buttons or checkboxes.

  • Example:

    copy

    <fieldset>
      <legend>Choose your gender:</legend>
      <input type="radio" id="male" name="gender" value="male">
      <label for="male">Male</label>
      <input type="radio" id="female" name="gender" value="female">
      <label for="female">Female</label>
    </fieldset>

• Ensure that instructions are visible at all times and do not rely only on placeholders.

Additional resources¶