comparison of forms with/without semantic markup

This simple page looks at a form that uses divs and spans instead of fieldset/legend. The difference is subtle. The screen reader will announce the legend's text with each input. This is especially helpful when you have similar groupings, such as mailing and billing address blocks. This also shows how adding the required attribute will let the user know the input is required.

non-semantic markup

Semantic Form markup

Create semantic code first, use CSS to do layout. Don't code with divs and then use CSS to make pseudo semantic elements.

Screen Reader Impact

This short video shows how these changes impact a screen reader's interpretation of the form elements

old and new code snippets

old code

<div>
  <span>
    <div class="heading2">Mailing Address</div>
  
    <div autocomplete="off" id="editForm">
      <input type="hidden" value="1120511496887241205" id="guidfield_1120511496887241205" name="guidfield_1120511496887241205">
      <span>
        <span>
        <div id="id12_row" class="wrapper">
          <div class="label required">
            <label for="id12" class="label required">Address Line 1:</label>
          </div>
          <div class="field">
            <input type="text" size="30" fieldid="address.address1" maxlength="75" id="id12" name="editMailingAddress:border:editForm:inputs:0:input:input" value="" class="null required text">
          </div>
        </div>
        </span>
      </span>
      <span>
        <span>
          <div id="id13_row" class="wrapper">
            <div class="label">
            <label for="id13" class="label">Address Line 2:</label>
            </div>
            <div class="field">
            <input type="text" size="30" fieldid="address.address2" maxlength="75" class="text" id="id13" name="editMailingAddress:border:editForm:inputs:1:input:input" value="">
            </div>
          </div>
        </span>
      </span>
      <span>
        <span>
          <div id="id14_row" class="wrapper">
            <div class="label required">
            <label for="id14" class="label required">City:</label>
            </div>
            <div class="field">
            <input type="text" size="30" fieldid="address.city" maxlength="45" id="id14" name="editMailingAddress:border:editForm:inputs:2:input:input" value="" class="null required text">
            </div>
          </div>
        </span>
      </span>
      <span>
        <span>
          <div id="id15_row" class="wrapper">
            <div class="label required">
              <label for="id15" class="label required">State:</label>
            </div>
            <div class="field">
              <select fieldid="address.state" id="id15" name="editMailingAddress:border:editForm:inputs:3:input:input" class="null required choice">
              <option value="" selected="selected">Choose One</option>
              <option value="AL">Alabama</option>
              <option value="AK">Alaska</option>
              <option value="AS">American Samoa</option>
              <option value="AZ">Arizona</option>
              <option value="AR">Arkansas</option>
              <option value="CA">California</option>
              <option value="CO">Colorado</option>
              <option value="CT">Connecticut</option>
              <option value="DE">Delaware</option>
              <option value="DC">District of Columbia</option>
              <option value="FL">Florida</option>
              <option value="GA">Georgia</option>
              <option value="GU">Guam</option>
              <option value="HI">Hawaii</option>
              <option value="ID">Idaho</option>
              <option value="IL">Illinois</option>
              <option value="IN">Indiana</option>
              <option value="IA">Iowa</option>
              <option value="KS">Kansas</option>
              <option value="KY">Kentucky</option>
              <option value="LA">Louisiana</option>
              <option value="ME">Maine</option>
              <option value="MD">Maryland</option>
              <option value="MA">Massachusetts</option>
              <option value="MI">Michigan</option>
              <option value="MN">Minnesota</option>
              <option value="MS">Mississippi</option>
              <option value="MO">Missouri</option>
              <option value="MT">Montana</option>
              <option value="NE">Nebraska</option>
              <option value="NV">Nevada</option>
              <option value="NH">New Hampshire</option>
              <option value="NJ">New Jersey</option>
              <option value="NM">New Mexico</option>
              <option value="NY">New York</option>
              <option value="NC">North Carolina</option>
              <option value="ND">North Dakota</option>
              <option value="MP">Northern Mariana Is.</option>
              <option value="OH">Ohio</option>
              <option value="OK">Oklahoma</option>
              <option value="OR">Oregon</option>
              <option value="OU">Outside_US</option>
              <option value="PA">Pennsylvania</option>
              <option value="PR">Puerto Rico</option>
              <option value="RI">Rhode Island</option>
              <option value="SC">South Carolina</option>
              <option value="SD">South Dakota</option>
              <option value="TN">Tennessee</option>
              <option value="TX">Texas</option>
              <option value="VI">US Virgin Islands</option>
              <option value="UT">Utah</option>
              <option value="VT">Vermont</option>
              <option value="VA">Virginia</option>
              <option value="WA">Washington</option>
              <option value="WV">West Virginia</option>
              <option value="WI">Wisconsin</option>
              <option value="WY">Wyoming</option>
              </select>
            </div>
          </div>
        </span>
      </span>
      <span>
      <span>
      <div id="id16_row" class="wrapper">
      <div class="label required">
      <label for="id16" class="label required">Zip Code:</label>
      </div>
      <div class="field">
      <input type="text" maxlength="5" size="5" fieldid="address.zip" mask="zip" id="id16" name="editMailingAddress:border:editForm:inputs:4:input:input" value="94404" class="null required text">
      </div>
      </div>
      </span>
      </span>
    
      <span style="display:none" id="id17"></span>
    </div>
  
  </span>
</div>

new code

<fieldset>
<legend>Mailing Address</legend>
  <div autocomplete="off" id="editForm">
  <input type="hidden" value="1120511496887241205" id="guidfield_1120511496887241205" name="guidfield_1120511496887241205">

  <!-- address 1 -->
  <div id="id12_row" class="wrapper">
    <label for="id12" class="label required">Address Line 1:</label>
    <input type="text" size="30" fieldid="address.address1" maxlength="75" id="id12" name="editMailingAddress:border:editForm:inputs:0:input:input" value="" class="null required text" required >
  </div>

  <!-- address 2 -->
  <div id="id13_row" class="wrapper">
    <label for="id13" class="label">Address Line 2:</label>
    <input type="text" size="30" fieldid="address.address2" maxlength="75" class="text" id="id13" name="editMailingAddress:border:editForm:inputs:1:input:input" value="">
  </div>
  
  <!-- city -->
  <div id="id14_row" class="wrapper">
    <label for="id14" class="label required">City:</label>
    <input type="text" size="30" fieldid="address.city" maxlength="45" id="id14" name="editMailingAddress:border:editForm:inputs:2:input:input" value="" class="null required text" required>
  </div>

  <!-- state-->
  <div id="id15_row" class="wrapper">
      <label for="id15" class="label required">State:</label>
      <select fieldid="address.state" id="id15" name="editMailingAddress:border:editForm:inputs:3:input:input" class="null required choice" required>
      <option value="" selected="selected">Choose One</option>
      <option value="AL">Alabama</option>
      <option value="AK">Alaska</option>
      <option value="AS">American Samoa</option>
      <option value="AZ">Arizona</option>
      <option value="AR">Arkansas</option>
      <option value="CA">California</option>
      <option value="CO">Colorado</option>
      <option value="CT">Connecticut</option>
      <option value="DE">Delaware</option>
      <option value="DC">District of Columbia</option>
      <option value="FL">Florida</option>
      <option value="GA">Georgia</option>
      <option value="GU">Guam</option>
      <option value="HI">Hawaii</option>
      <option value="ID">Idaho</option>
      <option value="IL">Illinois</option>
      <option value="IN">Indiana</option>
      <option value="IA">Iowa</option>
      <option value="KS">Kansas</option>
      <option value="KY">Kentucky</option>
      <option value="LA">Louisiana</option>
      <option value="ME">Maine</option>
      <option value="MD">Maryland</option>
      <option value="MA">Massachusetts</option>
      <option value="MI">Michigan</option>
      <option value="MN">Minnesota</option>
      <option value="MS">Mississippi</option>
      <option value="MO">Missouri</option>
      <option value="MT">Montana</option>
      <option value="NE">Nebraska</option>
      <option value="NV">Nevada</option>
      <option value="NH">New Hampshire</option>
      <option value="NJ">New Jersey</option>
      <option value="NM">New Mexico</option>
      <option value="NY">New York</option>
      <option value="NC">North Carolina</option>
      <option value="ND">North Dakota</option>
      <option value="MP">Northern Mariana Is.</option>
      <option value="OH">Ohio</option>
      <option value="OK">Oklahoma</option>
      <option value="OR">Oregon</option>
      <option value="OU">Outside_US</option>
      <option value="PA">Pennsylvania</option>
      <option value="PR">Puerto Rico</option>
      <option value="RI">Rhode Island</option>
      <option value="SC">South Carolina</option>
      <option value="SD">South Dakota</option>
      <option value="TN">Tennessee</option>
      <option value="TX">Texas</option>
      <option value="VI">US Virgin Islands</option>
      <option value="UT">Utah</option>
      <option value="VT">Vermont</option>
      <option value="VA">Virginia</option>
      <option value="WA">Washington</option>
      <option value="WV">West Virginia</option>
      <option value="WI">Wisconsin</option>
      <option value="WY">Wyoming</option>
      </select>
  </div>
  
  <!-- zipcode -->
  <div id="id16_row" class="wrapper">
    <label for="id16" class="label required">Zip Code:</label>
    <input type="text" maxlength="5" size="5" fieldid="address.zip" mask="zip" id="id16" name="editMailingAddress:border:editForm:inputs:4:input:input" value="94404" class="null required text">
  </div>
  
  <!-- hidden container for alert? -->
  <span style="display:none" id="id17"></span>
  
  </div>
</fieldset>