Forms Refresher

These elements can be unsupported in older browsers like Netscape 4, but add accessibility and usability features to newer browsers and screen readers.

• label
  • for and id attribute association.
    <label for="search">Search</label>
<input type="text" name="q" id="search" />

    This method associates a form element with a text label that can be intercepted by a screen reader. Users of many GUI browsers get the added benefit of clickable text. When the text “Search” is clicked, the associated input receives keyboard focus.

    Each label element should have a for attribute that directly corresponds to the id attribute of a form element: input, select, or textarea.

    Each id attribute must be unique and must start with an alphabetical character or underscore (id must not start with a numeric character). The id attribute should not be confused with the name attribute. name is the variable name sent to the server on submission of a form and does not need to be unique. id is used for client-side identification only and is not sent to the server.

  • Wrapping element in label (doesn’t work completely as expected).
    <label>
  Search
  <input type="text" name="q" />
</label>

    This method is technically correct and provides a larger clickable area to sighted users, but doesn’t work in many user-agents, so it’s not a recommended solution.

  • Combining both methods.
    <label for="search">
  Search
  <input type="text" name="q" id="search" />
</label>

    This method is acceptable and achieves the benefits of both.

  Tip: You can use duplicate labels for the same form element. You may wish to put one in the form next to the field and use another in an error list returned from server-side validation. See the example listed later in this page. Update (October 2, 2004): Duplicate labels are problematic because of different implementations by Assistive Technology. Don’t use this method.

• fieldset and legend

  Multiple related form elements can be grouped with the fieldset and legend elements.

  <fieldset>
  <legend>Gender</legend>
  <label for="m">Male</label>
  <input type="radio" name="g" value="m" id="m" />
  <label for="f">Female</label>
  <input type="radio" name="g" value="f" id="f" />
</fieldset>
• optgroup

  Multiple related select list option elements can be grouped with the optgroup element.

  <label for="foods">Favorite foods</label>
<select name="f" id="foods">
  <optgroup label="Fruits">
    <option value="app">Apple</option>
    <option value="ora">Orange</option>
    <option value="pea">Pear</option>
  </optgroup>
  <optgroup label="Vegetables">
    <option value="bro">Broccoli</option>
    <option value="car">Carrots</option>
    <option value="asp">Asparagus</option>
  </optgroup>
</select>


  Note: optgroup does not even work in Internet Explorer version 5, but it degrades gracefully.

• title

  Occasionally, you may run across a form element that doesn’t fit well with a label, or needs some additional information displayed. In these cases, you can use the title attribute to supplement information about any element.

  There is more info on title attributes in AIR’s Accessibility 101 course.

See an example of label, fieldset, and optgroup in use.