Group

Synonyms: Form field group, group field, grouping, groupbox

See also: Headings, form, toolbar

Groups are used to summarise elements that belong together in terms of their content (see DIN EN ISO 9241-161: 8.15). The group has a label which acts as a group label for the elements it contains.

• JAWS: [label] group start [label] … group end [label]
• NVDA: [label] grouping … outside of grouping
• Windows Narrator: [label] …

Please note:

• Form field groups are not output by Windows Narrator.
• In JAWS and NVDA, the end of the form field group is only perceptible with the virtual cursor when reading. When navigating with TAB, the “group” and/or “grouping” role is only output with the first (and/or with SHIFT+TAB with the last) form element in the group, i.e. when accessing the group. Exiting the group is not perceptible when navigating with TAB. The element overviews of the screen readers display the label of the form field group for each form element in the group.
• For JAWS and NVDA to be able to identify the form field groups, they must be labeled, regardless of whether they are labeled with the HTML element <fieldset> or are marked with the ARIA group and/or radiogroup roles.
• If there is a heading within the <fieldset> and outside the <legend> element, the group label will not be output correctly by JAWS. Headings should therefore be avoided in <fieldset>.

Form field groups are marked with the <fieldset> element and serve the grouping of form fields that belong together, especially in the case of radio buttons. The form elements that belong to the group are nested in the source code within the <fieldsets>. The labeling of the form field group takes place with the <legend> element which should be the first child element in the <fieldset>. As the group label is output before the label of the form elements that it contains, it is necessary to take account of the following:

• The label of the group should be as concise as possible without losing any meaning.
• Form field groups should not be nested within each other.

According to the HTML specification, the <legend> element can contain control elements. Sometimes, however, this is not supported by the assistive technology; it is therefore recommended that the label of the form field group is only included in the <legend> element in text form. The <fieldset> element can be marked as disabled with disabled. This means that all the contained form elements are disabled (with the exception of form elements located in the <legend> element).

Further information: 4.10.15 The fieldset element - HTML Standard (whatwg.org), [4].10.16 The legend element - HTML Standard (whatwg.org)](https://html.spec.whatwg.org/multipage/form-elements.html#the-legend-element)

If the form field group is not implemented with the HTML element, it is also necessary to take account of the following:

• The role of the list is communicated with role=group or role=radiogroup (with radio buttons only). When output by screen reader, no distinction is made between the group and radiogroup.
• The labeling of the group can take place with aria-label or aria-labelledby.
• The ARIA role radiogroup (in contrast to the role group) can be marked with the aria-readonly attributes as read-only, aria-required as a required field and aria-invalid as incorrect. In addition to this, aria-errormessage can be used to assign an error message to the ARIA radio buttongroup.
• Both the ARIA role radiogroup and the ARIA role group can be marked with aria-disabledas disabled. This means that all the contained form elements are output as disabled by the assistive technology (i.e. they should actually be disabled).

Further information: group role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org) (External Link), radiogroup role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org) (External Link)

Information about this article

Date:

6.12.2024

License:

CC-BY-SA 4.0

Version:

1.0

You are welcome to send feedback by email about our handout!