Updated radio buttons for improved accessibility

What components does this change affect?

This change affects all implementations of the radio buttons component.

HTML structure changes:

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

Before

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

After

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

Why this change was made

This change improves the accessibility and semantic structure of the radio buttons component.

Benefits include:

Better accessibility – screen readers can better identify and announce grouped radio buttons 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 radio buttons in your application to confirm everything behaves as expected.

Areas worth checking:

radio buttons 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 radio buttons markup and align it with the updated structure shown above and on the radio buttons 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 radio button 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: 95610