Updated checkbox group for improved accessibility

What components does this change affect?

This change affects all implementations of the checkbox group component.

HTML structure changes:

Changed container element from <div> to <fieldset>
Changed group label element from <label> to <legend>

Before

<div class="form-group">
    <label class="control-label">Group Label</label>
    <!-- checkboxes -->
</div>

After

<fieldset class="form-group">
    <legend class="control-label">Group Label</legend>
    <!-- checkboxes -->
</fieldset>

Why this change was made

This change improves the accessibility and semantic structure of the checkbox group component.

Benefits include:

Better accessibility – screen readers can better identify and announce grouped checkboxes as a single related set
Supports WCAG 2.2 guidance – improves semantic grouping and accessibility best practice
Semantic HTML – uses elements according to their intended meaning rather than generic containers, improving structure and clarity

Recommended checks for consuming teams

After updating your Design System packages, we recommend reviewing checkbox groups in your application to confirm everything behaves as expected.

Areas worth checking:

checkbox groups display correctly
spacing and layout remain consistent
validation messages display as expected
screen reader behaviour meets your application requirements

Applications not using the NuGet package tag helpers should review any manually maintained checkbox group markup and align it with the updated structure shown above and on the checkbox group page in the form components section.

Data submission

No changes are expected to form submission, model binding, or data persistence as part of this update.

For peace of mind, you may wish to perform a quick check in consuming applications to confirm checkbox values continue to submit and save as expected.

Summary

This change is not expected to introduce functional issues. A quick review in consuming applications is recommended to confirm the updated markup works as expected in your implementation.

Internal reference

Design System internal reference: 95626