Grouping Related Form Elements

The related elements in a form need to be grouped together. The technique of grouping related form elements allows users to understand the relationship of the controls and interact with the form more quickly and effectively. Grouping related form elements can be established by enclosing them within the fieldset element. All controls within a given fieldset are then related. The first element inside the fieldset must be a legend element, which provides a label or description for the group.

The grouping related form elements can also be established using WAI ARIA group role and radiogroup role. The relation with the group heading can be then established using aria-labelledby property.

Grouping related form elements such as radio buttons and check boxes is extremely important in a screen reader perspective. Associating the group heading with the group is equally important. Eg: the radio buttons male and female need to be associated to a group heading such as gender. Similarly a group heading such as What colors do you like? need to be associated with the group of check boxes in it. The other grouping we commonly observe are address groups such as postal address and residential address, SSN or phone numbers having the fields split into parts etc.

The fieldset element draws a box around the related elements, however this can be controlled using CSS techniques.

Example 1: Using fieldset and legend

In the example below HTML native controls <fieldset> and <legend> are used for grouping related form elements

Select one of the payment modes below and continue payment

Mode of payment

Example 2: Fieldset and legend with different types of elements with logical grouping

Residential Address

Postal Address

Example 3: Grouping radio buttons using radiogroup role and aria-labelledby for group heading (ARIA)

Mode of payment

Example 4: Grouping related elements using role group (ARIA)

Social Security#

Example 5: Reading the radiogroup label along with each radio button (ARIA)

In this example role radio group is used to group the radio buttons and aria-labelledby is used to refer the group heading and individual labels of each radio button. aria-labelledby is specified for each radio button refering the id of label and the group heading. So even in NVDA group label is announced along with each radio button, not just while navigating into the group.

Mode of payment

Comments are closed.