Proposed re-structuring of Gravity Forms complex fields for a11y

gf-a11y-sample-complex-fields.html

<ul>
  <!-- Original First Name/Last Name Complex Field -->
  <li id="field_6_13" class="gfield field_sublabel_below field_description_above">
    <label class="gfield_label" for="input_6_13_3">Name</label>
    <div class="ginput_complex ginput_container no_prefix has_first_name no_middle_name has_last_name no_suffix" id="input_6_13">
      <span id="input_6_13_3_container" class="name_first">
        <input type="text" name="input_13.3" id="input_6_13_3" value="" aria-label="First name" vk_1cc20="subscribed" data-cip-id="input_6_13_3">
        <label for="input_6_13_3">First</label>
      </span>
      <span id="input_6_13_6_container" class="name_last">
        <input type="text" name="input_13.6" id="input_6_13_6" value="" aria-label="Last name" vk_1cc20="subscribed" data-cip-id="input_6_13_6">
        <label for="input_6_13_6">Last</label>
      </span>
      <div class="gf_clear gf_clear_complex"></div>
    </div>
  </li>
  <!-- Accessible First Name/Last Name Complex Field -->
  <li id="field_6_13" class="gfield field_sublabel_below field_description_above">
    <fieldset>
      <legend class="gfield_label">Name</legend>
      <div class="ginput_complex ginput_container no_prefix has_first_name no_middle_name has_last_name no_suffix" id="input_6_13">
        <span id="input_6_13_3_container" class="name_first">
          <input type="text" name="input_13.3" id="input_6_13_3" value="" aria-label="First name" vk_186e8="subscribed" data-cip-id="input_6_13_3">
          <label for="input_6_13_3">First</label>
        </span>
        <span id="input_6_13_6_container" class="name_last">
          <input type="text" name="input_13.6" id="input_6_13_6" value="" aria-label="Last name" vk_186e8="subscribed" data-cip-id="input_6_13_6">
          <label for="input_6_13_6">Last</label>
        </span>
        <div class="gf_clear gf_clear_complex"></div>
      </div>
    </fieldset>
  </li>
  <!-- Original Email/Confirm Email Complex Field -->
  <li id="field_2_2" class="gfield gfield_contains_required field_sublabel_below field_description_below">
    <label class="gfield_label" for="input_2_2">Email<span class="gfield_required">*</span></label>
    <div class="ginput_complex ginput_container" id="input_2_2_container">
      <span id="input_2_2_1_container" class="ginput_left">
        <input class="" type="email" name="input_2" id="input_2_2" value="" tabindex="3" data-cip-id="input_2_2">
        <label for="input_2_2">Enter Email</label>
      </span>
      <span id="input_2_2_2_container" class="ginput_right">
        <input class="" type="email" name="input_2_2" id="input_2_2_2" value="" tabindex="4" data-cip-id="input_2_2_2">
        <label for="input_2_2_2">Confirm Email</label>
      </span>
      <div class="gf_clear gf_clear_complex"></div>
    </div>
  </li>
  <!-- Accessible Email/Confirm Email Complex Field -->
  <li id="field_2_2" class="gfield gfield_contains_required field_sublabel_below field_description_below">
    <fieldset>
      <legend class="gfield_label" for="input_2_2">
        Email<span class="gfield_required">*</span>
      </legend>
      <div class="ginput_complex ginput_container" id="input_2_2_container">
        <span id="input_2_2_1_container" class="ginput_left">
          <input class="" type="email" name="input_2" id="input_2_2" value="" tabindex="3" data-cip-id="input_2_2">
          <label for="input_2_2">Enter Email</label>
        </span>
        <span id="input_2_2_2_container" class="ginput_right">
          <input class="" type="email" name="input_2_2" id="input_2_2_2" value="" tabindex="4" data-cip-id="input_2_2_2">
          <label for="input_2_2_2">Confirm Email</label>
        </span>
        <div class="gf_clear gf_clear_complex"></div>
      </div>
    </fieldset>
  </li>
</ul>