Accessible Forms – Grouping Elements Together With Fieldset

Published: Oct 11th, 2011 | Author: Graham Armfield | 1 Comment

Reading Time: 3 minutesThe 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

• First name:
  
• Last name:
  
• Date of Birth: (dd/mm/yyyy)
  

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

• First name:
  
• Last name:
  
• Date of Birth: (dd/mm/yyyy)
  

Details of Second Person

• First name:
  
• Last name:
  
• Date of Birth: (dd/mm/yyyy)
  

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:

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:

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'

• How to Build an Accessible WordPress Theme - Apr 28th, 2019
• Accessibility Checklist - Apr 7th, 2019
• Dragon Naturally Speaking Video 9 – Internet Forms - Mar 13th, 2014
• Video: How Do I Know My WordPress Website is Accessible? - Mar 5th, 2014
• Accessible Forms – Grouping Options With Optgroup - Aug 24th, 2011
• Accessible Forms – Selects or Dropdowns - May 24th, 2011
• Accessible Forms – Checkboxes and Radio Buttons - Apr 26th, 2011
• Accessible Forms – Should Every Input Have a Label? - Apr 15th, 2011
• Designing and Building Accessible Forms - Apr 12th, 2011

Categories: Accessibility, Technical Tips, Website Development | Tags: Forms, HTML, Screen Reader | 1 Comment

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.

Your Name (required)

Your eMail (will not be published) (required)

Your Website

What would you like to say?

Previous post: Accessibility London 2011 Presentations

Next post: WordPress Keyboard Accessible Dropdown Menus Plugin Version 0.1