Accessible Forms – Grouping Elements Together With Fieldset

Published: | 1 Comment

The fieldset HTML element (and its accompanying legend element) can be used to group any set of input fields. Its use is optional but in certain situations it is really useful to improve accessibility in web forms. This post explains its use and accessibility benefits.

Consider the typical information a home insurance website might ask for during the application process. It might be laid out like this:

Personal Details




But of course most insurance companies allow a joint policy and similar information will need to be captured about the other person. So the form might look something like this:

Details of First Person




Details of Second Person




Whilst sighted users can see that the input boxes belong to two different people, screen reader users may be confused by the duplication of the input labels or prompts since they are identical for each person’s details. Furthermore most screen reader users will typically tab from one input box to the next and may therefore miss out any headings or other text that precedes the input boxes.

The fieldset and legend tags are useful here to set the context for the input boxes.

Technical bit – for text inputs

The fieldset is placed in the HTML to surround the elements that belong together and the legend element is used to label the context of the fieldset. The markup for the above example would therefore be:

<form class="demo">
<fieldset>
  <legend>Details of First Person</legend>
  <ul>
    <li><label for="firstname1">First name:</label>
    <input id="firstname1" name="firstname1" type="text" /></li>
    <li><label for="lastname1">Last name:</label>
    <input id="lastname1" name="lastname1" type="text" /></li>
    <li><label for="dob1">Date of Birth: (dd/mm/yyyy)</label>
    <input id="dob1" name="dob1" type="text" /></li>
  </ul>
</fieldset>

<fieldset>
  <legend>Details of Second Person</legend>
  <ul>
    <li><label for="firstname2">First name:</label>
    <input id="firstname2" name="firstname2" type="text" /></li>
    <li><label for="lastname2">Last name:</label>
    <input id="lastname2" name="lastname2" type="text" /></li>
    <li><label for="dob2">Date of Birth: (dd/mm/yyyy)</label>
    <input id="dob2" name="dob2" type="text" /></li>
  </ul>
</fieldset>
</form>

Note that it’s the legend that provides the identification for the grouping – not the fieldset itself.

Technical bit – for radio buttons

Using a fieldset and an accompanying legend is a great way to provide context for groups of radio buttons – especially if there are a number with Yes/No answers.

For example:

Two radio button groupings with yes/no answers

Two radio button groupings with yes/no answers

Adding the fieldset and legend elements the code for this question could look like this:

<fieldset>
  <legend>Do you want fries with that?</legend>
  <input type="radio" name="fries3" id="yes5" value="y">
  <label for="yes5">Yes</label>
  <input type="radio" name="fries3" id="no5" value="n">
  <label for="no5">No</label>
</fieldset>
<br>
<fieldset>
  <legend>Do you want mayonnaise?</legend>
  <input type="radio" name="mayo3" id="yes6" value="y">
  <label for="yes6">Yes</label>
  <input type="radio" name="mayo3" id="no6" value="n">
  <label for="no6">No</label>
</fieldset>

Without the fieldset and legend the questions would lose their meaning for screen reader users.

Fieldset and screen readers

Using the form HTML code from the previous examples in a test page screen readers such as NVDA and JAWS both voice the groupings to clarify the inputs.

Styling fieldset and legend with CSS

Since both fieldset and legend are established HTML tags it is easy to influence how they look in most common browsers using a cascading stylesheet (CSS). Typically browsers will present the fieldset as a box with a border and some padding – the legend being placed over the top border.

Example:

Default fieldset appearance: a bordered box with legend text overlaid

Default fieldset appearance

The border and padding can be removed to bring the style into line with the layout of the other form elements on a site.

Any other suggestions?

If you’ve got comments on any of the points covered in this post (or any of the others) I’d be glad to hear them. Likewise if you feel I’ve missed something please let me know. You can leave a comment using the comment form below.

Other posts tagged 'Forms'

Share this page (Links open new windows/tabs)

  • Share this page on LinkedIn (opens new window)
  • Share this page on Delicious (opens new window)
  • Share this page on Digg (opens new window)
  • Share this page on Posterous (opens new window)
  • Share this page on Reddit (opens new window)

One Response to “Accessible Forms – Grouping Elements Together With Fieldset”

  1. From: Toon on November 26th, 2011 at 9:06 pm

    A benefit of properly associated label tags is also that they’re clickable shortcuts for the form fields. Especially in the case of radiobuttons and checkboxes that can really come in handy, not just for screenreaders.

Like to leave a comment?

Please note: All comments are moderated before they will appear on this site.





Previous post:

Next post: