Grouping form controls together under a single label
Introduction
Below are several examples that show how to associate multiple form elements, such as text-input fields or radio buttons, with a single label. Each has been tested with JAWS, NVDA and VoiceOver in combination with Internet Explorer, Firefox and Safari. The differences between the examples are evident when using a screen reader but are not necessarily evident visually. When testing these examples yourself, be sure to use multiple screen readers and browsers as results may vary from one combination to the next.
In these examples, each input element is coded as a child of its corresponding label element, a practice that is now permitted in HTML5. Here is a code sample:
This greatly simplifies form construction because it eliminates the need to use matching for and id attributes on each label and input. (Unique id attributes are still required when using aria-labelledby, or when linking fields with labels across table cells.)
Visible group and form-element labels using fieldset and no ARIA markup
This is the standard method for grouping form elements together under a common label. It works well with all screen readers. Use this method if you don't need to worry about hiding labels from sighted users.
Text-entry fields
Radio buttons
Visible and invisible group and form-element labels using HTML with ARIA markup
Example 1: Visible group label; hidden input labels on the input element
This example uses fieldset to show a group label and uses aria-label as an attribute on the input element to convey each text field's invisible label to the screen reader. JAWS, Firefox and VoiceOver will read all of the labels aloud.
Example 2: Visible group label; hidden input labels on the label element
This example shows a group label and uses aria-label as an attribute on the label element to convey each text field's invisible label to the screen reader. This works with JAWS and NVDA; it works with VoiceOver in virtual-cursor mode but not when tabbing from one form control to the next.
Example 3: Hidden group label; visible input labels on the label element
In this example, the form is wrapped in a div and assigned role="group" as a way to group the form elements together. aria-label is included as an attribute on the div element to convey the group label to the screen reader. The label element is used to display the text-field labels.
Example 4: Visible group and text-field labels
In this example, the form is wrapped in a div and assigned role="group" as a way to group the form elements together. aria-labelledby is included as an attribute on the div element to associate the visible group label with each form element. The label element is used to display the text-field labels.
Phone:
Example 5: Grouping two elements together using role="group"
Security Questions
Example 6: Grouping two elements together using fieldset
Another way to group form elements under a common label
Here is an alternative method for structuring radion-button forms, such as multiple-choice questions. Each question below is marked up with the heading element, which makes it easy for screen-reader users jump from one question to the next. Each heading also acts as a label for its corresponding radio button group. Newer screen readers will read the group label (that is, the heading/question) when the virtual focus enters or leaves the group.