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.

Figure 21: Grouped radio buttons with a group label

Presentation

Permalink "Presentation"

radio buttons) and

check boxes in particular.

| Should | DIN EN ISO 9241-125: 5.1.8 |

No.PropertyDescriptionClassificationReference
366ContrastThe visual indicator for the group (e.g. the border around the group) must have a contrast ratio of at least 3:1 to the background or the neighboring colors.

Exceptions:
  • The visual indicator has not been designed with color but spatially (e.g. using the appropriate spacing between the group and the content outside the group).
  • A visual indicator is not necessary because the group encompasses the entire screen, for instance.
MustEN 301 549:
9.1.4.11, 11.1.4.11
367ContrastThe label of the group must have a contrast ratio of at least 4.5:1 with respect to the background.

Note: With large font (from 24 px and/or from 18.7 px in the case of bold font), a contrast ratio of at least 3:1 is sufficient.

MustEN 301 549:
9.1.4.3, 11.1.4.3
368LabelThe label of the group must be expressive.

Note: To achieve this, the label of the group should be concise and unambiguous.

MustEN 301 549:
9.2.4.6, 11.2.4.6
369LabelThe label of the group should be unambiguous and understandable within the context.ShouldDIN EN ISO 9241-171: 8.1.2, 8.1.3
370LabelForm elements that belong together in terms of their content should be grouped and labeled.

Note: This applies to groups of [](

Programming/interfaces

Permalink "Programming/interfaces"

Accessibility API). | Must | EN 301 549: 9.1.3.1, 11.1.3.1, 11.5.2.5 | | @!371 |Web: Structure | All visually perceptible areas of the pages shall also be programmatically perceptible, e.g. through

  • headings,
  • regions,
  • other groupings.
| Must | EN 301 549: 9.1.3.1 | | @!372 | Name | The group must have a concise and expressive Accessible Name. | Must | EN 301 549: 9.2.4.6, 11.2.4.6, 9.4.1.2, 11.4.1.2, 11.5.2.5 | | @!373 | Desktop: Element hierarchy | The parent / child relationships of the elements within the group must be communicated to the Accessibility API. | Must | EN 301 549: 11.5.2.9 |

No.PropertyDescriptionClassificationReference
370RoleThe “group” roles or, if applicable, a specific role for the respective group type, must be communicated to the Accessibility API (see

Practical tip: form field groups in Web applications

Permalink "Practical tip: form field groups in Web applications"

Screen reader output

Permalink "Screen reader output"
  • JAWS: [label] group … group end
  • NVDA: [label] grouping … outside of grouping
  • Windows Narrator: -

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>.

HTML

Permalink "HTML"

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)

ARIA

Permalink "ARIA"

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), radiogroup role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org)

Information about this article

Date:
15.01.2024
License:
CC-BY-SA 4.0
Version:
1.0

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