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
Example 2: Fieldset and legend with different types of elements with logical grouping
Example 3: Grouping radio buttons using radiogroup role and aria-labelledby for group heading (ARIA)
Example 4: Grouping related elements using role group (ARIA)
*
–
–
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.