WebAIR

Are there groups of inputs (e.g. checkboxes/radio buttons) that are grouped visually on the page? (FAC09)

Why Is This Important?

It is important to ensure that related form controls are grouped together, as this makes understanding the relationship between those controls easier. For example, a question in a form may have a number of checkboxes associated with it. By grouping the checkboxes visually on the page, this makes it clear that the checkboxes are all part of the same group of answers, and it makes it clear which question they are associated with.

How To Fix The Problem

There are various ways that groups of inputs can be grouped visually. However, only certain HTML elements will accurately convey the relationship between groups of inputs. For example, the <fieldset> element can be used to group any related form controls. This is displayed visually with a border around the grouped controls. A <legend> element must also be included to provide a label to the group. Groups of inputs can also be marked up within a list element (either unordered <ul> or ordered <ol>), which offers a logical grouping and ensures the items are grouped visually on the page.

Example

//Marking up related items as lists
<form id="customer" action="submit.php" method="post">
  <p>Please let us know how urgent your query is:</p>
  <ul>
    <li><label for="vurgent">Very urgent!</label> <input type="radio" name="urgency" id="vurgent" value="Very"></li>
    <li><label for="asap">As soon as possible please</label> <input type="radio" name="urgency" id="asap" value="Soon"></li>
    <li><label for="nurgent">Not urgent, I can wait</label> <input type="radio" name="urgency" id="nurgent" value="Wait"></li>
  </ul>

  <p>In the past how happy were you with our reponse?</p>
  <ul>
    <li><label for="very">Very happy</label> <input type="radio" name="happy" id="very" value="very_happy"></li>
    <li><label for="satisfied">Satisfied</label> <input type="radio" name="happy" id="satisfied" value="sat"></li>
    <li><label for="no_opinion">No opinion, but I got a response that met my needs.</label> <input type="radio" name="happy" id="no_opinion" value="no_op"></li>
    <li><label for="unhappy">Unhappy</label> <input type="radio" name="happy" id="unhappy" value="un_happy"></li>
  </ul>
</form>

// Marking up related items using <fieldset> and <legend>
<form id="customer" action="some.php" method="post">
  <fieldset>
    <legend>Please let us know how urgent your query is:</legend>
    <ul>
      <li><label for="vurgent">Very urgent!</label> <input type="radio" name="urgency" id="vurgent" value="Very"></li>
    <li><label for="asap">As soon as possible please</label> <input type="radio" name="urgency" id="asap" value="Soon"></li>
    <li><label for="nurgent">Not urgent, I can wait</label> <input type="radio" name="urgency" id="nurgent" value="Wait"></li>
    </ul>
  </fieldset>

  <fieldset>
    <legend>In the past how happy were you with our reponse?</legend>
    <ul>
      <li><label for="very">Very happy</label> <input type="radio" name="happy" id="very" value="very_happy"></li>
      <li><label for="satisfied">Satisfied</label> <input type="radio" name="happy" id="satisfied" value="sat"></li>
      <li><label for="no_opinion">No opinion, but I got a response that met my needs.</label> <input type="radio" name="happy" id="no_opinion" value="no_op"></li>
      <li><label for="unhappy">Unhappy</label> <input type="radio" name="happy" id="unhappy" value="un_happy"></li>
    </ul>
  </fieldset>
</form>

Further Information

  1. http://www.w3.org/community/webed/wiki/HTML_forms_-_the_basics#Step_four:_further_structuring_with_fieldsets_and_legends
  2. http://webaim.org/techniques/forms/screen_reader#group