Required Form Fields

By October 10th, 2005

Use a separate fieldset for required fields, or denote them with an asterisk that is visually placed to the right of the input control using absolute positioning but is part of the label.

Over time a standard seems to have emerged for denoting required fields: changing the style of the label making it bold and/or red, and often including an asterisk beside the input text form control. Often times this asterisk is placed to the right of the input box, and consequently after the text box when examining the source order.

With the asterisk rendered after the field itself, it is not always read aloud by a screen reader, nor seen by a person with low vision using a magnifier. While it is also the user’s responsibility to understand what fields are and aren’t required, we, as developers and designers, certainly can make it easier for people to discover which fields are required.

A typical strategy is to change the form layout so that the label and its asterisk are listed above the form control itself, making it easier for screen reader users and low vision users to determine which ones are required. As a fully sighted user, I find this type of layout a bit more difficult to use, as I can’t scan quickly to determine the required fields – for me, the layout with the asterisk to the right of the form field is much more usable. So, how do we balance the needs of multiple groups?

Here are two possible strategies that are useful:

  1. Very simply, place all required fields in a “Required” fieldset and other information in an “Optional” fieldset. This has the benefit of semantically grouping the fields together, and that the legend is (generally speaking) read out before each of the fields depending on the verbosity settings of the screen reading software. View fieldset example.
  2. You could also use semantic XHTML to provide some emphasis to the asterisk and use CSS to place the asterisk part of the label visually after the input control. This relies on absolute positioning within a relatively positioned parent as shown in this illustration:

    Screen shot of form field with label, showing the asterisk placed to the right of the text box.

    Here is the relevant HTML for this example:

    <div>
       <label for="uname">Username<em>*</em></label>
       <input id="uname" type="text" name="uname" value="" />
    </div>
    

    The CSS for this technique is fairly straightforward: first, the containing <div></div> is positioned relatively and given an appropriate width:

    form fieldset div {
      position: relative;
      width: 60em;
    }
    

    Next, the label and input are styled:

    label {
      width: 15em;
    }
    input {
      width: 15em;
    }
    

    Finally, we use CSS to place the <em>*</em> to the right of the input:

    label em {
      position: absolute;
      left: 35em;
    }
    

    This provides a benefit to sighted users, and those using screen readers. It doesn’t help low vision users in particular, but a zoom layout would be appropriate for use in this case.

    View label example

Tagged with: