Additional Content in Form Labels

Screen reader interaction with forms usually happens in focus mode. So if there are any non-interactive elements (like a paragraph) in the form, they are prone to be missed. To prevent this, they need to be attached specifically to the form controls. There are several ways to achieve this goal.

HTML allows putting various content into a <label>. On one hand, it is possible this way to put a form control right into its label, which even removes the need for the for attribute.

On the other hand (which is more interesting to us), it is also possible to put additional content into it.

This solution looks very easy and as such is tempting: it does not only solve our requirement, but it also enlarges the clickable area of the label for mouse and touch screen users (clicking on the label places the focus into its control).

Working Example

Gender

Explanation

Sadly, browser support is buggy:

  • In Firefox this works like a charm (both JAWS and NVDA).
    • In the example, the radio buttons for gender are correctly announced, like “Gender grouping. Male. You may be this if you like beer…”.
  • In Internet Explorer, things are messed up when elements are packed into a <fieldset>/<legend> structure.
    • In the example, the radio buttons for gender are both announced like “Gender. Name. Please enter your full real name.”

What a bummer. This is why we recommend separating form controls and their <label> elements strictly and using the for attribute to connect them.

And for associating additional content to a control (“Please enter…”), we advise sticking to better solutions, at least if you are using <fieldset>/<legend> structures.

Code

<form>
  <label class="control">
    <div class="label">
      Name
    </div>
    <input type="text" />
    <div class="description">
      Please enter your full real name.
    </div>
  </label><label class="control">
    <div class="label">
      Biography
    </div>
    <textarea></textarea>
    <div class="description">
      Please tell us something about your history.
    </div>
  </label>
  <fieldset>
    <legend>Gender</legend><label class="control"><input name="gender" type="radio" />
      <div class="label">
        Male
      </div>
      <div class="description">
        You may be this if you like beer, gadgets, and Playboy Magazine.
      </div>
    </label><label class="control"><input name="gender" type="radio" />
      <div class="label">
        Female
      </div>
      <div class="description">
        You may be this if you like prosecco, make up, and Playgirl Magazine.
      </div>
    </label>
  </fieldset>
  <label class="control">
    <div class="label">
      Age Group
    </div>
    <select>
      <option>
        0 to 9 Years
      </option>
      <option>
        10 to 19 Years
      </option>
      <option>
        20 to 29 Years
      </option>
      <option>
        30 to 39 Years
      </option>
      <option>
        40 to 49 Years
      </option>
      <option>
        50 to 59 Years
      </option>
      <option>
        60 to 69 Years
      </option>
      <option>
        70 to 79 Years
      </option>
      <option>
        80 to 89 Years
      </option>
      <option>
        90 to 99 Years
      </option>
    </select>
    <div class="description">
      Tell us how old you are.
    </div>
  </label><label class="control"><input type="checkbox" />
    <div class="label">
      I accept the following terms and conditions:
    </div>
    <ul>
      <li>
        I entered all data truthfully
      </li>
      <li>
        I'm a good person
      </li>
      <li>
        I won't vote for Donald Trump next time
      </li>
    </ul>
  </label>
</form>
.control, fieldset {
  margin: 6px 0;
}

label {
  display: block;
}

.label {
  display: inline-block;
  width: 120px;
  vertical-align: top;
}

input + .label {
  width: auto;
}

.description {
  margin-top: 0;
  margin-left: 120px;
}

fieldset .description {
  margin-left: 22px;
}

ul {
  margin-top: 0;
}
NIL