Associating Content to Form Inputs Using Multiple 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.

It is perfectly valid HTML to associate more than a single <label> element to an input. But Internet Explorer sadly connects only one of them, resulting in incomplete desktop screen reader announcements.

So the following is not a recommended solution:

Working Example

Gender

Code

<form>
  <div class="control">
    <label for="full_name">Full name</label><input id="full_name" type="text" /><label class="description" for="full_name">Please tell us your name.</label>
  </div>
  <div class="control">
    <label for="biography">Biography</label><textarea id="biography"></textarea><label class="description" for="biography">Please tell us something about your history.</label>
  </div>
  <fieldset>
    <legend>Gender</legend>
    <div class="control">
      <input id="gender_male" name="gender" type="radio" /><label for="gender_male">Male</label><label class="description" for="gender_male">You may be this if you like beer, gadgets, and Playboy Magazine.</label>
    </div>
    <div class="control">
      <input id="gender_female" name="gender" type="radio" /><label for="gender_female">Female</label><label class="description" for="gender_female">You may be this if you like prosecco, make up, and Playgirl Magazine.</label>
    </div>
  </fieldset>
  <div class="control">
    <label for="age_group">Age Group</label><select id="age_group">
      <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><label class="description" for="age_group">Tell us how old you are.</label>
  </div>
  <div class="control">
    <input id="accept_agbs" type="checkbox" /><label for="accept_agbs">I accept the following terms and conditions:</label><label class="description" for="accept_agbs">
      <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>
  </div>
</form>

.control, fieldset {
  margin: 6px 0;
}

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

input + label {
  width: auto;
}

.description {
  display: block;
  width: auto;
  margin-top: 0;
  margin-left: 120px;
}

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

ul {
  margin-top: 0;
  margin-left: -120px;
}

NIL